/* راهنمای مدیریت باکس‌ها:
    - باکس‌های غیرفعال داخل کامنت HTML نگه داشته شده‌اند (هر کدام با عنوان مشخص).
      برای فعال‌سازی دوباره یک باکس، کافیست علامت‌های کامنت
      "<!--" در ابتدا و "-->" در انتها را از اطراف همان بلوک حذف کنید.
    - برای غیرفعال کردن یک باکس فعال، همان بلوک <div class="col-6...">...</div>
      را بین <!-- و --> قرار دهید.
    - تعداد باکس‌های فعال روی چیدمان (تعداد در هر ردیف) اثر می‌گذارد؛
      این مقدار در فایل CSS با کلاس .col-lg-2-4 کنترل می‌شود
      (به توضیحات همان بخش در CSS مراجعه کنید). */
/*  

راحت‌ترین روش:

توی index.html دنبال کامنت مربوط به همون باکس بگرد — مثلاً برای «ستاد اقامه نماز» دنبال این خط باش:
<!-- غیرفعال: 1- ستاد اقامه نماز
کل بلوک HTML اون باکس بین <!-- (خط شروع) و --> (خط پایان، که نوشته «پایان غیرفعال: ...») قرار داره. فقط همون دو خط علامت کامنت (ابتدا و انتها) رو پاک کن — بقیه‌ی کد دست‌نخورده می‌مونه و باکس همون‌جا، توی همون ترتیب، دوباره فعال می‌شه.
اگه با فعال‌شدن این باکس، تعداد کل باکس‌های فعال عوض شد (مثلاً از ۴ شد ۵)، فقط برو توی فایل CSS، بخش «چیدمان باکس‌های صفحه اصلی» و عدد 25% رو طبق جدولی که همون‌جا نوشته شده (برای ۵ باکس بشه 20%) عوض کن — همون سه‌جا که پشت‌سرهم گذاشتم.

همین. نیازی به تغییر جای دیگه‌ای نیست. منظورش از 25 همون کدهای جدید پایین استایل هست*/

 /* index */
     /* index */
        body::before,
body::after {
    will-change: opacity;
}
.card {
    will-change: transform;
}
       .card-btn {
    text-decoration: none; /* چون تگ a به‌صورت پیش‌فرض زیرخط داره، button نداشت */
}
 .card-btn {
    -webkit-tap-highlight-color: transparent;
}
.card-btn,
.card-btn:link,
.card-btn:visited,
.card-btn:active,
.card-btn:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
        /* ============================================================
           فونت B Yekan
           ============================================================ */
        /* @font-face {
            font-family: 'B Yekan';
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot');
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot?#iefix') format('embedded-opentype'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.woff') format('woff'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        } */
h1, h2, h3, h4, h5, h6 {
    font-family:'B Yekan'!important; 
  
}
  @font-face {
	font-family: 'B Yekan';
	src: url('assets/fonts/BYekan.ttf');
  }
        /* ============================================================
           تنظیمات پایه
           ============================================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'B Yekan', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 30%, #0f2847 60%, #0a1f3a 100%);
            min-height: 100vh;
            padding: 80px 0 50px;
            overflow-x: hidden;
            position: relative;
        }

        /* ============================================================
           دونه‌های براق ستاره‌ای در پس‌زمینه
           ============================================================ */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
                radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.2), transparent),
                radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.2), transparent),
                radial-gradient(1px 1px at 300px 200px, rgba(255,255,255,0.4), transparent),
                radial-gradient(1px 1px at 400px 100px, rgba(255,255,255,0.3), transparent),
                radial-gradient(1px 1px at 500px 300px, rgba(255,255,255,0.2), transparent),
                radial-gradient(1px 1px at 600px 150px, rgba(255,255,255,0.4), transparent),
                radial-gradient(1px 1px at 700px 400px, rgba(255,255,255,0.2), transparent),
                radial-gradient(1px 1px at 800px 250px, rgba(255,255,255,0.3), transparent),
                radial-gradient(1px 1px at 900px 350px, rgba(255,255,255,0.2), transparent),
                radial-gradient(1px 1px at 1000px 180px, rgba(255,255,255,0.4), transparent),
                radial-gradient(1px 1px at 1100px 420px, rgba(255,255,255,0.2), transparent),
                radial-gradient(1px 1px at 1200px 280px, rgba(255,255,255,0.3), transparent);
            background-size: 200px 200px;
            background-repeat: repeat;
            pointer-events: none;
            z-index: 0;
            opacity: 0.6;
            animation: twinkle 4s ease-in-out infinite alternate;
        }

        @keyframes twinkle {
            0% { opacity: 0.4; }
            100% { opacity: 0.8; }
        }

        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(1px 1px at 150px 450px, rgba(255,255,255,0.5), transparent),
                radial-gradient(1px 1px at 250px 550px, rgba(255,255,255,0.3), transparent),
                radial-gradient(1px 1px at 350px 650px, rgba(255,255,255,0.5), transparent),
                radial-gradient(1px 1px at 450px 750px, rgba(255,255,255,0.3), transparent),
                radial-gradient(1px 1px at 550px 850px, rgba(255,255,255,0.5), transparent),
                radial-gradient(1px 1px at 650px 950px, rgba(255,255,255,0.3), transparent);
            background-size: 300px 300px;
            background-repeat: repeat;
            pointer-events: none;
            z-index: 0;
            opacity: 0.4;
            animation: sparkle 3s ease-in-out infinite alternate;
        }

        @keyframes sparkle {
            0% { opacity: 0.2; transform: scale(1); }
            100% { opacity: 0.6; transform: scale(1.05); }
        }

        /* ============================================================
           هدر سایت - نسخه جدید
           ============================================================ */
        .main-header-site {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background:  rgb(4 30 68 / 92%);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 150px;
            /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); */
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }

        .header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .logo-img {
            height:90px;
            width: auto;
            filter: drop-shadow(0 0 15px rgba(74, 158, 255, 0.2));
            transition: all 0.3s ease;
        }

        .logo-img:hover {
            filter: drop-shadow(0 0 25px rgba(74, 158, 255, 0.4));
            transform: scale(1.05);
        }

        .logo-text {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            background: linear-gradient(135deg, #ffffff, #8ab4d6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .header-help {
            display: flex;
            align-items: center;
        }

        .help-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, rgba(74, 158, 255, 0.2), rgba(74, 158, 255, 0.05));
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #ffffff;
            padding: 8px 18px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'B Yekan', sans-serif;
            font-size: 14px;
            backdrop-filter: blur(10px);
        }

        .help-btn i {
            font-size: 18px;
            color: #4a9eff;
            transition: all 0.3s ease;
        }

        .help-btn:hover {
            background: linear-gradient(135deg, rgba(74, 158, 255, 0.4), rgba(74, 158, 255, 0.15));
            border-color: rgba(74, 158, 255, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(74, 158, 255, 0.15);
        }

        .help-btn:hover i {
            transform: rotate(15deg) scale(1.1);
        }

        /* ============================================================
           پارتیکل های پس‌زمینه
           ============================================================ */
        .particles {
            display: none;
        }

        /* ============================================================
           هدر اصلی صفحه
           ============================================================ */
        .main-header {
            text-align: center;
            padding: 20px 0 10px;
            position: relative;
            z-index: 1;
        }

        .main-title {
            color: #ffffff;
            font-size: 36px;
            font-weight: 800;
            font-family: 'B Yekan', sans-serif;
            text-shadow: 0 0 30px rgba(100, 180, 255, 0.15), 0 2px 20px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        .main-subtitle {
            color: #8ab4d6;
            font-size: 20px;
            font-weight: 600;
            font-family: 'B Yekan', sans-serif;
            margin: 5px 0 8px;
            text-shadow: 0 0 20px rgba(100, 180, 255, 0.08);
        }

        .main-desc {
            color: rgba(138, 180, 214, 0.5);
            font-size: 16px;
            font-family: 'B Yekan', sans-serif;
            margin: 0;
        }

        /* ============================================================
           صحنه کارت 3 بعدی
           ============================================================ */
        .scene {
            width: 100%;
            height:300px;
            perspective: 1000px;
            z-index: 1;
            position: relative;
            animation: floatIn 0.8s ease backwards;
        }

        .scene:nth-child(1) { animation-delay: 0.05s; }
        .scene:nth-child(2) { animation-delay: 0.1s; }
        .scene:nth-child(3) { animation-delay: 0.15s; }
        .scene:nth-child(4) { animation-delay: 0.2s; }
        .scene:nth-child(5) { animation-delay: 0.25s; }
        .scene:nth-child(6) { animation-delay: 0.3s; }
        .scene:nth-child(7) { animation-delay: 0.35s; }
        .scene:nth-child(8) { animation-delay: 0.4s; }
        .scene:nth-child(9) { animation-delay: 0.45s; }
        .scene:nth-child(10) { animation-delay: 0.5s; }

        @keyframes floatIn {
            from {
                opacity: 0;
                transform: translateY(40px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* ============================================================
           کارت 3 بعدی
           ============================================================ */
        .card {
            width: 100%;
            position: relative;
            transition: transform 1s cubic-bezier(0.4, 0.2, 0.2, 1);
            transform-style: preserve-3d;
            cursor: pointer;
            animation: float 6s ease-in-out infinite;
            border-radius: 20px;
            background: transparent !important;
            overflow-y: unset !important;
        }

        .card.is-flipped {
            transform: rotateY(180deg) rotateX(10deg);
            animation: none;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* ============================================================
           بوردر براق سفید چرخان دور کارت
           (نسخه بهینه: انیمیت‌کردن یک متغیر زاویه به‌جای پرش بین
            چند گرادیان جدا — ظاهر یکسان، فشار خیلی کمتر روی رندر)
           ============================================================ */
        @property --angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        /* .card::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border-radius: 22px;
            background: conic-gradient(
                from var(--angle),
                rgba(255, 255, 255, 0.1),
                rgba(255, 255, 255, 0.5),
                rgba(255, 255, 255, 0.1),
                rgba(255, 255, 255, 0.6),
                rgba(255, 255, 255, 0.1),
                rgba(255, 255, 255, 0.4),
                rgba(255, 255, 255, 0.1)
            );
            z-index: -1;
            opacity: 0.6;
            animation: borderGlowSpin 3s linear infinite;
            filter: blur(2px);
        }
.card::before {
    animation-play-state: paused;
}
.card:hover::before {
    animation-play-state: running;
} */
 .card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 22px;
    background: conic-gradient(
        from var(--angle),
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.1)
    );
    z-index: -1;
    opacity: 0.6;
    animation: borderGlowSpin 3s linear infinite;
    animation-play-state: paused;   /* پیش‌فرض: متوقف */
    filter: blur(2px);
}

.card:hover::before {
    opacity: 1;
    filter: blur(3px);
    animation-play-state: running;   /* فقط با هاور اجرا می‌شه */
}
        @keyframes borderGlowSpin {
            to { --angle: 360deg; }
        }

        .card:hover::before {
            opacity: 1;
            filter: blur(3px);
        }

        /* ============================================================
           روی کارت و پشت کارت
           ============================================================ */
        .card__face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 
                0 0 20px rgba(255, 255, 255, 0.08),
                0 0 40px rgba(255, 255, 255, 0.04),
                inset 0 0 30px rgba(255, 255, 255, 0.03);
            border: 2px solid rgba(255, 255, 255, 0.25);
            /* transition: all 0.5s ease; */
            transition: box-shadow 0.4s ease, border-color 0.4s ease;
        }

        .card:hover .card__face {
            box-shadow: 
                0 0 30px rgba(255, 255, 255, 0.15),
                0 0 60px rgba(255, 255, 255, 0.08),
                inset 0 0 40px rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .card__face--front {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 15px;
            position: relative;
        }

        .card__face--front::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05));
            z-index: 0;
        }

        .card__face--back {
            transform: rotateY(180deg);
            padding: 25px 20px;
            display: flex;
            flex-direction: column;
        }

        /* ============================================================
           رنگ‌های تند هر کارت
           ============================================================ */
        .card-1 .card__face--front { 
            background: linear-gradient(145deg, #4a9eff, #0066cc) !important; 
        }
        .card-1 .card__face--back { 
            background: linear-gradient(145deg, #3d8ae0, #0055aa) !important; 
        }
        .card-1 .glow { --glow-color: rgba(74, 158, 255, 0.4); }

        .card-2 .card__face--front { 
            background: linear-gradient(145deg, #00e676, #00a84d) !important; 
        }
        .card-2 .card__face--back { 
            background: linear-gradient(145deg, #00cc66, #009944) !important; 
        }
        .card-2 .glow { --glow-color: rgba(0, 230, 118, 0.4); }

        .card-3 .card__face--front { 
            background: linear-gradient(145deg, #b366ff, #7a00cc) !important; 
        }
        .card-3 .card__face--back { 
            background: linear-gradient(145deg, #9e4dff, #6600b3) !important; 
        }
        .card-3 .glow { --glow-color: rgba(179, 102, 255, 0.4); }

        .card-4 .card__face--front { 
            background: linear-gradient(145deg, #ff4466, #cc0022) !important; 
        }
        .card-4 .card__face--back { 
            background: linear-gradient(145deg, #e63355, #b3001a) !important; 
        }
        .card-4 .glow { --glow-color: rgba(255, 68, 102, 0.4); }

        .card-5 .card__face--front { 
            background: linear-gradient(145deg, #ff8833, #e65c00) !important; 
        }
        .card-5 .card__face--back { 
            background: linear-gradient(145deg, #ff7722, #cc5200) !important; 
        }
        .card-5 .glow { --glow-color: rgba(255, 136, 51, 0.4); }

        .card-6 .card__face--front { 
            background: linear-gradient(145deg, #00e6b3, #00aa80) !important; 
        }
        .card-6 .card__face--back { 
            background: linear-gradient(145deg, #00cc99, #00996e) !important; 
        }
        .card-6 .glow { --glow-color: rgba(0, 230, 179, 0.4); }

        .card-7 .card__face--front { 
            background: linear-gradient(145deg, #ff4499, #cc0066) !important; 
        }
        .card-7 .card__face--back { 
            background: linear-gradient(145deg, #e63388, #b30055) !important; 
        }
        .card-7 .glow { --glow-color: rgba(255, 68, 153, 0.4); }

        .card-8 .card__face--front { 
            background: linear-gradient(145deg, #4488ff, #0044cc) !important; 
        }
        .card-8 .card__face--back { 
            background: linear-gradient(145deg, #3377ee, #0033b3) !important; 
        }
        .card-8 .glow { --glow-color: rgba(68, 136, 255, 0.4); }

        .card-9 .card__face--front { 
            background: linear-gradient(145deg, #66dd00, #44aa00) !important; 
        }
        .card-9 .card__face--back { 
            background: linear-gradient(145deg, #55cc00, #339900) !important; 
        }
        .card-9 .glow { --glow-color: rgba(102, 221, 0, 0.4); }

        .card-10 .card__face--front { 
            background: linear-gradient(145deg, #ff44ff, #cc00cc) !important; 
        }
        .card-10 .card__face--back { 
            background: linear-gradient(145deg, #ee33ee, #b300b3) !important; 
        }
        .card-10 .glow { --glow-color: rgba(255, 68, 255, 0.4); }

        /* ============================================================
           گلو (Glow) دنبال‌کننده موس
           ============================================================ */
        .glow {
           
    top: 0;
    left: 0;
   
            position: absolute;
            width: 200px;
            height: 200px;
            background: radial-gradient(var(--glow-color), transparent 60%);
            filter: blur(30px);
            pointer-events: none;
            z-index: 0;
            opacity: 0.3;
            transition: all 0.1s ease;
        }

        /* ============================================================
           شمارنده
           ============================================================ */
        .badge-count {
            position: absolute;
            top: 10px;
            right: 12px;
            background: rgba(255, 255, 255, 0.9);
            color: #0a2f44;
            border-radius: 50px;
            padding: 2px 10px;
            font-size: 11px;
            font-weight: 700;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            z-index: 10;
            font-family: 'B Yekan', sans-serif;
        }

        /* ============================================================
           دایره با تصویر
           ============================================================ */
        .profile-image {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-top: 15px;
            border: 4px solid rgba(255, 255, 255, 0.4);
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(5px);
            z-index: 1;
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 
                inset 0 0 30px rgba(255, 255, 255, 0.08),
                0 8px 25px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .profile-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 50%;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ============================================================
           دونه‌های براق روی عکس (هاور)
           ============================================================ */
        .profile-image::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(
                circle at 30% 30%,
                rgba(255, 255, 255, 0.3) 0%,
                transparent 30%,
                rgba(255, 255, 255, 0.1) 50%,
                transparent 70%
            );
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 2;
        }

        .profile-image::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(
                circle at 70% 70%,
                rgba(255, 255, 255, 0.2) 0%,
                transparent 40%
            );
            opacity: 0;
            transition: opacity 0.5s ease 0.1s;
            pointer-events: none;
            z-index: 2;
        }

        .profile-image .sparkle-dot {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.4);
            opacity: 0;
            transition: all 0.6s ease;
            z-index: 3;
            pointer-events: none;
        }

        .profile-image .sparkle-dot:nth-child(1) { top: 15%; left: 20%; }
        .profile-image .sparkle-dot:nth-child(2) { top: 10%; right: 25%; }
        .profile-image .sparkle-dot:nth-child(3) { bottom: 20%; left: 15%; }
        .profile-image .sparkle-dot:nth-child(4) { bottom: 15%; right: 18%; }
        .profile-image .sparkle-dot:nth-child(5) { top: 45%; left: 5%; }
        .profile-image .sparkle-dot:nth-child(6) { top: 40%; right: 5%; }
        .profile-image .sparkle-dot:nth-child(7) { top: 5%; left: 45%; }
        .profile-image .sparkle-dot:nth-child(8) { bottom: 5%; right: 40%; }

        .profile-image:hover {
            transform: scale(1.15) translateY(-5px);
            box-shadow: 
                0 0 20px var(--glow-color),
                0 0 40px var(--glow-color),
                0 0 60px var(--glow-color),
                0 15px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 255, 255, 0.8);
            background: rgba(255, 255, 255, 0.25);
        }

        .profile-image:hover img {
            transform: scale(1.1);
        }

        .profile-image:hover::before,
        .profile-image:hover::after {
            opacity: 1;
        }

        .profile-image:hover .sparkle-dot {
            opacity: 1;
            animation: sparkleDot 1.5s ease-in-out infinite alternate;
        }

        .profile-image:hover .sparkle-dot:nth-child(1) { animation-delay: 0s; }
        .profile-image:hover .sparkle-dot:nth-child(2) { animation-delay: 0.15s; }
        .profile-image:hover .sparkle-dot:nth-child(3) { animation-delay: 0.3s; }
        .profile-image:hover .sparkle-dot:nth-child(4) { animation-delay: 0.45s; }
        .profile-image:hover .sparkle-dot:nth-child(5) { animation-delay: 0.6s; }
        .profile-image:hover .sparkle-dot:nth-child(6) { animation-delay: 0.75s; }
        .profile-image:hover .sparkle-dot:nth-child(7) { animation-delay: 0.9s; }
        .profile-image:hover .sparkle-dot:nth-child(8) { animation-delay: 1.05s; }

        @keyframes sparkleDot {
            0% {
                transform: scale(0) rotate(0deg);
                opacity: 0;
            }
            50% {
                transform: scale(1.5) rotate(180deg);
                opacity: 1;
            }
            100% {
                transform: scale(0.5) rotate(360deg);
                opacity: 0.5;
            }
        }

        /* ============================================================
           اطلاعات پروفایل
           ============================================================ */
        .profile-info {
            color: #ffffff;
            text-align: center;
            margin-top: 12px;
            position: relative;
            z-index: 1;
        }

        .profile-info h2 {
            font-size: 2rem;
            margin-bottom: 3px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.588);
            font-family: 'B Yekan', sans-serif;
            font-weight: 700;
            color: #ffffff !important;
        }

        .profile-info p {
            font-size: 0.75em;
            color: rgba(255, 255, 255, 0.85) !important;
            margin: 0;
            font-family: 'B Yekan', sans-serif;
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
        }

        /* ============================================================
           دکمه ورود به بخش
           ============================================================ */
        .card-btn-wrapper {
            margin-top: auto;
            padding: 10px 0 5px;
            position: relative;
            z-index: 1;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .card-btn {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(5px);
            border: 2px solid rgb(235 228 228 / 88%);
            color: #ffffff;
            border-radius: 50px;
            padding: 10px 30px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: 'B Yekan', sans-serif;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        .card-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            transform: translate(-50%, -50%);
            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.4s ease;
            opacity: 0;
        }

        .card-btn:hover::before {
            width: 300px;
            height: 300px;
            opacity: 1;
        }

        .card-btn:hover {
            background: rgba(255, 255, 255, 0.95) !important;
            transform: scale(1.08) translateY(-3px);
            box-shadow: 0 8px 35px rgba(0, 0, 0, 0.25);
        }

        .card-1 .card-btn:hover { 
            color: #0066cc !important;
            border-color: #0066cc !important;
            box-shadow: 0 8px 35px rgba(0, 102, 204, 0.4);
        }
        .card-2 .card-btn:hover { 
            color: #00a84d !important;
            border-color: #00a84d !important;
            box-shadow: 0 8px 35px rgba(0, 168, 77, 0.4);
        }
        .card-3 .card-btn:hover { 
            color: #7a00cc !important;
            border-color: #7a00cc !important;
            box-shadow: 0 8px 35px rgba(122, 0, 204, 0.4);
        }
        .card-4 .card-btn:hover { 
            color: #cc0022 !important;
            border-color: #cc0022 !important;
            box-shadow: 0 8px 35px rgba(204, 0, 34, 0.4);
        }
        .card-5 .card-btn:hover { 
            color: #e65c00 !important;
            border-color: #e65c00 !important;
            box-shadow: 0 8px 35px rgba(230, 92, 0, 0.4);
        }
        .card-6 .card-btn:hover { 
            color: #00aa80 !important;
            border-color: #00aa80 !important;
            box-shadow: 0 8px 35px rgba(0, 170, 128, 0.4);
        }
        .card-7 .card-btn:hover { 
            color: #cc0066 !important;
            border-color: #cc0066 !important;
            box-shadow: 0 8px 35px rgba(204, 0, 102, 0.4);
        }
        .card-8 .card-btn:hover { 
            color: #0044cc !important;
            border-color: #0044cc !important;
            box-shadow: 0 8px 35px rgba(0, 68, 204, 0.4);
        }
        .card-9 .card-btn:hover { 
            color: #44aa00 !important;
            border-color: #44aa00 !important;
            box-shadow: 0 8px 35px rgba(68, 170, 0, 0.4);
        }
        .card-10 .card-btn:hover { 
            color: #cc00cc !important;
            border-color: #cc00cc !important;
            box-shadow: 0 8px 35px rgba(204, 0, 204, 0.4);
        }

        /* ============================================================
           محتوای پشت کارت
           ============================================================ */
        .back-content {
            color: #ffffff;
            height: 100%;
            display: flex;
            flex-direction: column;
            font-family: 'B Yekan', sans-serif;
        }

        .back-content h2 {
            font-size: 1.2em;
            margin-bottom: 15px;
            text-align: center;
            font-weight: 700;
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 10px;
            color: #ffffff !important;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .back-list {
            list-style: none;
            padding: 0;
            margin: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
        }

        .back-list li {
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            text-align: center;
            font-size: 14px;
            transition: all 0.3s ease;
            font-family: 'B Yekan', sans-serif;
            color: #ffffff !important;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
        }

        .back-list li:hover {
            background: rgba(255, 255, 255, 0.25) !important;
            transform: translateX(-5px);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }

        /* ============================================================
           مودال راهنما
           ============================================================ */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            animation: fadeIn 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        .modal-content {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            margin: 10% auto;
            padding: 40px;
            width: 80%;
            max-width: 600px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
            position: relative;
        }

        .close {
            position: absolute;
            right: 20px;
            top: 15px;
            color: white;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .close:hover {
            color: #e74c3c;
            transform: rotate(90deg);
        }

        .modal-content h2 {
            color: white;
            margin-bottom: 20px;
            text-align: center;
        }

        .modal-content h2 i {
            color: #3498db;
            margin-left: 10px;
        }

        .help-content {
            color: #ecf0f1;
            line-height: 2;
        }

        .help-content ul {
            list-style: none;
            padding: 0;
            margin: 15px 0;
        }

        .help-content ul li {
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .help-content ul li i {
            color: #3498db;
            margin-left: 10px;
            width: 20px;
        }

        /* ============================================================
           کلاس سفارشی برای 5 کارت در هر ردیف در دسکتاپ
           ============================================================ */
        @media (min-width: 992px) {
            .col-lg-2-4 {
                flex: 0 0 20%;
                max-width: 20%;
            }
        }

        /* ============================================================
           کوئری‌های اختصاصی برای تبلت‌های بزرگ (iPad Mini, Air, Pro)
           ============================================================ */
        /* iPad Mini و Air در حالت عمودی و افقی */
        @media (min-width: 768px) and (max-width: 1024px) {
            /* اصلاح فلکس برای اینکه کارت‌ها به صورت ردیفی (row) باشند */
            .card__face--front {
                flex-direction: row !important;
                padding: 12px 15px !important;
                align-items: center !important;
                gap: 10px !important;
                flex-wrap: nowrap !important;
                justify-content: flex-start !important;
            }
            
            .profile-image {
                width: 60px !important;
                height: 60px !important;
                margin-top: 0 !important;
                flex-shrink: 0;
            }
            
            .profile-info {
                margin-top: 0 !important;
                text-align: right !important;
                flex: 1;
                min-width: 80px;
            }
            
            .profile-info h2 {
                font-size: 0.9em !important;
                margin-bottom: 0 !important;
            }
            
            .profile-info p {
                display: none !important;
            }
            
            .card-btn-wrapper {
                margin-top: 0 !important;
                padding: 3px 0 !important;
                flex: 0 0 auto;
                width: auto !important;
                display: flex !important;
            }
            
            .card-btn {
                font-size: 11px !important;
                padding: 5px 14px !important;
                white-space: nowrap;
            }
            
            .badge-count {
                font-size: 10px !important;
                padding: 0px 8px !important;
                top: 6px;
                right: 8px;
            }
            
            /* تنظیم ارتفاع کارت‌ها برای تبلت */
            .scene {
                height: 100px !important;
                max-width: 100% !important;
            }
            
            /* کاهش فاصله بین کارت‌ها */
            .row.g-2 {
                --bs-gutter-x: 0.5rem !important;
                --bs-gutter-y: 0.5rem !important;
            }
            
            .col-md-4 {
                padding-right: 0.25rem !important;
                padding-left: 0.25rem !important;
                padding-top: 0.25rem !important;
                padding-bottom: 0.25rem !important;
            }
        }

        /* ============================================================
           سایزهای 1024 و 1280 (دسکتاپ مانند) - حالت column
           ============================================================ */
        @media (min-width: 1024px) and (max-width: 1280px) {
            /* column بمونه - مثل دسکتاپ */
            .card__face--front {
                flex-direction: column !important;
                padding: 18px 20px !important;
                align-items: center !important;
            }
            
            .profile-image {
                width: 120px !important;
                height: 120px !important;
                margin-top: 10px !important;
            }
            
            .profile-info {
                margin-top: 10px !important;
                text-align: center !important;
            }
            
            .profile-info h2 {
                font-size: 1.1em !important;
                margin-bottom: 3px !important;
            }
            
            .profile-info p {
                display: block !important;
                font-size: 0.7em !important;
            }
            
            .card-btn-wrapper {
                margin-top: auto !important;
                padding: 10px 0 5px !important;
                width: 100% !important;
                display: flex !important;
                justify-content: center !important;
            }
            
            .card-btn {
                font-size: 13px !important;
                padding: 8px 25px !important;
            }
            
            .scene {
                height: 330px !important;
                max-width: 100% !important;
            }
            
            .badge-count {
                font-size: 11px !important;
                padding: 2px 10px !important;
                top: 10px;
                right: 12px;
            }
            
            /* 5 کارت در هر ردیف */
            .col-lg-2-4 {
                flex: 0 0 20%;
                max-width: 20%;
            }
        }

        /* ============================================================
           ریسپانسیو موبایل (سایزهای کوچک)
           ============================================================ */
        @media (max-width: 768px) {
            .scene { 
                height: 220px; 
                max-width: 300px;
                margin: 0 auto;
            }
            
            .profile-image { width: 60px !important; height: 60px !important; margin-top: 0 !important; flex-shrink: 0; }
            .profile-info h2 { font-size: 0.7em !important; margin-bottom: 0 !important; }
            .profile-info p { display: none !important; }
            .card-btn { font-size: 11px !important; padding: 5px 12px !important; white-space: nowrap; }
            
            .card__face--front {
                flex-direction: row !important;
                padding: 12px 15px !important;
                align-items: center !important;
                gap: 10px !important;
                flex-wrap: nowrap !important;
                justify-content: flex-start !important;
            }
            
            .card-btn-wrapper {
                margin-top: 0 !important;
                padding: 3px 0 !important;
                flex: 0 0 auto;
                width: auto !important;
                display: flex !important;
            }
            
            .profile-info {
                margin-top: 0 !important;
                text-align: right !important;
                flex: 1;
                min-width: 80px;
            }
            
            .badge-count {
                font-size: 9px !important;
                padding: 0px 6px !important;
                top: 5px;
                right: 6px;
            }
            
            .profile-image .sparkle-dot { display: none; }
            .card { animation: none !important; }
            
            .row.g-2 {
                --bs-gutter-x: 0.5rem !important;
                --bs-gutter-y: 0.5rem !important;
            }
            
            .col-6 {
                padding-right: 0.25rem !important;
                padding-left: 0.25rem !important;
                padding-top: 0.25rem !important;
                padding-bottom: 0.25rem !important;
            }
        }

        /* ============================================================
           سایر ریسپانسیوها
           ============================================================ */
        @media (max-width: 992px) {
            .scene { height: 100px; }
            .profile-image { width: 100px; height: 100px; }
        }

        @media (max-width: 576px) {
            .main-title { font-size: 22px; }
            .main-subtitle { font-size: 14px; }
            .main-desc { font-size: 12px; }
            .profile-image .sparkle-dot { display: none; }
            .main-header-site { padding: 5px 10px; }
            .logo-img { height: 90px; }
            .logo-text { display: none; }
            .help-btn { padding: 5px 12px; font-size: 12px; }
            .help-btn span { display: none; }
            .help-btn i { font-size: 20px; }
            body { padding-top: 60px; }
            .modal-content { width: 90%; margin: 20% auto; padding: 25px; }
            
            .row.g-2 {
                --bs-gutter-x: 0.25rem !important;
                --bs-gutter-y: 0.25rem !important;
            }
            .col-6 {
                padding-right: 0.15rem !important;
                padding-left: 0.15rem !important;
                padding-top: 0.15rem !important;
                padding-bottom: 0.15rem !important;
            }
        }

        @media (max-width: 400px) {
            .scene { height: 100px; }
            .profile-image { width: 60px !important; height: 60px !important; }
            .profile-info h2 { font-size: 1em !important; }
            .card-btn { font-size: 10px !important; padding: 5px 10px !important; }
            .card__face--front { padding: 8px 10px !important; gap: 6px !important; }
            .card__face--back { padding: 12px 10px; }
        }
   /* ============================================================
   ریسپانسیو مودال راهنما (سایز نوشته‌ها متناسب با صفحه)
   ============================================================ */
@media (max-width: 576px) {
    .modal-content h2 {
        font-size: 18px;
    }
    .modal-content h2 i {
        font-size: 16px;
    }
    .help-content {
        font-size: 13px;
        line-height: 1.8;
    }
    .help-content p strong {
        font-size: 13px;
    }
    .help-content ul li {
        font-size: 12px;
        padding: 6px 0;
    }
    .help-content ul li i {
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .modal-content {
        padding: 20px 15px;
    }
    .modal-content h2 {
        font-size: 16px;
    }
    .help-content {
        font-size: 12px;
    }
    .help-content ul li {
        font-size: 11px;
    }
    .close {
        font-size: 28px;
        right: 12px;
        top: 8px;
    }
}
   /* index */
   
   /* index */

 /* arzyabi */
        /* ============================================================
           فونت و تنظیمات پایه - عمومی
           ============================================================ */
        @font-face {
            font-family: 'B Yekan';
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot');
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot?#iefix') format('embedded-opentype'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.woff') format('woff'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

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

        /* ============================================================
           کلاس‌های عمومی (مشترک در همه صفحات)
           ============================================================ */
        .page-body {
            font-family: 'B Yekan', 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 30%, #0f2847 60%, #0a1f3a 100%); */
            background: #0a2a15;
            min-height: 100vh;
            padding: 90px 0 50px;
            overflow-x: hidden;
            position: relative;
        }

        /* دونه‌های براق پس‌زمینه - عمومی */
        .page-body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
                radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.2), transparent),
                radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.2), transparent);
            background-size: 200px 200px;
            background-repeat: repeat;
            pointer-events: none;
            z-index: 0;
            opacity: 0.5;
            animation: eval-twinkle 4s ease-in-out infinite alternate;
        }

        @keyframes eval-twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 0.7; }
        }

        /* ============================================================
           هدر سایت - عمومی
           ============================================================ */
        .eval-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background: rgba(10, 22, 40, 0.92);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 20px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        }

        .eval-header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .eval-header-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .eval-logo-img {
            height: 45px;
            width: auto;
            filter: drop-shadow(0 0 15px rgba(74, 158, 255, 0.2));
            transition: all 0.3s ease;
        }

        .eval-logo-img:hover {
            filter: drop-shadow(0 0 25px rgba(74, 158, 255, 0.4));
            transform: scale(1.05);
        }

        .eval-logo-text {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            background: linear-gradient(135deg, #ffffff, #8ab4d6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .eval-back-home {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ffffff;
            padding: 8px 18px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'B Yekan', sans-serif;
            font-size: 14px;
            text-decoration: none;
            backdrop-filter: blur(10px);
        }

        .eval-back-home:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            color: #ffffff;
        }

        .eval-back-home i {
            font-size: 16px;
        }

        /* ============================================================
           کانتینر اصلی - عمومی
           ============================================================ */
        .eval-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        /* ============================================================
           هدر صفحه - اختصاصی سبز
           ============================================================ */
        .eval-page-header {
            text-align: center;
            padding: 40px 0 30px;
        }

        .eval-page-header .eval-icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(145deg, #00e676, #00a84d);
            box-shadow: 0 0 40px rgba(0, 230, 118, 0.3), 0 8px 30px rgba(0, 0, 0, 0.2);
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .eval-page-header .eval-icon-wrapper i {
            font-size: 35px;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .eval-page-header .eval-icon-wrapper:hover {
            transform: scale(1.05);
            box-shadow: 0 0 60px rgba(0, 230, 118, 0.4), 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .eval-page-header h1 {
            color: #ffffff;
            font-size: 32px;
            font-weight: 800;
            font-family: 'B Yekan', sans-serif;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        .eval-page-header p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 16px;
            font-family: 'B Yekan', sans-serif;
            margin-top: 5px;
        }

        /* ============================================================
           کارت فرم - اختصاصی سبز (شیشه‌ای)
           ============================================================ */
        .eval-form-card {
            background: rgba(0, 230, 118, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            border: 1px solid rgba(0, 230, 118, 0.2);
            box-shadow: 
                0 0 40px rgba(0, 230, 118, 0.05),
                0 0 80px rgba(0, 230, 118, 0.02),
                0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            padding: 35px 40px;
            margin-bottom: 30px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        /* افکت درخشان دور کارت */
        /* .eval-form-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 26px;
            background: conic-gradient(
                from 0deg,
                rgba(0, 230, 118, 0.1),
                rgba(0, 230, 118, 0.4),
                rgba(0, 230, 118, 0.1),
                rgba(0, 230, 118, 0.4),
                rgba(0, 230, 118, 0.1)
            );
            z-index: -1;
            opacity: 0.5;
            animation: eval-border-spin 4s linear infinite;
        } */

        @keyframes eval-border-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }

        .eval-form-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 0 60px rgba(0, 230, 118, 0.08),
                0 0 100px rgba(0, 230, 118, 0.04),
                0 25px 70px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        /* ============================================================
           گروه فرم - اختصاصی
           ============================================================ */
        .eval-form-group {
            margin-bottom: 22px;
        }

        .eval-form-group label {
            display: block;
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
            font-weight: 600;
            font-family: 'B Yekan', sans-serif;
            margin-bottom: 6px;
        }

        .eval-form-group label i {
            margin-left: 8px;
            color: #00e676;
            font-size: 14px;
        }

        .eval-form-group .eval-required {
            color: #ff4466;
            margin-right: 4px;
        }

        .eval-form-control {
            width: 100%;
            padding: 12px 18px;
            background: rgba(255, 255, 255, 0.06);
            border: 2px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            color: #ffffff;
            font-size: 15px;
            font-family: 'B Yekan', sans-serif;
            transition: all 0.3s ease;
            outline: none;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .eval-form-control:focus {
            border-color: rgba(0, 230, 118, 0.5);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 30px rgba(0, 230, 118, 0.05), inset 0 0 30px rgba(0, 230, 118, 0.02);
        }

        .eval-form-control::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .eval-form-control option {
            background: #0a1628;
            color: #ffffff;
        }

        select.eval-form-control {
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: left 15px center;
            cursor: pointer;
        }

        textarea.eval-form-control {
            min-height: 100px;
            resize: vertical;
        }

        /* ============================================================
           ردیف دو ستونه - اختصاصی
           ============================================================ */
        .eval-row-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        /* ============================================================
           عنوان بخش کشویی‌ها - اختصاصی
           ============================================================ */
        .eval-section-title {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 20px;
            margin-top: 5px;
        }

        .eval-section-title h4 {
            color: rgba(255, 255, 255, 0.6);
            font-family: 'B Yekan', sans-serif;
            font-size: 16px;
            margin-bottom: 15px;
        }

        .eval-section-title h4 i {
            color: #00e676;
            margin-left: 10px;
        }

        /* ============================================================
           دکمه ارسال - اختصاصی (هم‌رنگ با دکمه کارت سبز)
           ============================================================ */
        .eval-btn-submit {
            width: 100%;
            padding: 14px 30px;
            background: rgba(0, 230, 118, 0.15);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(0, 230, 118, 0.3);
            color: #ffffff;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .eval-btn-submit i {
            font-size: 20px;
            transition: all 0.3s ease;
        }

        .eval-btn-submit::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(0, 230, 118, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.4s ease;
            opacity: 0;
        }

        .eval-btn-submit:hover::before {
            width: 500px;
            height: 500px;
            opacity: 1;
        }

        .eval-btn-submit:hover {
            background: rgba(0, 230, 118, 0.25);
            transform: scale(1.02) translateY(-3px);
            border-color: rgba(0, 230, 118, 0.5);
            box-shadow: 0 8px 40px rgba(0, 230, 118, 0.15);
        }

        .eval-btn-submit:hover i {
            transform: translateX(-5px) scale(1.1);
        }

        /* ============================================================
           پیغام موفقیت - اختصاصی
           ============================================================ */
        .eval-success-message {
            display: none;
            background: rgba(0, 230, 118, 0.12);
            border: 1px solid rgba(0, 230, 118, 0.25);
            border-radius: 16px;
            padding: 20px 25px;
            margin-top: 20px;
            text-align: center;
            color: #ffffff;
            font-family: 'B Yekan', sans-serif;
            animation: eval-fadeInUp 0.5s ease;
        }

        .eval-success-message i {
            color: #00e676;
            font-size: 30px;
            display: block;
            margin-bottom: 10px;
        }

        .eval-success-message.show {
            display: block;
        }

        @keyframes eval-fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ============================================================
           ریسپانسیو - اختصاصی
           ============================================================ */
        @media (max-width: 768px) {
             .eval-page-header {
          
            padding: 60px 0 30px;
        }
            .page-body {
                padding: 80px 0 30px;
            }

            .eval-container {
                padding: 0 15px;
            }

            .eval-form-card {
                padding: 25px 20px;
            }

            .eval-row-form {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .eval-page-header h1 {
                font-size: 24px;
            }

            .eval-page-header .eval-icon-wrapper {
                width: 60px;
                height: 60px;
            }

            .eval-page-header .eval-icon-wrapper i {
                font-size: 26px;
            }

            .eval-btn-submit {
                font-size: 16px;
                padding: 12px 20px;
            }

            .eval-form-control {
                padding: 10px 14px;
                font-size: 14px;
            }

            .eval-header {
                padding: 5px 12px;
            }
            .eval-logo-img {
                height: 35px;
            }
            .eval-logo-text {
                font-size: 14px;
            }
            .eval-back-home {
                padding: 6px 14px;
                font-size: 12px;
            }
            .eval-back-home span {
                display: none;
            }
            .page-body {
                padding-top: 68px;
            }
        }

        @media (max-width: 576px) {
            .eval-header {
                padding: 4px 10px;
            }
            .eval-logo-img {
                height: 28px;
            }
            .eval-logo-text {
                display: none;
            }
            .eval-back-home {
                padding: 5px 12px;
            }
            .eval-back-home i {
                font-size: 16px;
            }
            .page-body {
                padding-top: 55px;
            }

            .eval-page-header h1 {
                font-size: 20px;
            }
            .eval-page-header p {
                font-size: 13px;
            }
            .eval-form-card {
                padding: 20px 15px;
                border-radius: 18px;
            }
            .eval-form-group label {
                font-size: 13px;
            }
            .eval-btn-submit {
                font-size: 14px;
                padding: 10px 16px;
            }
        }

        /* ============================================================
           اسکرول - عمومی
           ============================================================ */
       
        .eval-container{
            padding-bottom: 100px!important;
        }
   /* arzyabi */


   /* ertebat */
   
    
        .contact-container {
    padding-bottom: 100px !important;
}
        /* ============================================================
           فونت و تنظیمات پایه - عمومی
           ============================================================ */
        /* @font-face {
            font-family: 'B Yekan';
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot');
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot?#iefix') format('embedded-opentype'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.woff') format('woff'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        } */

  @font-face {
	font-family: 'B Yekan';
	src: url('assets/fonts/BYekan.ttf');
  }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* ============================================================
           کلاس‌های عمومی (مشترک در همه صفحات)
           ============================================================ */
        .contact-page-body {
            font-family: 'B Yekan', 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* background: #0d1f3c; */
              background: #2a0a15;
            min-height: 100vh;
            padding: 90px 0 50px;
            overflow-x: hidden;
            position: relative;
        }

        /* دونه‌های براق پس‌زمینه - عمومی */
        .contact-page-body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
                radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.2), transparent),
                radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.2), transparent);
            background-size: 200px 200px;
            background-repeat: repeat;
            pointer-events: none;
            z-index: 0;
            opacity: 0.5;
            animation: contact-twinkle 4s ease-in-out infinite alternate;
        }

        @keyframes contact-twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 0.7; }
        }

        /* ============================================================
           هدر سایت - عمومی
           ============================================================ */
        .contact-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background: rgba(10, 22, 40, 0.92);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 20px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        }

        .contact-header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .contact-header-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .contact-logo-img {
            height: 45px;
            width: auto;
            filter: drop-shadow(0 0 15px rgba(74, 158, 255, 0.2));
            transition: all 0.3s ease;
        }

        .contact-logo-img:hover {
            filter: drop-shadow(0 0 25px rgba(74, 158, 255, 0.4));
            transform: scale(1.05);
        }

        .contact-logo-text {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            background: linear-gradient(135deg, #ffffff, #8ab4d6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .contact-back-home {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ffffff;
            padding: 8px 18px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'B Yekan', sans-serif;
            font-size: 14px;
            text-decoration: none;
            backdrop-filter: blur(10px);
        }

        .contact-back-home:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            color: #ffffff;
        }

        .contact-back-home i {
            font-size: 16px;
        }

        /* ============================================================
           کانتینر اصلی - عمومی
           ============================================================ */
        .contact-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        /* ============================================================
           هدر صفحه - اختصاصی صورتی
           ============================================================ */
        .contact-page-header {
            text-align: center;
            padding: 40px 0 30px;
        }

        .contact-page-header .contact-icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(145deg, #ff4499, #cc0066);
            box-shadow: 0 0 40px rgba(255, 68, 153, 0.3), 0 8px 30px rgba(0, 0, 0, 0.2);
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .contact-page-header .contact-icon-wrapper i {
            font-size: 35px;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .contact-page-header .contact-icon-wrapper:hover {
            transform: scale(1.05);
            box-shadow: 0 0 60px rgba(255, 68, 153, 0.4), 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .contact-page-header h1 {
            color: #ffffff;
            font-size: 32px;
            font-weight: 800;
            font-family: 'B Yekan', sans-serif;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        .contact-page-header p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 16px;
            font-family: 'B Yekan', sans-serif;
            margin-top: 5px;
        }

        /* ============================================================
           کارت فرم - اختصاصی صورتی (شیشه‌ای)
           ============================================================ */
        .contact-form-card {
            background: rgba(255, 68, 153, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            /* border: 1px solid rgba(255, 68, 153, 0.2);
            box-shadow: 
                0 0 40px rgba(255, 68, 153, 0.05),
                0 0 80px rgba(255, 68, 153, 0.02),
                0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05); */
            padding: 35px 40px;
            margin-bottom: 30px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        /* افکت درخشان دور کارت */
        .contact-form-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 26px;
            background: conic-gradient(
                from 0deg,
                rgba(255, 68, 153, 0.1),
                rgba(255, 68, 153, 0.4),
                rgba(255, 68, 153, 0.1),
                rgba(255, 68, 153, 0.4),
                rgba(255, 68, 153, 0.1)
            );
            z-index: -1;
            opacity: 0.5;
            animation: contact-border-spin 4s linear infinite;
        }

        @keyframes contact-border-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }

        .contact-form-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 0 60px rgba(255, 68, 153, 0.08),
                0 0 100px rgba(255, 68, 153, 0.04),
                0 25px 70px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        /* ============================================================
           گروه فرم - اختصاصی
           ============================================================ */
        .contact-form-group {
            margin-bottom: 22px;
        }

        .contact-form-group label {
            display: block;
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
            font-weight: 600;
            font-family: 'B Yekan', sans-serif;
            margin-bottom: 6px;
        }

        .contact-form-group label i {
            margin-left: 8px;
            color: #ff4499;
            font-size: 14px;
        }

        .contact-form-group .contact-required {
            color: #ff4466;
            margin-right: 4px;
        }

        .contact-form-control {
            width: 100%;
            padding: 12px 18px;
            background: rgba(255, 255, 255, 0.06);
            /* border: 2px solid rgba(255, 255, 255, 0.08); */
            border-radius: 14px;
            color: #ffffff;
            font-size: 15px;
            font-family: 'B Yekan', sans-serif;
            transition: all 0.3s ease;
            outline: none;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .contact-form-control:focus {
            border-color: rgba(255, 68, 153, 0.5);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 30px rgba(255, 68, 153, 0.05), inset 0 0 30px rgba(255, 68, 153, 0.02);
        }

        .contact-form-control::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .contact-form-control option {
            background: #0a1628;
            color: #ffffff;
        }

        /* ============================================================
           ردیف دو ستونه - اختصاصی
           ============================================================ */
        .contact-row-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        /* ============================================================
           دکمه جستجو - اختصاصی (هم‌رنگ با دکمه کارت صورتی)
           ============================================================ */
        .contact-btn-search {
            margin: 0 auto;
            width: 60%;
            padding: 14px 30px;
            background: rgba(255, 68, 153, 0.15);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 68, 153, 0.3);
            color: #ffffff;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .contact-btn-search i {
            font-size: 20px;
            transition: all 0.3s ease;
        }

        .contact-btn-search::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 68, 153, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.4s ease;
            opacity: 0;
        }

        .contact-btn-search:hover::before {
            width: 500px;
            height: 500px;
            opacity: 1;
        }

        .contact-btn-search:hover {
            background: rgba(255, 68, 153, 0.25);
            transform: scale(1.02) translateY(-3px);
            border-color: rgba(255, 68, 153, 0.5);
            box-shadow: 0 8px 40px rgba(255, 68, 153, 0.15);
        }

        .contact-btn-search:hover i {
            transform: translateX(-5px) scale(1.1);
        }

        .contact-btn-search:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* ============================================================
           کارت نتیجه اطلاعات راننده
           ============================================================ */
        .contact-result-card {
            display: none;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 68, 153, 0.15);
            border-radius: 20px;
            padding: 25px 30px;
            margin-top: 20px;
            animation: contact-fadeInUp 0.5s ease;
            backdrop-filter: blur(10px);
        }

        .contact-result-card.show {
            display: block;
        }

        @keyframes contact-fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .contact-result-title {
            color: #ff4499;
            font-size: 18px;
            font-family: 'B Yekan', sans-serif;
            font-weight: 700;
            margin-bottom: 15px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 68, 153, 0.15);
            padding-bottom: 10px;
        }

        .contact-result-title i {
            margin-left: 10px;
        }

        .contact-result-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px 20px;
        }

        .contact-result-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.04);
            transition: all 0.3s ease;
        }

        .contact-result-item:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(-3px);
            border-color: rgba(255, 68, 153, 0.15);
        }

        .contact-result-item .contact-result-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 68, 153, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff4499;
            font-size: 16px;
            flex-shrink: 0;
        }

        .contact-result-item .contact-result-label {
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
            font-family: 'B Yekan', sans-serif;
        }

        .contact-result-item .contact-result-value {
            color: #ffffff;
            font-size: 15px;
            font-weight: 600;
            font-family: 'B Yekan', sans-serif;
        }

        .contact-result-item .contact-result-value.contact-phone-number {
            color: #ff4499;
            font-size: 18px;
            direction: ltr;
        }

        /* ============================================================
           ریسپانسیو - اختصاصی
           ============================================================ */
        @media (max-width: 768px) {
             .contact-page-header {
      
            padding: 60px 0 30px;
        }

            .contact-page-body {
                padding: 80px 0 30px;
            }

            .contact-container {
                padding: 0 15px;
            }

            .contact-form-card {
                padding: 25px 20px;
            }

            .contact-row-form {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .contact-page-header h1 {
                font-size: 24px;
            }

            .contact-page-header .contact-icon-wrapper {
                width: 60px;
                height: 60px;
            }

            .contact-page-header .contact-icon-wrapper i {
                font-size: 26px;
            }

            .contact-btn-search {
                font-size: 16px;
                padding: 12px 20px;
            }

            .contact-form-control {
                padding: 10px 14px;
                font-size: 14px;
            }

            .contact-result-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .contact-result-card {
                padding: 20px;
            }

            .contact-header {
                padding: 5px 12px;
            }
            .contact-logo-img {
                height: 35px;
            }
            .contact-logo-text {
                font-size: 14px;
            }
            .contact-back-home {
                padding: 6px 14px;
                font-size: 12px;
            }
            .contact-back-home span {
                display: none;
            }
            .contact-page-body {
                padding-top: 68px;
            }
        }

        @media (max-width: 576px) {
            .contact-header {
                padding: 4px 10px;
            }
            .contact-logo-img {
                height: 28px;
            }
            .contact-logo-text {
                display: none;
            }
            .contact-back-home {
                padding: 5px 12px;
            }
            .contact-back-home i {
                font-size: 16px;
            }
            .contact-page-body {
                padding-top: 55px;
            }

            .contact-page-header h1 {
                font-size: 20px;
            }
            .contact-page-header p {
                font-size: 13px;
            }
            .contact-form-card {
                padding: 20px 15px;
                border-radius: 18px;
            }
            .contact-form-group label {
                font-size: 13px;
            }
            .contact-btn-search {
                font-size: 14px;
                padding: 10px 16px;
            }
            .contact-result-item .contact-result-value {
                font-size: 13px;
            }
            .contact-result-item .contact-result-value.contact-phone-number {
                font-size: 16px;
            }
        }

        /* ============================================================
           اسکرول - عمومی
           ============================================================ */
       
       /* ertebat */


       /* safar-emen */
        
        /* ============================================================
           فونت و تنظیمات پایه - عمومی
           ============================================================ */
        /* @font-face {
            font-family: 'B Yekan';
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot');
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot?#iefix') format('embedded-opentype'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.woff') format('woff'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        } */

  @font-face {
	font-family: 'B Yekan';
	src: url('assets/fonts/BYekan.ttf');
  }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* ============================================================
           کلاس‌های عمومی (مشترک در همه صفحات)
           ============================================================ */
        .safe-page-body {
            font-family: 'B Yekan', 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #1a3a0a;
            min-height: 100vh;
            padding: 90px 0 80px;
            overflow-x: hidden;
            position: relative;
        }

        /* دونه‌های براق پس‌زمینه */
        .safe-page-body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
                radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.2), transparent),
                radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.2), transparent);
            background-size: 200px 200px;
            background-repeat: repeat;
            pointer-events: none;
            z-index: 0;
            opacity: 0.5;
            animation: safe-twinkle 4s ease-in-out infinite alternate;
        }

        @keyframes safe-twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 0.7; }
        }

        /* ============================================================
           هدر سایت
           ============================================================ */
        .safe-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background: rgba(10, 22, 40, 0.92);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 20px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        }

        .safe-header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .safe-header-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .safe-logo-img {
            height: 45px;
            width: auto;
            filter: drop-shadow(0 0 15px rgba(74, 158, 255, 0.2));
            transition: all 0.3s ease;
        }

        .safe-logo-img:hover {
            filter: drop-shadow(0 0 25px rgba(74, 158, 255, 0.4));
            transform: scale(1.05);
        }

        .safe-logo-text {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            background: linear-gradient(135deg, #ffffff, #8ab4d6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .safe-back-home {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ffffff;
            padding: 8px 18px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'B Yekan', sans-serif;
            font-size: 14px;
            text-decoration: none;
            backdrop-filter: blur(10px);
        }

        .safe-back-home:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            color: #ffffff;
        }

        .safe-back-home i {
            font-size: 16px;
        }

        /* ============================================================
           کانتینر اصلی
           ============================================================ */
        .safe-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px 20px 60px;
            position: relative;
            z-index: 1;
        }

        /* ============================================================
           هدر صفحه - اختصاصی سبز لیمویی
           ============================================================ */
        .safe-page-header {
            text-align: center;
            padding: 20px 0 30px;
        
        }

        .safe-page-header .safe-icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(145deg, #66dd00, #44aa00);
            box-shadow: 0 0 40px rgba(102, 221, 0, 0.3), 0 8px 30px rgba(0, 0, 0, 0.2);
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .safe-page-header .safe-icon-wrapper i {
            font-size: 35px;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .safe-page-header .safe-icon-wrapper:hover {
            transform: scale(1.05);
            box-shadow: 0 0 60px rgba(102, 221, 0, 0.4), 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .safe-page-header h1 {
            color: #ffffff;
            font-size: 32px;
            font-weight: 800;
            font-family: 'B Yekan', sans-serif;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        .safe-page-header p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 16px;
            font-family: 'B Yekan', sans-serif;
            margin-top: 5px;
        }

        /* ============================================================
           کارت محتوا - اختصاصی سبز لیمویی
           ============================================================ */
        .safe-content-card {
            background: rgba(102, 221, 0, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            /* border: 1px solid rgba(102, 221, 0, 0.2);
            box-shadow: 
                0 0 40px rgba(102, 221, 0, 0.05),
                0 0 80px rgba(102, 221, 0, 0.02),
                0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05); */
            padding: 35px 40px;
            margin-bottom: 30px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .safe-content-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 26px;
            background: conic-gradient(
                from 0deg,
                rgba(102, 221, 0, 0.1),
                rgba(102, 221, 0, 0.4),
                rgba(102, 221, 0, 0.1),
                rgba(102, 221, 0, 0.4),
                rgba(102, 221, 0, 0.1)
            );
            z-index: -1;
            opacity: 0.5;
            animation: safe-border-spin 4s linear infinite;
        }

        @keyframes safe-border-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }

        .safe-content-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 0 60px rgba(102, 221, 0, 0.08),
                0 0 100px rgba(102, 221, 0, 0.04),
                0 25px 70px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        /* ============================================================
           بخش‌های محتوا
           ============================================================ */
        .safe-section-title {
            color: #66dd00;
            font-size: 20px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            margin: 25px 0 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .safe-section-title:first-of-type {
            margin-top: 0;
        }

        .safe-section-title i {
            font-size: 22px;
        }

        .safe-text-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
            line-height: 2;
            font-family: 'B Yekan', sans-serif;
            padding: 0 5px;
        }

        .safe-text-content ul {
            list-style: none;
            padding: 0;
            margin: 10px 0;
        }

        .safe-text-content ul li {
            padding: 8px 15px;
            margin-bottom: 6px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 10px;
            border-right: 3px solid rgba(102, 221, 0, 0.3);
            transition: all 0.3s ease;
                 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .safe-text-content ul li:hover {
            background: rgba(255, 255, 255, 0.08);
            border-right-color: #66dd00;
            transform: translateX(-5px);
        }

        .safe-text-content ul li i {
            color: #66dd00;
            margin-left: 10px;
            width: 20px;
        }

        /* ============================================================
           گالری تصاویر
           ============================================================ */
        .safe-image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }

        .safe-image-item {
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            aspect-ratio: 16/10;
            background: rgba(255, 255, 255, 0.05);
            /* border: 1px solid rgba(255, 255, 255, 0.06); */
            transition: all 0.4s ease;
            display: flex;
            align-items: center;
            justify-content: center;
                 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .safe-image-item:hover {
            transform: scale(1.03);
            border-color: rgba(102, 221, 0, 0.3);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .safe-image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .safe-image-item .safe-image-placeholder {
            color: rgba(255, 255, 255, 0.2);
            font-size: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .safe-image-item .safe-image-placeholder span {
            font-size: 12px;
            font-family: 'B Yekan', sans-serif;
        }

        /* ============================================================
           پلیر صوتی و تصویری
           ============================================================ */
        .safe-media-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 15px 0;
        }

        .safe-media-box {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 16px;
            padding: 20px;
            /* border: 1px solid rgba(255, 255, 255, 0.06); */
            transition: all 0.3s ease;
                 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .safe-media-box:hover {
            border-color: rgba(102, 221, 0, 0.15);
            background: rgba(255, 255, 255, 0.06);
        }

        .safe-media-box .safe-media-label {
            color: rgba(255, 255, 255, 0.5);
            font-size: 13px;
            font-family: 'B Yekan', sans-serif;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .safe-media-box .safe-media-label i {
            color: #66dd00;
        }

        .safe-media-box audio,
        .safe-media-box video {
            width: 100%;
            border-radius: 10px;
            outline: none;
            background: rgba(0, 0, 0, 0.3);
        }

        .safe-media-box video {
            aspect-ratio: 16/9;
            background: #000;
        }

        /* ============================================================
           ریسپانسیو
           ============================================================ */
        @media (max-width: 992px) {
            .safe-image-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .safe-page-body {
                padding: 80px 0 40px;
            }

            .safe-container {
                padding: 40px 15px 40px;
            }

            .safe-content-card {
                padding: 25px 20px;
            }

            .safe-page-header h1 {
                font-size: 24px;
            }

            .safe-page-header .safe-icon-wrapper {
                width: 60px;
                height: 60px;
            }

            .safe-page-header .safe-icon-wrapper i {
                font-size: 26px;
            }

            .safe-image-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

            .safe-media-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .safe-section-title {
                font-size: 17px;
            }
            .safe-text-content {
                font-size: 14px;
            }

            .safe-header {
                padding: 5px 12px;
            }
            .safe-logo-img {
                height: 35px;
            }
            .safe-logo-text {
                font-size: 14px;
            }
            .safe-back-home {
                padding: 6px 14px;
                font-size: 12px;
            }
            .safe-back-home span {
                display: none;
            }
            .safe-page-body {
                padding-top: 68px;
            }
        }

        @media (max-width: 576px) {
            .safe-header {
                padding: 4px 10px;
            }
            .safe-logo-img {
                height: 28px;
            }
            .safe-logo-text {
                display: none;
            }
            .safe-back-home {
                padding: 5px 12px;
            }
            .safe-back-home i {
                font-size: 16px;
            }
            .safe-page-body {
                padding-top: 55px;
            }

            .safe-page-header h1 {
                font-size: 20px;
            }
            .safe-page-header p {
                font-size: 13px;
            }
            .safe-content-card {
                padding: 18px 14px;
                border-radius: 18px;
            }
            .safe-image-grid {
                grid-template-columns: 1fr;
            }
            .safe-section-title {
                font-size: 15px;
            }
            .safe-text-content {
                font-size: 13px;
            }
            .safe-text-content ul li {
                padding: 6px 12px;
                font-size: 13px;
            }
        }

        /* ============================================================
           اسکرول
           ============================================================ */
      
/* safar-emen */




/* dastor */
 
        /* ============================================================
           فونت و تنظیمات پایه
           ============================================================ */
        /* @font-face {
            font-family: 'B Yekan';
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot');
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot?#iefix') format('embedded-opentype'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.woff') format('woff'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        } */

  @font-face {
	font-family: 'B Yekan';
	src: url('assets/fonts/BYekan.ttf');
  }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* ============================================================
           کلاس‌های اختصاصی صفحه دستورالعمل‌های اضطراری
           ============================================================ */
        .emergency-page-body {
            font-family: 'B Yekan', 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #2a0a2a;
            min-height: 100vh;
            padding: 90px 0 80px;
            overflow-x: hidden;
            position: relative;
        }

        .emergency-page-body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
                radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.2), transparent),
                radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.3), transparent),
                radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.2), transparent);
            background-size: 200px 200px;
            background-repeat: repeat;
            pointer-events: none;
            z-index: 0;
            opacity: 0.5;
            animation: emergency-twinkle 4s ease-in-out infinite alternate;
        }

        @keyframes emergency-twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 0.7; }
        }

        /* ============================================================
           هدر سایت
           ============================================================ */
        .emergency-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background: rgba(10, 22, 40, 0.92);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 20px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        }

        .emergency-header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .emergency-header-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .emergency-logo-img {
            height: 45px;
            width: auto;
            filter: drop-shadow(0 0 15px rgba(74, 158, 255, 0.2));
            transition: all 0.3s ease;
        }

        .emergency-logo-img:hover {
            filter: drop-shadow(0 0 25px rgba(74, 158, 255, 0.4));
            transform: scale(1.05);
        }

        .emergency-logo-text {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            background: linear-gradient(135deg, #ffffff, #8ab4d6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .emergency-back-home {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ffffff;
            padding: 8px 18px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'B Yekan', sans-serif;
            font-size: 14px;
            text-decoration: none;
            backdrop-filter: blur(10px);
        }

        .emergency-back-home:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            color: #ffffff;
        }

        .emergency-back-home i {
            font-size: 16px;
        }

        /* ============================================================
           کانتینر اصلی
           ============================================================ */
        .emergency-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px 60px;
            position: relative;
            z-index: 1;
        }

        /* ============================================================
           هدر صفحه - اختصاصی ارغوانی
           ============================================================ */
        .emergency-page-header {
            text-align: center;
            padding: 40px 0 30px;
        }

        .emergency-page-header .emergency-icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(145deg, #ff44ff, #cc00cc);
            box-shadow: 0 0 40px rgba(255, 68, 255, 0.3), 0 8px 30px rgba(0, 0, 0, 0.2);
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .emergency-page-header .emergency-icon-wrapper i {
            font-size: 35px;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .emergency-page-header .emergency-icon-wrapper:hover {
            transform: scale(1.05);
            box-shadow: 0 0 60px rgba(255, 68, 255, 0.4), 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .emergency-page-header h1 {
            color: #ffffff;
            font-size: 32px;
            font-weight: 800;
            font-family: 'B Yekan', sans-serif;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        .emergency-page-header p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 16px;
            font-family: 'B Yekan', sans-serif;
            margin-top: 5px;
        }

        /* ============================================================
           کارت محتوا - اختصاصی ارغوانی
           ============================================================ */
        .emergency-content-card {
            background: rgba(255, 68, 255, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            /* border: 1px solid rgba(255, 68, 255, 0.2);
            box-shadow: 
                0 0 40px rgba(255, 68, 255, 0.05),
                0 0 80px rgba(255, 68, 255, 0.02),
                0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05); */
            padding: 35px 40px;
            margin-bottom: 30px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .emergency-content-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 26px;
            background: conic-gradient(
                from 0deg,
                rgba(255, 68, 255, 0.1),
                rgba(255, 68, 255, 0.4),
                rgba(255, 68, 255, 0.1),
                rgba(255, 68, 255, 0.4),
                rgba(255, 68, 255, 0.1)
            );
            z-index: -1;
            opacity: 0.5;
            animation: emergency-border-spin 4s linear infinite;
        }

        @keyframes emergency-border-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }

        .emergency-content-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 0 60px rgba(255, 68, 255, 0.08),
                0 0 100px rgba(255, 68, 255, 0.04),
                0 25px 70px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        /* ============================================================
           بخش‌های محتوا
           ============================================================ */
        .emergency-section-title {
            color: #ff44ff;
            font-size: 20px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            margin: 25px 0 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .emergency-section-title:first-of-type {
            margin-top: 0;
        }

        .emergency-section-title i {
            font-size: 22px;
        }

        .emergency-text-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
            line-height: 2;
            font-family: 'B Yekan', sans-serif;
            padding: 0 5px;
        }

        .emergency-text-content ul {
            list-style: none;
            padding: 0;
            margin: 10px 0;
        }

        .emergency-text-content ul li {
            padding: 8px 15px;
            margin-bottom: 6px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 10px;
            border-right: 3px solid rgba(255, 68, 255, 0.3);
            transition: all 0.3s ease;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .emergency-text-content ul li:hover {
            background: rgba(255, 255, 255, 0.08);
            border-right-color: #ff44ff;
            transform: translateX(-5px);
        }

        .emergency-text-content ul li i {
            color: #ff44ff;
            margin-left: 10px;
            width: 20px;
        }

        /* ============================================================
           بخش تماس اضطراری - ویژه
           ============================================================ */
        .emergency-contact-box {
            background: rgba(255, 68, 255, 0.06);
            /* border: 1px solid rgba(255, 68, 255, 0.15); */
            border-radius: 16px;
            padding: 20px 25px;
            margin: 15px 0;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .emergency-contact-item {
            text-align: center;
            padding: 15px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            transition: all 0.3s ease;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 1px solid rgb(255 255 255 / 38%);
        }

        .emergency-contact-item:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: scale(1.03);
        }

        .emergency-contact-item .emergency-contact-icon {
            font-size: 28px;
            color: #ff44ff;
            margin-bottom: 8px;
            display: block;
        }

        .emergency-contact-item .emergency-contact-label {
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
            font-family: 'B Yekan', sans-serif;
        }

        .emergency-contact-item .emergency-contact-number {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            direction: ltr;
            margin-top: 3px;
        }

        .emergency-contact-item .emergency-contact-number.emergency-sos {
            color: #ff44ff;
        }

        /* ============================================================
           گالری تصاویر
           ============================================================ */
        .emergency-image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }

        .emergency-image-item {
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            aspect-ratio: 16/10;
            background: rgba(255, 255, 255, 0.05);
            /* border: 1px solid rgba(255, 255, 255, 0.06); */
            transition: all 0.4s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .emergency-image-item:hover {
            transform: scale(1.03);
            border-color: rgba(255, 68, 255, 0.3);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .emergency-image-item .emergency-image-placeholder {
            color: rgba(255, 255, 255, 0.2);
            font-size: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .emergency-image-item .emergency-image-placeholder span {
            font-size: 12px;
            font-family: 'B Yekan', sans-serif;
        }

        /* ============================================================
           پلیر صوتی و تصویری
           ============================================================ */
        .emergency-media-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 15px 0;
        }

        .emergency-media-box {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.3s ease;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }

        .emergency-media-box:hover {
            border-color: rgba(255, 68, 255, 0.15);
            background: rgba(255, 255, 255, 0.06);
        }

        .emergency-media-box .emergency-media-label {
            color: rgba(255, 255, 255, 0.5);
            font-size: 13px;
            font-family: 'B Yekan', sans-serif;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .emergency-media-box .emergency-media-label i {
            color: #ff44ff;
        }

        .emergency-media-box audio,
        .emergency-media-box video {
            width: 100%;
            border-radius: 10px;
            outline: none;
            background: rgba(0, 0, 0, 0.3);
        }

        .emergency-media-box video {
            aspect-ratio: 16/9;
            background: #000;
        }

        /* ============================================================
           ریسپانسیو
           ============================================================ */
        @media (max-width: 992px) {
            .emergency-image-grid {
                grid-template-columns: 1fr 1fr;
            }
            .emergency-contact-box {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
               .emergency-page-header {
            /* text-align: center; */
            padding: 60px 0 30px;
        }

            .emergency-page-body {
                padding: 80px 0 40px;
            }

            .emergency-container {
                padding: 0 15px 40px;
            }

            .emergency-content-card {
                padding: 25px 20px;
            }

            .emergency-page-header h1 {
                font-size: 24px;
            }

            .emergency-page-header .emergency-icon-wrapper {
                width: 60px;
                height: 60px;
            }

            .emergency-page-header .emergency-icon-wrapper i {
                font-size: 26px;
            }

            .emergency-image-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

            .emergency-media-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .emergency-contact-box {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .emergency-section-title {
                font-size: 17px;
            }
            .emergency-text-content {
                font-size: 14px;
            }

            .emergency-header {
                padding: 5px 12px;
            }
            .emergency-logo-img {
                height: 35px;
            }
            .emergency-logo-text {
                font-size: 14px;
            }
            .emergency-back-home {
                padding: 6px 14px;
                font-size: 12px;
            }
            .emergency-back-home span {
                display: none;
            }
            .emergency-page-body {
                padding-top: 68px;
            }
        }

        @media (max-width: 576px) {
            .emergency-header {
                padding: 4px 10px;
            }
            .emergency-logo-img {
                height: 28px;
            }
            .emergency-logo-text {
                display: none;
            }
            .emergency-back-home {
                padding: 5px 12px;
            }
            .emergency-back-home i {
                font-size: 16px;
            }
            .emergency-page-body {
                padding-top: 55px;
            }

            .emergency-page-header h1 {
                font-size: 20px;
            }
            .emergency-page-header p {
                font-size: 13px;
            }
            .emergency-content-card {
                padding: 18px 14px;
                border-radius: 18px;
            }
            .emergency-image-grid {
                grid-template-columns: 1fr;
            }
            .emergency-section-title {
                font-size: 15px;
            }
            .emergency-text-content {
                font-size: 13px;
            }
            .emergency-text-content ul li {
                padding: 6px 12px;
                font-size: 13px;
            }
            .emergency-contact-item .emergency-contact-number {
                font-size: 16px;
            }
        }

        /* ============================================================
           اسکرول
           ============================================================ */
       
/* dastor */



/* eghameh-namaz */


           .prayer-media-box {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.3s ease;
              box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }
        .prayer-image-item {
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            aspect-ratio: 16/10;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.4s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
              box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
        }
        .prayer-text-content ul li {
    padding: 8px 15px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border-right: 3px solid rgba(0, 102, 204, 0.3);
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.85);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
}
.prayer-sub-item {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 18px 20px;
    border: 2px solid rgb(255 255 255 / 38%);
    transition: all 0.3s ease;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.prayer-content-card {
    background: rgba(74, 158, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(0, 102, 204, 0.2);
    /* box-shadow: 0 0 40px rgba(0, 102, 204, 0.05),
                0 0 80px rgba(0, 102, 204, 0.02),
                0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05); */
    padding: 35px 40px;
    margin-bottom: 30px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid gray;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}







        @font-face {
            font-family: 'B Yekan';
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot');
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot?#iefix') format('embedded-opentype'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.woff') format('woff'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

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

        .prayer-page-body {
            font-family: 'B Yekan', 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #0a1a3a;
            min-height: 100vh;
            padding: 90px 0 80px;
            overflow-x: hidden;
            position: relative;
        }

        .prayer-page-body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, rgba(74, 158, 255, 0.15), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(74, 158, 255, 0.1), transparent),
                radial-gradient(2px 2px at 50px 160px, rgba(74, 158, 255, 0.15), transparent),
                radial-gradient(2px 2px at 90px 40px, rgba(74, 158, 255, 0.1), transparent),
                radial-gradient(2px 2px at 130px 80px, rgba(74, 158, 255, 0.15), transparent),
                radial-gradient(2px 2px at 160px 30px, rgba(74, 158, 255, 0.1), transparent);
            background-size: 200px 200px;
            background-repeat: repeat;
            pointer-events: none;
            z-index: 0;
            opacity: 0.5;
            animation: prayer-twinkle 4s ease-in-out infinite alternate;
        }

        @keyframes prayer-twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 0.7; }
        }

        .prayer-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background: rgba(10, 22, 40, 0.92);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 20px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        }

        .prayer-header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .prayer-header-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .prayer-logo-img {
            height: 45px;
            width: auto;
            filter: drop-shadow(0 0 15px rgba(74, 158, 255, 0.2));
            transition: all 0.3s ease;
        }

        .prayer-logo-img:hover {
            filter: drop-shadow(0 0 25px rgba(74, 158, 255, 0.4));
            transform: scale(1.05);
        }

        .prayer-logo-text {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            background: linear-gradient(135deg, #ffffff, #8ab4d6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .prayer-back-home {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ffffff;
            padding: 8px 18px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'B Yekan', sans-serif;
            font-size: 14px;
            text-decoration: none;
            backdrop-filter: blur(10px);
        }

        .prayer-back-home:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            color: #ffffff;
        }

        .prayer-back-home i {
            font-size: 16px;
        }

        .prayer-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px 60px;
            position: relative;
            z-index: 1;
        }

        .prayer-page-header {
            text-align: center;
            padding: 40px 0 30px;
        }

        .prayer-page-header .prayer-icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(145deg, #4a9eff, #0066cc);
            box-shadow: 0 0 40px rgba(0, 102, 204, 0.3), 0 8px 30px rgba(0, 0, 0, 0.2);
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .prayer-page-header .prayer-icon-wrapper i {
            font-size: 35px;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .prayer-page-header .prayer-icon-wrapper:hover {
            transform: scale(1.05);
            box-shadow: 0 0 60px rgba(0, 102, 204, 0.4), 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .prayer-page-header h1 {
            color: #ffffff;
            font-size: 32px;
            font-weight: 800;
            font-family: 'B Yekan', sans-serif;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            margin: 0;
           
        }

        .prayer-page-header h1 span {
            background: linear-gradient(135deg, #4a9eff, #0066cc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .prayer-page-header p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 16px;
            font-family: 'B Yekan', sans-serif;
            margin-top: 5px;
        }
/* 
        .prayer-content-card {
            background: rgba(74, 158, 255, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            border: 1px solid rgba(0, 102, 204, 0.2);
            box-shadow: 
                0 0 40px rgba(0, 102, 204, 0.05),
                0 0 80px rgba(0, 102, 204, 0.02),
                0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            padding: 35px 40px;
            margin-bottom: 30px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        } */

         .prayer-content-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 26px;
            background: conic-gradient(
                from 0deg,
                rgba(0, 102, 204, 0.15),
                rgba(74, 158, 255, 0.4),
                rgba(0, 102, 204, 0.15),
                rgba(74, 158, 255, 0.4),
                rgba(0, 102, 204, 0.15)
            );
            z-index: -1;
            opacity: 0.5;
            animation: prayer-border-spin 4s linear infinite;
        } 

        @keyframes prayer-border-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }

        .prayer-content-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 0 60px rgba(0, 102, 204, 0.08),
                0 0 100px rgba(0, 102, 204, 0.04),
                0 25px 70px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .prayer-section-title {
            color: #4a9eff;
            font-size: 20px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            margin: 25px 0 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .prayer-section-title:first-of-type {
            margin-top: 0;
        }

        .prayer-section-title i {
            font-size: 22px;
        }

        .prayer-text-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
            line-height: 2;
            font-family: 'B Yekan', sans-serif;
            padding: 0 5px;
        }

        .prayer-text-content ul {
            list-style: none;
            padding: 0;
            margin: 10px 0;
        }

        /* .prayer-text-content ul li {
            padding: 8px 15px;
            margin-bottom: 6px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 10px;
            border-right: 3px solid rgba(0, 102, 204, 0.3);
            transition: all 0.3s ease;
            color: rgba(255, 255, 255, 0.85);
        } */

        .prayer-text-content ul li:hover {
            background: rgba(255, 255, 255, 0.08);
            border-right-color: #0066cc;
            transform: translateX(-5px);
        }

        .prayer-text-content ul li i {
            color: #4a9eff;
            margin-left: 10px;
            width: 20px;
        }

        .prayer-sub-items {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }

        /* .prayer-sub-item {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 14px;
            padding: 18px 20px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.3s ease;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.85);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        } */

        .prayer-sub-item:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(0, 102, 204, 0.3);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
            color: #ffffff;
        }

        .prayer-sub-item i {
            font-size: 28px;
            color: #4a9eff;
        }

        .prayer-sub-item .prayer-sub-label {
            font-family: 'B Yekan', sans-serif;
            font-size: 14px;
            font-weight: 600;
        }

        .prayer-image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }
/* 
        .prayer-image-item {
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            aspect-ratio: 16/10;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.4s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        } */

        .prayer-image-item:hover {
            transform: scale(1.03);
            border-color: rgba(0, 102, 204, 0.3);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .prayer-image-item .prayer-image-placeholder {
            color: rgba(255, 255, 255, 0.2);
            font-size: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .prayer-image-item .prayer-image-placeholder span {
            font-size: 12px;
            font-family: 'B Yekan', sans-serif;
        }

        .prayer-media-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 15px 0;
        }

        /* .prayer-media-box {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.3s ease;
        } */

        .prayer-media-box:hover {
            border-color: rgba(0, 102, 204, 0.15);
            background: rgba(255, 255, 255, 0.06);
        }

        .prayer-media-box .prayer-media-label {
            color: rgba(255, 255, 255, 0.5);
            font-size: 13px;
            font-family: 'B Yekan', sans-serif;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .prayer-media-box .prayer-media-label i {
            color: #4a9eff;
        }

        .prayer-media-box audio,
        .prayer-media-box video {
            width: 100%;
            border-radius: 10px;
            outline: none;
            background: rgba(0, 0, 0, 0.3);
        }

        .prayer-media-box video {
            aspect-ratio: 16/9;
            background: #000;
        }

        @media (max-width: 992px) {
            .prayer-image-grid {
                grid-template-columns: 1fr 1fr;
            }
            .prayer-sub-items {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .prayer-page-header {
    text-align: center;
    padding: 60px 0 30px;
}
            .prayer-page-body {
                padding: 80px 0 40px;
            }
            .prayer-container {
                padding: 0 15px 40px;
            }
            .prayer-content-card {
                padding: 25px 20px;
            }
            .prayer-page-header h1 {
                font-size: 24px;
              
            }
            .prayer-page-header .prayer-icon-wrapper {
                width: 60px;
                height: 60px;
            }
            .prayer-page-header .prayer-icon-wrapper i {
                font-size: 26px;
            }
            .prayer-image-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }
            .prayer-media-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            .prayer-sub-items {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .prayer-section-title {
                font-size: 17px;
            }
            .prayer-text-content {
                font-size: 14px;
            }
            .prayer-header {
                padding: 5px 12px;
            }
            .prayer-logo-img {
                height: 35px;
            }
            .prayer-logo-text {
                font-size: 14px;
            }
            .prayer-back-home {
                padding: 6px 14px;
                font-size: 12px;
            }
            .prayer-back-home span {
                display: none;
            }
            .prayer-page-body {
                padding-top: 68px;
            }
        }

        @media (max-width: 576px) {
            .prayer-header {
                padding: 4px 10px;
            }
            .prayer-logo-img {
                height: 28px;
            }
            .prayer-logo-text {
                display: none;
            }
            .prayer-back-home {
                padding: 5px 12px;
            }
            .prayer-back-home i {
                font-size: 16px;
            }
            .prayer-page-body {
                padding-top: 55px;
            }
            .prayer-page-header h1 {
                font-size: 20px;
            }
            .prayer-page-header p {
                font-size: 13px;
            }
            .prayer-content-card {
                padding: 18px 14px;
                border-radius: 18px;
            }
            .prayer-image-grid {
                grid-template-columns: 1fr;
            }
            .prayer-section-title {
                font-size: 15px;
            }
            .prayer-text-content {
                font-size: 13px;
            }
            .prayer-text-content ul li {
                padding: 6px 12px;
                font-size: 13px;
            }
        }

        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #4a9eff, #0066cc);
            border-radius: 10px;
        }
    /* ehameh-namaz */

    /* download apps */
       @font-face {
            font-family: 'B Yekan';
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot');
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot?#iefix') format('embedded-opentype'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.woff') format('woff'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

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

        .download-page-body {
            font-family: 'B Yekan', 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #2a1a0a;
            min-height: 100vh;
            padding: 90px 0 80px;
            overflow-x: hidden;
            position: relative;
        }

        .download-page-body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, rgba(255, 136, 51, 0.15), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255, 136, 51, 0.1), transparent),
                radial-gradient(2px 2px at 50px 160px, rgba(255, 136, 51, 0.15), transparent),
                radial-gradient(2px 2px at 90px 40px, rgba(255, 136, 51, 0.1), transparent),
                radial-gradient(2px 2px at 130px 80px, rgba(255, 136, 51, 0.15), transparent),
                radial-gradient(2px 2px at 160px 30px, rgba(255, 136, 51, 0.1), transparent);
            background-size: 200px 200px;
            background-repeat: repeat;
            pointer-events: none;
            z-index: 0;
            opacity: 0.5;
            animation: download-twinkle 4s ease-in-out infinite alternate;
        }

        @keyframes download-twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 0.7; }
        }

        .download-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background: rgba(10, 22, 40, 0.92);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 20px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        }

        .download-header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .download-header-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .download-logo-img {
            height: 45px;
            width: auto;
            filter: drop-shadow(0 0 15px rgba(74, 158, 255, 0.2));
            transition: all 0.3s ease;
        }

        .download-logo-img:hover {
            filter: drop-shadow(0 0 25px rgba(74, 158, 255, 0.4));
            transform: scale(1.05);
        }

        .download-logo-text {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            background: linear-gradient(135deg, #ffffff, #8ab4d6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .download-back-home {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ffffff;
            padding: 8px 18px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'B Yekan', sans-serif;
            font-size: 14px;
            text-decoration: none;
            backdrop-filter: blur(10px);
        }

        .download-back-home:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            color: #ffffff;
        }

        .download-back-home i {
            font-size: 16px;
        }

        .download-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px 60px;
            position: relative;
            z-index: 1;
        }

        .download-page-header {
            text-align: center;
            padding: 40px 0 30px;
        }

        .download-page-header .download-icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 85px;
            height: 85px;
            border-radius: 50%;
            background: linear-gradient(145deg, #ff8833, #e65c00);
            box-shadow: 0 0 50px rgba(255, 136, 51, 0.3), 0 8px 30px rgba(0, 0, 0, 0.2);
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .download-page-header .download-icon-wrapper i {
            font-size: 38px;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .download-page-header .download-icon-wrapper:hover {
            transform: scale(1.08) rotate(-5deg);
            box-shadow: 0 0 70px rgba(255, 136, 51, 0.4), 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .download-page-header h1 {
            color: #ffffff;
            font-size: 34px;
            font-weight: 800;
            font-family: 'B Yekan', sans-serif;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        .download-page-header h1 span {
            background: linear-gradient(135deg, #ff8833, #e65c00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .download-page-header p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 16px;
            font-family: 'B Yekan', sans-serif;
            margin-top: 5px;
        }

        .download-content-card {
            background: rgba(255, 136, 51, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            border: 1px solid rgba(255, 136, 51, 0.2);
            padding: 35px 40px;
            margin-bottom: 30px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            border: 2px solid rgb(255 255 255 / 38%);
        }

        .download-content-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 26px;
            background: conic-gradient(
                from 0deg,
                rgba(255, 136, 51, 0.15),
                rgba(230, 92, 0, 0.4),
                rgba(255, 136, 51, 0.15),
                rgba(230, 92, 0, 0.4),
                rgba(255, 136, 51, 0.15)
            );
            z-index: -1;
            opacity: 0.5;
            animation: download-border-spin 4s linear infinite;
        }

        @keyframes download-border-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }

        .download-content-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 0 60px rgba(255, 136, 51, 0.08),
                0 0 100px rgba(255, 136, 51, 0.04),
                0 25px 70px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .download-section-title {
            color: #ff8833;
            font-size: 20px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            margin: 25px 0 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 15px;
            background: rgba(255, 136, 51, 0.04);
            border-radius: 12px;
            border-right: 4px solid #ff8833;
        }

        .download-section-title:first-of-type {
            margin-top: 0;
        }

        .download-section-title i {
            font-size: 22px;
        }

        /* ===== کارت‌های اپلیکیشن ===== */
        .download-app-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin: 15px 0;
        }

        .download-app-card {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 18px;
            padding: 25px 20px;
            border: 2px solid rgb(255 255 255 / 38%);
            transition: all 0.4s ease;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .download-app-card::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 30%, rgba(255, 136, 51, 0.05), transparent 70%);
            pointer-events: none;
            transition: all 0.5s ease;
        }

        .download-app-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: rgba(255, 136, 51, 0.3);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
        }

        .download-app-card:hover::after {
            top: -30%;
            right: -30%;
        }

        .download-app-card .download-app-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            background: linear-gradient(145deg, #ff8833, #e65c00);
            box-shadow: 0 8px 25px rgba(255, 136, 51, 0.2);
            transition: all 0.3s ease;
        }

        .download-app-card:hover .download-app-icon {
            transform: scale(1.05) rotate(-5deg);
            box-shadow: 0 12px 35px rgba(255, 136, 51, 0.3);
        }

        .download-app-card .download-app-name {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            margin-bottom: 4px;
        }

        .download-app-card .download-app-desc {
            color: rgba(255, 255, 255, 0.5);
            font-size: 13px;
            font-family: 'B Yekan', sans-serif;
            margin-bottom: 12px;
            line-height: 1.6;
        }

        .download-app-card .download-app-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 136, 51, 0.15);
            border: 1px solid rgba(255, 136, 51, 0.3);
            color: #ffffff;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'B Yekan', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .download-app-card .download-app-btn:hover {
            background: rgba(255, 136, 51, 0.25);
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(255, 136, 51, 0.15);
        }

        .download-app-card .download-app-btn i {
            font-size: 16px;
            color: #ff8833;
        }

        .download-app-card .download-app-size {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(255, 255, 255, 0.06);
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.3);
            font-family: 'B Yekan', sans-serif;
        }

        /* ===== بخش کیوآر کد ===== */
        .download-qr-section {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin: 15px 0;
        }

        .download-qr-item {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 16px;
            padding: 20px;
            border: 2px solid rgb(255 255 255 / 38%);
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .download-qr-item:hover {
            transform: translateY(-5px);
            border-color: rgba(255, 136, 51, 0.2);
        }

        .download-qr-item .download-qr-placeholder {
            width: 120px;
            height: 120px;
            margin: 0 auto 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed rgba(255, 255, 255, 0.1);
            font-size: 50px;
            color: rgba(255, 255, 255, 0.15);
        }

        .download-qr-item .download-qr-label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            font-weight: 600;
            font-family: 'B Yekan', sans-serif;
        }

        .download-qr-item .download-qr-desc {
            color: rgba(255, 255, 255, 0.3);
            font-size: 12px;
            font-family: 'B Yekan', sans-serif;
            margin-top: 4px;
        }

        /* ===== بخش فروشگاه‌ها ===== */
        .download-store-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }

        .download-store-item {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 14px;
            padding: 16px 20px;
            border: 2px solid rgb(255 255 255 / 38%);
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: all 0.3s ease;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.85);
        }

        .download-store-item:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(-5px);
            border-color: rgba(255, 136, 51, 0.2);
        }

        .download-store-item .download-store-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: rgba(255, 136, 51, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: #ff8833;
            flex-shrink: 0;
        }

        .download-store-item .download-store-name {
            font-size: 15px;
            font-weight: 600;
            font-family: 'B Yekan', sans-serif;
        }

        .download-store-item .download-store-badge {
            margin-right: auto;
            background: rgba(255, 136, 51, 0.12);
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 10px;
            color: #ff8833;
            font-family: 'B Yekan', sans-serif;
        }

        /* ============================================================
           ریسپانسیو
           ============================================================ */
        @media (max-width: 992px) {
            .download-app-grid {
                grid-template-columns: 1fr 1fr;
            }
            .download-qr-section {
                grid-template-columns: 1fr 1fr;
            }
            .download-store-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            
        .download-page-header {
            text-align: center;
            padding: 60px 0 30px;
        }
            .download-page-body {
                padding: 80px 0 40px;
            }
            .download-container {
                padding: 0 15px 40px;
            }
            .download-content-card {
                padding: 25px 20px;
            }
            .download-page-header h1 {
                font-size: 24px;
            }
            .download-page-header .download-icon-wrapper {
                width: 60px;
                height: 60px;
            }
            .download-page-header .download-icon-wrapper i {
                font-size: 26px;
            }
            .download-app-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            .download-qr-section {
                grid-template-columns: 1fr;
            }
            .download-store-grid {
                grid-template-columns: 1fr;
            }
            .download-section-title {
                font-size: 17px;
                padding: 6px 12px;
            }
            .download-header {
                padding: 5px 12px;
            }
            .download-logo-img {
                height: 35px;
            }
            .download-logo-text {
                font-size: 14px;
            }
            .download-back-home {
                padding: 6px 14px;
                font-size: 12px;
            }
            .download-back-home span {
                display: none;
            }
            .download-page-body {
                padding-top: 68px;
            }
        }

        @media (max-width: 576px) {
            .download-header {
                padding: 4px 10px;
            }
            .download-logo-img {
                height: 28px;
            }
            .download-logo-text {
                display: none;
            }
            .download-back-home {
                padding: 5px 12px;
            }
            .download-back-home i {
                font-size: 16px;
            }
            .download-page-body {
                padding-top: 55px;
            }
            .download-page-header h1 {
                font-size: 20px;
            }
            .download-page-header p {
                font-size: 13px;
            }
            .download-content-card {
                padding: 18px 14px;
                border-radius: 18px;
            }
            .download-section-title {
                font-size: 15px;
            }
            .download-app-card .download-app-icon {
                width: 60px;
                height: 60px;
                font-size: 28px;
            }
            .download-app-card .download-app-name {
                font-size: 16px;
            }
            .download-qr-item .download-qr-placeholder {
                width: 80px;
                height: 80px;
                font-size: 35px;
            }
            .download-store-item .download-store-icon {
                width: 36px;
                height: 36px;
                font-size: 18px;
            }
        }
        /* download apps */
        /* manshor-mosafer */
          @font-face {
            font-family: 'B Yekan';
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot');
            src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot?#iefix') format('embedded-opentype'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.woff') format('woff'),
                 url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

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

        .charter-page-body {
            font-family: 'B Yekan', 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #0a2a22;
            min-height: 100vh;
            padding: 90px 0 80px;
            overflow-x: hidden;
            position: relative;
        }

        .charter-page-body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, rgba(0, 230, 179, 0.15), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(0, 230, 179, 0.1), transparent),
                radial-gradient(2px 2px at 50px 160px, rgba(0, 230, 179, 0.15), transparent),
                radial-gradient(2px 2px at 90px 40px, rgba(0, 230, 179, 0.1), transparent),
                radial-gradient(2px 2px at 130px 80px, rgba(0, 230, 179, 0.15), transparent),
                radial-gradient(2px 2px at 160px 30px, rgba(0, 230, 179, 0.1), transparent);
            background-size: 200px 200px;
            background-repeat: repeat;
            pointer-events: none;
            z-index: 0;
            opacity: 0.5;
            animation: charter-twinkle 4s ease-in-out infinite alternate;
        }

        @keyframes charter-twinkle {
            0% { opacity: 0.3; }
            100% { opacity: 0.7; }
        }

        .charter-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background: rgba(10, 22, 40, 0.92);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 8px 20px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        }

        .charter-header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .charter-header-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .charter-logo-img {
            height: 45px;
            width: auto;
            filter: drop-shadow(0 0 15px rgba(74, 158, 255, 0.2));
            transition: all 0.3s ease;
        }

        .charter-logo-img:hover {
            filter: drop-shadow(0 0 25px rgba(74, 158, 255, 0.4));
            transform: scale(1.05);
        }

        .charter-logo-text {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            background: linear-gradient(135deg, #ffffff, #8ab4d6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .charter-back-home {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ffffff;
            padding: 8px 18px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'B Yekan', sans-serif;
            font-size: 14px;
            text-decoration: none;
            backdrop-filter: blur(10px);
        }

        .charter-back-home:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            color: #ffffff;
        }

        .charter-back-home i {
            font-size: 16px;
        }

        .charter-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px 60px;
            position: relative;
            z-index: 1;
        }

        .charter-page-header {
            text-align: center;
            padding: 40px 0 30px;
        }

        .charter-page-header .charter-icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(145deg, #00e6b3, #00aa80);
            box-shadow: 0 0 40px rgba(0, 230, 179, 0.3), 0 8px 30px rgba(0, 0, 0, 0.2);
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .charter-page-header .charter-icon-wrapper i {
            font-size: 35px;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .charter-page-header .charter-icon-wrapper:hover {
            transform: scale(1.05);
            box-shadow: 0 0 60px rgba(0, 230, 179, 0.4), 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .charter-page-header h1 {
            color: #ffffff;
            font-size: 32px;
            font-weight: 800;
            font-family: 'B Yekan', sans-serif;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        .charter-page-header h1 span {
            background: linear-gradient(135deg, #00e6b3, #00aa80);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .charter-page-header p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 16px;
            font-family: 'B Yekan', sans-serif;
            margin-top: 5px;
        }

        .charter-content-card {
            background: rgba(0, 230, 179, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            border: 1px solid rgba(0, 230, 179, 0.2);
            padding: 35px 40px;
            margin-bottom: 30px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            border: 2px solid rgb(255 255 255 / 38%);
        }

        .charter-content-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 26px;
            background: conic-gradient(
                from 0deg,
                rgba(0, 230, 179, 0.15),
                rgba(0, 170, 128, 0.4),
                rgba(0, 230, 179, 0.15),
                rgba(0, 170, 128, 0.4),
                rgba(0, 230, 179, 0.15)
            );
            z-index: -1;
            opacity: 0.5;
            animation: charter-border-spin 4s linear infinite;
        }

        @keyframes charter-border-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }

        .charter-content-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 0 60px rgba(0, 230, 179, 0.08),
                0 0 100px rgba(0, 230, 179, 0.04),
                0 25px 70px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .charter-section-title {
            color: #00e6b3;
            font-size: 20px;
            font-weight: 700;
            font-family: 'B Yekan', sans-serif;
            margin: 25px 0 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .charter-section-title:first-of-type {
            margin-top: 0;
        }

        .charter-section-title i {
            font-size: 22px;
        }

        .charter-text-content {
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
            line-height: 2;
            font-family: 'B Yekan', sans-serif;
            padding: 0 5px;
        }

        .charter-text-content ul {
            list-style: none;
            padding: 0;
            margin: 10px 0;
        }

        .charter-text-content ul li {
            padding: 8px 15px;
            margin-bottom: 6px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 10px;
            border-right: 3px solid rgba(0, 230, 179, 0.3);
            transition: all 0.3s ease;
            color: rgba(255, 255, 255, 0.85);
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            border: 2px solid rgb(255 255 255 / 38%);
        }

        .charter-text-content ul li:hover {
            background: rgba(255, 255, 255, 0.08);
            border-right-color: #00e6b3;
            transform: translateX(-5px);
        }

        .charter-text-content ul li i {
            color: #00e6b3;
            margin-left: 10px;
            width: 20px;
        }

        .charter-sub-items {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }

        .charter-sub-item {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 14px;
            padding: 18px 20px;
            border: 2px solid rgb(255 255 255 / 38%);
            transition: all 0.3s ease;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.85);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }

        .charter-sub-item:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(0, 230, 179, 0.3);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
            color: #ffffff;
        }

        .charter-sub-item i {
            font-size: 28px;
            color: #00e6b3;
        }

        .charter-sub-item .charter-sub-label {
            font-family: 'B Yekan', sans-serif;
            font-size: 14px;
            font-weight: 600;
        }

        .charter-image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }

        .charter-image-item {
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            aspect-ratio: 16/10;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.4s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            border: 2px solid rgb(255 255 255 / 38%);
        }

        .charter-image-item:hover {
            transform: scale(1.03);
            border-color: rgba(0, 230, 179, 0.3);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        }

        .charter-image-item .charter-image-placeholder {
            color: rgba(255, 255, 255, 0.2);
            font-size: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .charter-image-item .charter-image-placeholder span {
            font-size: 12px;
            font-family: 'B Yekan', sans-serif;
        }

        .charter-media-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 15px 0;
        }

        .charter-media-box {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.3s ease;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            border: 2px solid rgb(255 255 255 / 38%);
        }

        .charter-media-box:hover {
            border-color: rgba(0, 230, 179, 0.15);
            background: rgba(255, 255, 255, 0.06);
        }

        .charter-media-box .charter-media-label {
            color: rgba(255, 255, 255, 0.5);
            font-size: 13px;
            font-family: 'B Yekan', sans-serif;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .charter-media-box .charter-media-label i {
            color: #00e6b3;
        }

        .charter-media-box audio,
        .charter-media-box video {
            width: 100%;
            border-radius: 10px;
            outline: none;
            background: rgba(0, 0, 0, 0.3);
        }

        .charter-media-box video {
            aspect-ratio: 16/9;
            background: #000;
        }

        @media (max-width: 992px) {
            .charter-image-grid {
                grid-template-columns: 1fr 1fr;
            }
            .charter-sub-items {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .charter-page-header {
            /* text-align: center; */
            padding: 60px 0 30px;
        }
            .charter-page-body {
                padding: 80px 0 40px;
            }
            .charter-container {
                padding: 0 15px 40px;
            }
            .charter-content-card {
                padding: 25px 20px;
            }
            .charter-page-header h1 {
                font-size: 24px;
            }
            .charter-page-header .charter-icon-wrapper {
                width: 60px;
                height: 60px;
            }
            .charter-page-header .charter-icon-wrapper i {
                font-size: 26px;
            }
            .charter-image-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }
            .charter-media-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            .charter-sub-items {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .charter-section-title {
                font-size: 17px;
            }
            .charter-text-content {
                font-size: 14px;
            }
            .charter-header {
                padding: 5px 12px;
            }
            .charter-logo-img {
                height: 35px;
            }
            .charter-logo-text {
                font-size: 14px;
            }
            .charter-back-home {
                padding: 6px 14px;
                font-size: 12px;
            }
            .charter-back-home span {
                display: none;
            }
            .charter-page-body {
                padding-top: 68px;
            }
        }

        @media (max-width: 576px) {
            .charter-header {
                padding: 4px 10px;
            }
            .charter-logo-img {
                height: 28px;
            }
            .charter-logo-text {
                display: none;
            }
            .charter-back-home {
                padding: 5px 12px;
            }
            .charter-back-home i {
                font-size: 16px;
            }
            .charter-page-body {
                padding-top: 55px;
            }
            .charter-page-header h1 {
                font-size: 20px;
            }
            .charter-page-header p {
                font-size: 13px;
            }
            .charter-content-card {
                padding: 18px 14px;
                border-radius: 18px;
            }
            .charter-image-grid {
                grid-template-columns: 1fr;
            }
            .charter-section-title {
                font-size: 15px;
            }
            .charter-text-content {
                font-size: 13px;
            }
            .charter-text-content ul li {
                padding: 6px 12px;
                font-size: 13px;
            }
        }
         /* manshor-mosafer */




          /* ============================================================
   دکمه بازگشت
   ============================================================ */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'B Yekan', sans-serif;
    font-size: 14px;
    text-decoration: none;
    backdrop-filter: blur(10px);
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateX(3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.back-btn i {
    font-size: 16px;
    color: #4a9eff;
    transition: all 0.3s ease;
}

.back-btn:hover i {
    transform: translateX(-3px);
}

/* ============================================================
   ریسپانسیو هدر
   ============================================================ */
@media (max-width: 576px) {
    .back-btn span {
        display: none;
    }
    .back-btn {
        padding: 5px 12px;
    }
    .back-btn i {
        font-size: 18px;
    }
    .header-actions {
        gap: 6px;
    }
}

















/* bashgah-havadaran */
/* ============================================================
   رنگ کارت 11 - باشگاه هواداران
   ============================================================ */
.card-11 .card__face--front { 
    background: linear-gradient(145deg, #2aa347, #1E7E37) !important; 
}
.card-11 .card__face--back { 
    background: linear-gradient(145deg, #1e9147, #145c28) !important; 
}
.card-11 .glow { --glow-color: rgba(30, 126, 55, 0.4); }

.card-11 .card-btn:hover { 
    color: #1E7E37 !important;
    border-color: #1E7E37 !important;
    box-shadow: 0 8px 35px rgba(30, 126, 55, 0.4);
}



@font-face {
    font-family: 'B Yekan';
    src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot');
    src: url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.woff') format('woff'),
         url('https://cdn.fontcdn.ir/Font/Persian/B-Yekan/BYekan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

.fan-page-body {
    font-family: 'B Yekan', 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a2e14;
    min-height: 100vh;
    padding: 90px 0 80px;
    overflow-x: hidden;
    position: relative;
}

.fan-page-body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(30, 126, 55, 0.2), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(30, 126, 55, 0.15), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(30, 126, 55, 0.2), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(30, 126, 55, 0.15), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(30, 126, 55, 0.2), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(30, 126, 55, 0.15), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    animation: fan-twinkle 4s ease-in-out infinite alternate;
}

@keyframes fan-twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

.fan-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 60px;
    position: relative;
    z-index: 1;
}

.fan-page-header {
    text-align: center;
    padding: 40px 0 30px;
}

.fan-page-header .fan-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2aa347, #1E7E37);
    box-shadow: 0 0 40px rgba(30, 126, 55, 0.35), 0 8px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.fan-page-header .fan-icon-wrapper i {
    font-size: 35px;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.fan-page-header .fan-icon-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 0 60px rgba(30, 126, 55, 0.45), 0 8px 30px rgba(0, 0, 0, 0.3);
}

.fan-page-header h1 {
    color: #ffffff;
    font-size: 32px;
    font-weight: 800;
    font-family: 'B Yekan', sans-serif;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.fan-page-header h1 span {
    background: linear-gradient(135deg, #2aa347, #1E7E37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fan-page-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    font-family: 'B Yekan', sans-serif;
    margin-top: 5px;
}

.fan-content-card {
    background: rgba(30, 126, 55, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 35px 40px;
    margin-bottom: 30px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
}

.fan-content-card::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 26px;
    background: conic-gradient(
        from 0deg,
        rgba(30, 126, 55, 0.15),
        rgba(42, 163, 71, 0.4),
        rgba(30, 126, 55, 0.15),
        rgba(42, 163, 71, 0.4),
        rgba(30, 126, 55, 0.15)
    );
    z-index: -1;
    opacity: 0.5;
    animation: fan-border-spin 4s linear infinite;
}

@keyframes fan-border-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.fan-content-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 0 60px rgba(30, 126, 55, 0.08),
        0 0 100px rgba(30, 126, 55, 0.04),
        0 25px 70px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.fan-section-title {
    color: #3ecf6a;
    font-size: 20px;
    font-weight: 700;
    font-family: 'B Yekan', sans-serif;
    margin: 25px 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fan-section-title:first-of-type { margin-top: 0; }
.fan-section-title i { font-size: 22px; }

.fan-text-content {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 2;
    font-family: 'B Yekan', sans-serif;
    padding: 0 5px;
}

.fan-text-content ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.fan-text-content ul li {
    padding: 8px 15px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border-right: 3px solid rgba(30, 126, 55, 0.4);
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.85);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
}

.fan-text-content ul li:hover {
    background: rgba(255, 255, 255, 0.08);
    border-right-color: #3ecf6a;
    transform: translateX(-5px);
}

.fan-text-content ul li i {
    color: #3ecf6a;
    margin-left: 10px;
    width: 20px;
}

/* ===== کارت‌های مزایای عضویت ===== */
.fan-perk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin: 15px 0;
}

.fan-perk-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 18px;
    padding: 25px 20px;
    border: 2px solid rgb(255 255 255 / 38%);
    transition: all 0.4s ease;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.fan-perk-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(30, 126, 55, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.fan-perk-card .fan-perk-icon {
    width: 70px; height: 70px;
    border-radius: 20px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    background: linear-gradient(145deg, #2aa347, #1E7E37);
    box-shadow: 0 8px 25px rgba(30, 126, 55, 0.3);
    transition: all 0.3s ease;
}

.fan-perk-card:hover .fan-perk-icon {
    transform: scale(1.05) rotate(-5deg);
}

.fan-perk-card .fan-perk-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    font-family: 'B Yekan', sans-serif;
    margin-bottom: 6px;
}

.fan-perk-card .fan-perk-desc {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-family: 'B Yekan', sans-serif;
    line-height: 1.7;
}

/* ===== گالری تصاویر (جای عکس خالی) ===== */
.fan-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin: 15px 0;
}

.fan-image-item {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16/10;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 2px solid rgb(255 255 255 / 38%);
}

.fan-image-item:hover {
    transform: scale(1.03);
    border-color: rgba(30, 126, 55, 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.fan-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fan-image-item .fan-image-placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-size: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fan-image-item .fan-image-placeholder span {
    font-size: 12px;
    font-family: 'B Yekan', sans-serif;
}

/* ===== دکمه عضویت ===== */
.fan-btn-join {
    width: 100%;
    padding: 14px 30px;
    background: rgba(30, 126, 55, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(30, 126, 55, 0.4);
    color: #ffffff;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'B Yekan', sans-serif;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
}

.fan-btn-join::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(30, 126, 55, 0.25);
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
    opacity: 0;
}

.fan-btn-join:hover::before { width: 500px; height: 500px; opacity: 1; }

.fan-btn-join:hover {
    background: rgba(30, 126, 55, 0.3);
    transform: scale(1.02) translateY(-3px);
    border-color: rgba(30, 126, 55, 0.6);
    box-shadow: 0 8px 40px rgba(30, 126, 55, 0.2);
}

/* ============================================================
   ریسپانسیو
   ============================================================ */
@media (max-width: 992px) {
    .fan-perk-grid { grid-template-columns: 1fr 1fr; }
    .fan-image-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .fan-page-header { padding: 60px 0 30px; }
    .fan-page-body { padding: 80px 0 40px; }
    .fan-container { padding: 0 15px 40px; }
    .fan-content-card { padding: 25px 20px; }
    .fan-page-header h1 { font-size: 24px; }
    .fan-page-header .fan-icon-wrapper { width: 60px; height: 60px; }
    .fan-page-header .fan-icon-wrapper i { font-size: 26px; }
    .fan-perk-grid { grid-template-columns: 1fr; gap: 15px; }
    .fan-image-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .fan-section-title { font-size: 17px; }
    .fan-text-content { font-size: 14px; }
}

@media (max-width: 576px) {
    .fan-page-header h1 { font-size: 20px; }
    .fan-page-header p { font-size: 13px; }
    .fan-content-card { padding: 18px 14px; border-radius: 18px; }
    .fan-image-grid { grid-template-columns: 1fr; }
    .fan-section-title { font-size: 15px; }
    .fan-text-content { font-size: 13px; }
    .fan-text-content ul li { padding: 6px 12px; font-size: 13px; }
    .fan-perk-card .fan-perk-icon { width: 55px; height: 55px; font-size: 26px; }
}
/* bashgah-havadaran */

/* 
چدید برای 4 باکسی اضافه شد */
/* ================================================================
   چیدمان باکس‌های صفحه اصلی (index.html)
   ----------------------------------------------------------------
   همه‌ی قوانینی که تعداد باکس در هر ردیف و وسط‌چین بودنشان را
   کنترل می‌کنند، عمداً همین‌جا و پشت‌سرهم جمع شده‌اند تا با
   تنظیمات دیگر فایل تداخل/تکرار پیدا نکنند.

   وقتی بعداً باکس اضافه یا کم کردی، فقط کافیست مقدار
   flex / max-width را در هر سه بخش زیر هم‌زمان تغییر بدهی:

        تعداد باکس فعال   ->   عرض هر باکس (دسکتاپ)
        5 باکس            ->   20%
        4 باکس            ->   25%   (وضعیت فعلی)
        3 باکس            ->   33.333%
        2 باکس            ->   50%
   ================================================================ */

/* --- حالت دسکتاپ عمومی (992px به بالا) --- */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* --- حالت تبلت‌های بزرگ مثل iPad Air/Pro (1024px تا 1280px) --- */
@media (min-width: 1024px) and (max-width: 1280px) {
    .col-lg-2-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* --- حالت تبلت متوسط مثل iPad Mini (768px تا 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .col-lg-2-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* ================================================================
   وسط‌چین کردن ردیف کارت‌ها در صفحه اصلی
   ----------------------------------------------------------------
   چون تعداد باکس فعال کم شده (۴ باکس)، به‌جای اینکه ردیف تا
   انتهای عرض کانتینر کشیده شود، عرض ردیف را محدود و آن را
   وسط صفحه قرار می‌دهیم تا ظاهر جمع‌و‌جورتر و شیک‌تری داشته باشد.
   این بخش کاملاً مستقل است و با تنظیمات بالا تداخلی ندارد.
   ================================================================ */
.row.g-2 {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

/* در موبایل نیازی به محدودیت عرض نیست چون کارت‌ها 2 در هر ردیف‌اند */
@media (max-width: 768px) {
    .row.g-2 {
        max-width: 100%;
    }
}
/* @media (min-width: 992px) {
    .container {
        min-height: calc(100vh - 10rem);
        display: flex;
        align-items: center;
    }

    .container .row.g-2 {
        width: 100%;
    }
} */
 /* --- دسکتاپ: کارت‌ها وسط فضای زیر هدر --- */
@media (min-width: 992px) {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .container {
        margin-top: 0 !important;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container .row.g-2 {
        width: 100%;
    }
}

/* --- موبایل و تبلت: فاصله‌ی قبلی از هدر همیشه ثابت بماند --- */
@media (max-width: 991px) {
    .container {
        margin-top: 11rem !important;
    }
}
/* --- بازگرداندن اندازه‌ی دسکتاپ برای تبلت‌ها (768 تا 1024) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .card__face--front {
        flex-direction: column !important;
        padding: 18px 20px !important;
        align-items: center !important;
    }

    .profile-image {
        width: 120px !important;
        height: 120px !important;
        margin-top: 12px !important;
    }

    .profile-info {
        margin-top: 10px !important;
        text-align: center !important;
    }

    .profile-info h2 {
        font-size: 1.1em !important;
        margin-bottom: 3px !important;
    }

    .profile-info p {
        display: block !important;
        font-size: 0.7em !important;
    }

    .card-btn-wrapper {
        margin-top: auto !important;
        padding: 10px 0 5px !important;
        width: 100% !important;
    }

    .card-btn {
        font-size: 13px !important;
        padding: 8px 25px !important;
    }

    .scene {
        height: 330px !important;
        max-width: 100% !important;
    }
}

/* --- تبلت‌ها (768 تا 1199): فاصله‌ی بیشتر از بالا --- */
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        margin-top: 20rem !important;
    }
}

/* ============================================================
   کلاس کمکی برای wrapper محتوای اصلی
   ============================================================ */
.main-content-wrapper {
    display: block;
    width: 100%;
}

/* ============================================================
   تنظیمات دسکتاپ برای وسط‌چین کردن کارت‌ها
   ============================================================ */
@media (min-width: 992px) {
    .main-content-wrapper {
        display: flex;
        align-items: center;
        min-height: calc(100vh - 80px);
        padding: 20px 0;
    }
}
/* 
چدید برای 4 باکسی اضافه شد */