body {
            /* لون بني داكن فخم مأخوذ من البطاقة (يعطي هدوء وقراءة واضحة) */
            background-color: #2C140D;
            color: #FFFCFA;
            font-family: 'Tajawal', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* طبقة الصورة الخلفية العامة المدمجة في العمق */
        .global-bg-image {
            position: fixed;
            inset: 0;
            z-index: -1;
            background-image: url('background.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            opacity: 0.06;
            /* تقليل الشفافية لتلتحم مع الظلام وتعطي عمق */
            pointer-events: none;
            filter: brightness(0.4);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .font-heading {
            font-family: 'Amiri', serif;
        }

        .hero-text-shadow {
            text-shadow: 0 2px 4px rgba(255, 252, 250, 0.9), 0 4px 15px rgba(112, 44, 14, 0.2);
        }

        /* ستايل iOS 26 زجاجي نقي ثلاثي الأبعاد شفاف بالكامل بدون أي لون بني */
        .ios-glass {
            background: rgba(255, 255, 255, 0.02) !important;
            /* زجاج نقي شفاف */
            backdrop-filter: blur(45px) !important;
            /* ضبابية فخمة تمنع تداخل الكلمات */
            -webkit-backdrop-filter: blur(45px) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
            border-radius: 2rem;
        }

        /* تنسيق الهيدر الممتد (يكون شفافاً بالكامل في البداية لراحة العين) */
        .main-full-navbar {
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            border-bottom: 1px solid transparent !important;
            border-radius: 0px !important;
            box-shadow: none !important;
            transition: all 0.4s ease-in-out !important;
            /* أنميشن ناعم جداً عند ظهور الزجاج */
        }

        /* الحالة الزجاجية الكريستالية الفخمة لي تظهر عند التمرير لأسفل */
        .main-full-navbar.nav-scrolled {
            background: rgba(255, 255, 255, 0.02) !important;
            backdrop-filter: blur(45px) !important;
            -webkit-backdrop-filter: blur(45px) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
        }

        /* البطاقات الزجاجية */
        .glass-card-light {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(212, 175, 55, 0.2);
            box-shadow: 0 8px 30px rgba(112, 44, 14, 0.04);
            transition: all 0.3s ease;
        }

        .glass-card-light:hover {
            box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15);
            transform: translateY(-4px);
            border-color: rgba(212, 175, 55, 0.5);
        }

        .glass-card-dark {
            background: rgba(112, 44, 14, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(212, 175, 55, 0.3);
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
            transition: all 0.4s ease;
        }

        .glass-card-dark:hover {
            box-shadow: 0 15px 45px rgba(212, 175, 55, 0.2);
            transform: translateY(-6px);
            border-color: rgba(212, 175, 55, 0.8);
        }

        /* حركات الظهور */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .fade-in-up.appear {
            opacity: 1;
            transform: translateY(0);
        }

        .page-view {
            animation: fadeIn 0.4s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #FFFCFA;
        }

        ::-webkit-scrollbar-thumb {
            background: #D4AF37;
            border-radius: 4px;
        }

        .loader {
            border: 3px solid rgba(112, 44, 14, 0.2);
            border-top: 3px solid #FFFCFA;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            display: inline-block;
            vertical-align: middle;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .tooltip-text {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .group:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        .submitBtn {
            animation: zoom-pulse 2s infinite ease-in-out;
        }

        @keyframes zoom-pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.03);
            }

            100% {
                transform: scale(1);
            }
        }

        .submitBtn:hover {
            animation-play-state: paused;
            filter: brightness(1.1);
        }

        .faq-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
        }

        .faq-open .faq-body {
            max-height: 200px;
            padding-bottom: 1.5rem;
        }

        .faq-open .faq-icon {
            transform: rotate(180deg);
        }

        /* ═══════════ SWIPER 3D CARDS (iOS 26 Style) ═══════════ */
        .swiper {
            width: 100%;
            overflow: hidden;
            padding: 0 10px;
        }

        /* تعديل مقاسات البطاقات لتصبح طولية (9:16) */
        .swiper-slide {
            width: 280px !important;
            height: 498px !important;
            /* ارتفاع متناسق مع العرض لتشكيل 9:16 */
            transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s ease, filter 0.5s ease;
        }

        /* البطاقات المجاورة (ترجع للخلف مع تمويه) */
        .swiper-slide:not(.swiper-slide-active) {
            opacity: 0.4;
            filter: blur(5px);
            transform: scale(0.85);
        }

        /* البطاقة الوسطية النشطة (تبرز للأمام) */
        .swiper-slide-active {
            opacity: 1;
            filter: blur(0);
            transform: scale(1.1);
            z-index: 10;
        }

        /* تصميم زجاجي طولي مجهز لاستقبال الصور لاحقاً */
        .file-card {
            height: 100%;
            position: relative;
            /* ضروري لتموضع النصوص في الأسفل */
            overflow: hidden;
            /* لمنع خروج النصوص والصور عن الحواف الدائرية */
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 28px;
            padding: 0 !important;
            /* إزالة البادينغ لترتيب التذويب */
            text-align: center;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }

        /* تصميم نقاط التمرير التحتية بنظام زجاجي نقي وصغير (Minimalist iOS Style) */
        .swiper-pagination {
            position: relative !important;
            margin-top: 25px !important;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            /* مسافة مريحة بين النقاط */
            z-index: 20;
        }

        /* النقاط العادية (زجاجية شفافة وصغيرة جداً) */
        .swiper-pagination-bullet {
            background: rgba(255, 255, 255, 0.15) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            opacity: 1 !important;
            width: 7px !important;
            /* تصغير القطر الحجم */
            height: 7px !important;
            border-radius: 50% !important;
            margin: 0 !important;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
            box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05) !important;
        }

        /* النقطة النشطة (زجاج كريستالي أبيض ناصع ومتقدم ببروز خفيف بدون أي توهج) */
        .swiper-pagination-bullet-active {
            background: #FFFFFF !important;
            border: 1px solid rgba(255, 255, 255, 0.9) !important;
            opacity: 1 !important;
            transform: scale(1.35) !important;
            /* تكبير خفيف وأنيق لتمييزها */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
            /* ظل أسود خفيف للعمق فقط لإبرازها عن الخلفية */
        }

        /* ضبط ألوان العناوين والنصوص باللون الأبيض النقي بالكامل */
        #main-portal h1,
        #main-portal h2,
        #main-portal h3,
        .file-card h3 {
            color: #FFFCFA !important;
            text-shadow: none !important;
        }

        #main-portal h1 span {
            color: #FFFCFA !important;
            text-shadow: none !important;
        }

        #main-portal p,
        .file-card p {
            color: rgba(255, 252, 250, 0.8) !important;
            text-shadow: none !important;
        }

        .hero-text-shadow {
            text-shadow: none !important;
        }

        /* تأثير التحريك الفخم للأعلى عند التمرير (Slide Up) */
        .reveal-slide-up {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .reveal-slide-up.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* إطار العناوين الزجاجي ثلاثي الأبعاد مع حواف دائرية */
        .glass-heading-box {
            background: rgba(255, 255, 255, 0.03) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
            border-radius: 24px !important;
            padding: 14px 45px !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
        }

        /* تحويل نصوص وأيقونات القائمة المنسدلة الداخلية إلى الأبيض النقي */
        #mobileMenu button,
        #mobileMenu a,
        #mobileMenu span,
        #mobileMenu i {
            color: #FFFCFA !important;
        }

        /* حركة تلميح اهتزازية ذكية وآمنة للبطاقات (لا تتداخل مع محرك Swiper) */
        @keyframes swiperHintEffectSafe {

            0%,
            100% {
                transform: translateY(0) translateX(0);
            }

            30% {
                transform: translateY(0) translateX(35px);
            }

            70% {
                transform: translateY(0) translateX(-20px);
            }
        }

        /* التطبيق على الحاوية الخارجية مع تأخير ثانيتين (2s) بعد الوصول إليها */
        .reveal-slide-up.active.swiper {
            animation: swiperHintEffectSafe 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) 2s;
        }

        /* زيادة ضبابية وكثافة القائمة المنسدلة لحجب الكلمات الخلفية تماماً */
        #mobileMenu.ios-glass {
            background: rgba(44, 20, 13, 0.97) !important;
            /* زجاج داكن كثيف مدمج مع لون الموقع لحجب كامل */
            backdrop-filter: blur(65px) !important;
            /* ضبابية فائقة الكثافة تمنع قراءة أي نصوص خلفها */
            -webkit-backdrop-filter: blur(65px) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            box-shadow: 0 35px 70px rgba(0, 0, 0, 0.6) !important;
        }