/* --- الإعدادات العامة والمتغيرات --- */
:root {
    --bg-deep: #050505;
    --text-primary: #ffffff;
    --text-muted: #a0a0a0;

    /* ألوان النيون الخاصة بك */
    --neon-gold: #FFD700;
    --neon-blue: #00F0FF;
    --neon-green: #00FF9D;
    
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(20, 20, 20, 0.6);
}

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

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--bg-deep);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

/* خلفية شبكية خفيفة جداً تعطي طابع هندسي */
.grid-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(var(--glass-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--glass-border) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.05;
    z-index: -1;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
a { text-decoration: none; color: white; transition: 0.4s; }

/* --- النافبار العائم (Super Nav) --- */
.super-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    position: absolute;
    top: 0; left: 0; width: 100%;
    z-index: 100;
}

.logo-box {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    color: var(--neon-gold);
}

.menu { display: flex; gap: 40px; background: rgba(255,255,255,0.05); padding: 15px 40px; border-radius: 50px; backdrop-filter: blur(10px); border: 1px solid var(--glass-border); }
.menu a { font-weight: bold; opacity: 0.7; font-size: 0.95rem; }
.menu a:hover, .menu a.active { opacity: 1; color: var(--neon-blue); }

.btn-action {
    background: white; color: black; padding: 12px 30px; border-radius: 30px; font-weight: 900;
    display: flex; align-items: center; gap: 10px;
}
.btn-action:hover { background: var(--neon-green); transform: scale(1.05); }

/* --- الهيرو (Ultra Hero) --- */
.ultra-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}

/* تأثير التوهج في الخلفية */
.ultra-hero::before {
    content: ''; position: absolute; top: -20%; right: -10%;
    width: 600px; height: 600px; background: var(--neon-blue);
    filter: blur(200px); opacity: 0.2; border-radius: 50%;
}
.ultra-hero::after {
    content: ''; position: absolute; bottom: -20%; left: -10%;
    width: 600px; height: 600px; background: var(--neon-gold);
    filter: blur(200px); opacity: 0.15; border-radius: 50%;
}

.hero-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }

.status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 20px;
    background: rgba(0, 240, 255, 0.1); border: 1px solid var(--neon-blue);
    color: var(--neon-blue); font-size: 0.85rem; font-weight: bold; margin-bottom: 25px;
}

.hero-txt h1 { font-size: 4.5rem; line-height: 1.1; margin-bottom: 25px; font-weight: 900; }
.gradient-text {
    background: linear-gradient(to right, var(--neon-green), var(--neon-blue));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-txt p { color: var(--text-muted); font-size: 1.1rem; max-width: 500px; margin-bottom: 40px; }

.btn-group { display: flex; gap: 20px; }
.btn-glow {
    padding: 15px 40px; background: linear-gradient(90deg, var(--neon-gold), #ff8c00);
    border-radius: 12px; color: black; font-weight: 900;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}
.btn-glow:hover { transform: translateY(-5px); box-shadow: 0 0 50px rgba(255, 215, 0, 0.5); }
.btn-ghost { padding: 15px 40px; border: 1px solid var(--glass-border); border-radius: 12px; font-weight: bold; }
.btn-ghost:hover { background: white; color: black; }

/* الفن العائم في الهيرو */
.hero-art { position: relative; height: 500px; display: flex; align-items: center; justify-content: center; }
.art-card { position: absolute; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }

.main-img {
    width: 400px; height: 500px; z-index: 1;
    transform: perspective(1000px) rotateY(-10deg);
    border: 2px solid rgba(255,255,255,0.1);
}
.main-img img { width: 100%; height: 100%; object-fit: cover; }

.float-stat {
    bottom: 40px; right: 20px; z-index: 2;
    background: rgba(20, 20, 20, 0.8); backdrop-filter: blur(20px);
    padding: 20px 30px; border: 1px solid var(--neon-green);
    text-align: center;
    animation: float 6s infinite ease-in-out;
}
.float-stat h3 { font-size: 2.5rem; color: var(--neon-green); line-height: 1; }
.float-stat span { font-size: 0.9rem; color: white; }

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

/* --- قسم الخدمات: الأكورديون العملاق --- */
.services-accordion { padding: 100px 0; }
.section-head { text-align: center; margin-bottom: 60px; }
.section-head h2 { font-size: 3rem; }
.highlight { color: var(--neon-blue); font-style: italic; }

.accordion-wrapper {
    display: flex;
    height: 500px; /* ارتفاع ثابت */
    gap: 20px;
}

.accordion-item {
    flex: 1; /* الكل متساوي */
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    border: 1px solid var(--glass-border);
}

/* عند مرور الماوس، يتوسع العنصر */
.accordion-item:hover, .accordion-item.active { flex: 3; }

/* الخلفيات الملونة */
.blue-mode .acc-bg { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0, 240, 255, 0.2)); }
.gold-mode .acc-bg { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(255, 215, 0, 0.2)); }
.green-mode .acc-bg { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0, 255, 157, 0.2)); }

.acc-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.5; transition: 0.5s; }
.accordion-item:hover .acc-bg { opacity: 1; }

.acc-icon {
    font-size: 3rem; margin-bottom: auto; margin-top: 20px; transition: 0.4s;
}
.blue-mode .acc-icon { color: var(--neon-blue); }
.gold-mode .acc-icon { color: var(--neon-gold); }
.green-mode .acc-icon { color: var(--neon-green); }

.acc-content h3 { font-size: 2rem; margin-bottom: 15px; white-space: nowrap; }
.acc-content p { font-size: 1rem; color: #ccc; opacity: 0; transform: translateY(20px); transition: 0.4s; height: 0; overflow: hidden;}
.acc-link { display: inline-block; margin-top: 15px; font-weight: bold; text-decoration: underline; opacity: 0; }

/* إظهار النص عند التوسعة */
.accordion-item:hover .acc-content p, .accordion-item.active .acc-content p { opacity: 1; transform: translateY(0); height: auto; }
.accordion-item:hover .acc-link, .accordion-item.active .acc-link { opacity: 1; }

/* --- قسم القيم: الشبكة المتداخلة (Mosaic) --- */
.values-mosaic { padding: 50px 0 100px; }
.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 250px);
    gap: 20px;
}

.mosaic-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.3s;
}
.mosaic-box:hover { transform: scale(1.02); z-index: 2; border-color: white; }

/* توزيع الكروت */
.box-large { grid-column: span 2; grid-row: span 1; } /* كارت عريض */
.box-tall { grid-column: span 1; grid-row: span 2; } /* كارت طويل عمودياً */
.box-wide { grid-column: span 2; grid-row: span 1; } /* كارت عريض آخر */
.box-small { grid-column: span 1; grid-row: span 1; } /* مربع صغير */

/* ألوان زجاجية مختلفة */
.dark-glass { background: linear-gradient(45deg, rgba(255,255,255,0.05), rgba(0,0,0,0.5)); border-left: 4px solid var(--neon-blue); }
.gold-glass { background: rgba(255, 215, 0, 0.05); border-top: 4px solid var(--neon-gold); }
.green-glass { background: rgba(0, 255, 157, 0.05); border-right: 4px solid var(--neon-green); }
.blue-glass { background: rgba(0, 240, 255, 0.05); border-bottom: 4px solid var(--neon-blue); }

.big-icon { font-size: 2.5rem; margin-bottom: 20px; color: white; opacity: 0.8; }
.flex-center { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.icon-side { font-size: 4rem; opacity: 0.2; color: var(--neon-green); }

.mosaic-box h3 { font-size: 1.5rem; margin-bottom: 10px; }
.mosaic-box p { color: var(--text-muted); font-size: 0.9rem; }

/* --- الفوتر --- */
footer {
    position: relative; padding: 80px 0 40px; border-top: 1px solid var(--glass-border);
    background: #020202;
}

.footer-layout {
    display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 50px;
}

.footer-brand h2 { font-size: 3rem; color: var(--neon-gold); margin-bottom: 20px; }
.legals { max-width: 400px; color: #666; }

.footer-contact { display: flex; gap: 30px; }
.contact-card {
    background: #111; padding: 20px; border-radius: 15px; border: 1px solid #222;
    display: flex; align-items: center; gap: 15px; min-width: 200px;
    transition: 0.3s;
}
.contact-card:hover { border-color: var(--neon-blue); transform: translateY(-5px); }
.contact-card i { font-size: 1.5rem; color: var(--neon-blue); }
.contact-card span { display: block; font-size: 0.8rem; color: #888; }
.contact-card a { font-weight: bold; color: white; }

.copyright { text-align: center; margin-top: 60px; color: #444; font-size: 0.85rem; border-top: 1px solid #111; padding-top: 20px;}

/* --- الموبايل --- */
@media (max-width: 900px) {
    .menu { display: none; }
    .hero-layout { grid-template-columns: 1fr; text-align: center; }
    .hero-txt h1 { font-size: 2.8rem; }
    .btn-group { justify-content: center; }
    .hero-art { display: none; } /* إخفاء الصورة في الموبايل للتبسيط */
    
    .accordion-wrapper { flex-direction: column; height: auto; }
    .accordion-item { height: 150px; }
    .accordion-item.active { height: 250px; }
    
    .mosaic-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .box-large, .box-tall, .box-wide, .box-small { grid-column: span 1; grid-row: span 1; }
    
    .footer-layout { flex-direction: column; }
    .footer-contact { flex-direction: column; width: 100%; }
}
/* =========================================
   1. الهوية التعليمية الخلفية (جديد)
   ========================================= */
.edu-pattern-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2; pointer-events: none;
    /* شكل شبكة مربعات خفيفة (Graph Paper) */
    background-image: 
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-color: #050505; /* لون الخلفية الأساسي */
}

/* رموز عائمة في الخلفية */
.edu-pattern-bg::before, .edu-pattern-bg::after {
    position: absolute; font-family: serif; font-size: 8rem; opacity: 0.05;
    animation: floatMath 20s infinite linear;
}
.edu-pattern-bg::before { content: '∑'; top: 15%; left: 5%; color: var(--neon-blue); }
.edu-pattern-bg::after { content: 'π'; bottom: 10%; right: 5%; color: var(--neon-gold); }

@keyframes floatMath {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(10deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* =========================================
   2. الفواصل المموجة (جديد)
   ========================================= */
.wave-divider {
    position: relative; width: 100%; overflow: hidden; line-height: 0;
    transform: rotate(180deg); margin-top: -2px; z-index: 2;
}
.wave-divider svg { display: block; width: calc(100% + 1.3px); height: 80px; }
.wave-divider .shape-fill { fill: #050505; } /* نفس لون الخلفية للدمج */

.wave-bottom { transform: rotate(0deg); margin-bottom: -2px; }

/* =========================================
   3. تنسيق الأكورديون المحسن (لحل مشكلة النص)
   ========================================= */
.services-accordion {
    padding: 80px 0;
    background: #0a0a0a; /* لون أفتح قليلاً لإظهار الموجة */
}

.accordion-wrapper {
    display: flex; gap: 15px; width: 100%; height: 500px;
}

.accordion-item {
    flex: 1; /* الوضع الطبيعي */
    min-width: 120px; /* هذا يمنع الكلام من الاختفاء */
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 25px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.01);
}

/* عند التفعيل */
.accordion-item.active {
    flex: 4; /* يأخذ مساحة أكبر */
    background: rgba(20, 20, 20, 0.8);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.1);
}

/* تخصيص الألوان */
.blue-mode.active { border-top: 4px solid var(--neon-blue); }
.gold-mode.active { border-top: 4px solid var(--neon-gold); }
.green-mode.active { border-top: 4px solid var(--neon-green); }

/* تنسيق النصوص داخل الكرت */
.acc-content { position: relative; z-index: 2; width: 100%; }

.acc-content h3 {
    font-size: 1.5rem; font-weight: 900; margin-bottom: 10px;
    white-space: nowrap; /* يمنع نزول السطر */
    transition: 0.3s;
}

/* عندما يكون الكرت مغلق: صغر الخط قليلاً وأخفِ التفاصيل */
.accordion-item:not(.active) .acc-content h3 { 
    font-size: 1.1rem; opacity: 0.7; transform: translateY(0); 
}

.acc-content p {
    font-size: 0.95rem; color: #bbb; opacity: 0;
    max-height: 0; overflow: hidden; transition: 0.5s ease;
}

/* عند التفعيل: أظهر التفاصيل */
.accordion-item.active .acc-content p {
    opacity: 1; max-height: 200px; margin-top: 10px;
}
.acc-link { 
    display: inline-block; margin-top: 15px; font-weight: bold; font-size: 0.9rem;
    color: white; opacity: 0; transition: 0.3s;
}
.accordion-item.active .acc-link { opacity: 1; }

/* الأيقونة */
.acc-icon {
    font-size: 2.5rem; margin-bottom: auto; margin-top: 10px; transition: 0.5s;
}
.blue-mode .acc-icon { color: var(--neon-blue); }
.gold-mode .acc-icon { color: var(--neon-gold); }
.green-mode .acc-icon { color: var(--neon-green); }

/* حركة جمالية للأيقونة عند التفعيل */
.accordion-item.active .acc-icon {
    position: absolute; top: 20px; left: 20px;
    font-size: 5rem; opacity: 0.1; /* تصبح خلفية شفافة */
    transform: rotate(-10deg);
}
/* =========================================
   1. الخلفيات والهوية البصرية العامة
   ========================================= */
:root {
    /* ألوان البراند (أكثر نعومة) */
    --brand-blue: #2563eb;  /* أزرق ملكي */
    --brand-gold: #d97706;  /* ذهبي برونزي */
    --brand-green: #059669; /* أخضر زمردي */
    
    /* ألوان الإضاءة الخلفية */
    --glow-blue: rgba(37, 99, 235, 0.15);
    --glow-gold: rgba(217, 119, 6, 0.15);
    --glow-green: rgba(5, 150, 105, 0.15);
}

/* باترن هندسي خفيف جداً في خلفية الموقع */
.site-pattern {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -3;
    background-color: #050505;
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.03; /* خفيف جداً */
}

/* أيقونات عائمة في الهيرو */
.floating-icon {
    position: absolute; color: rgba(255,255,255,0.05); font-size: 6rem; z-index: 0;
    animation: floatIcon 8s infinite ease-in-out;
}
.icon-1 { top: 15%; left: 5%; color: var(--glow-blue); }
.icon-2 { bottom: 20%; right: 10%; color: var(--glow-gold); font-size: 4rem; animation-delay: 2s; }

@keyframes floatIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

/* النصوص الملونة */
.txt-gold { color: #fbbf24; }
.txt-blue { color: #60a5fa; }

/* =========================================
   2. تحسينات قسم الخدمات (الألوان والإضاءة)
   ========================================= */
.services-accordion {
    position: relative; padding: 100px 0;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
}

/* إضاءة خلفية ناعمة (Soft Glow Blobs) */
.soft-glow {
    position: absolute; width: 400px; height: 400px; border-radius: 50%;
    filter: blur(100px); opacity: 0.3; z-index: 0;
}
.blue-glow { top: 10%; left: -100px; background: var(--brand-blue); }
.gold-glow { bottom: 10%; right: -100px; background: var(--brand-gold); }

.accordion-wrapper { position: relative; z-index: 2; display: flex; gap: 15px; height: 500px; }

.accordion-item {
    flex: 1; min-width: 100px;
    position: relative; border-radius: 20px; overflow: hidden; cursor: pointer;
    transition: all 0.6s ease;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 25px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(5px);
}

/* --- تخصيص ألوان الكروت (تدرجات ناعمة) --- */
.blue-mode { border-top: 3px solid var(--brand-blue); }
.blue-mode.active { background: linear-gradient(160deg, rgba(37,99,235,0.1), rgba(0,0,0,0.8)); border-color: var(--brand-blue); }

.gold-mode { border-top: 3px solid var(--brand-gold); }
.gold-mode.active { background: linear-gradient(160deg, rgba(217,119,6,0.1), rgba(0,0,0,0.8)); border-color: var(--brand-gold); }

.green-mode { border-top: 3px solid var(--brand-green); }
.green-mode.active { background: linear-gradient(160deg, rgba(5,150,105,0.1), rgba(0,0,0,0.8)); border-color: var(--brand-green); }

/* الأيقونة الخلفية (Watermark) */
.watermark-icon {
    position: absolute; top: 20px; left: 20px;
    font-size: 8rem; color: white; opacity: 0.03;
    transition: 0.5s; z-index: 0;
}
.accordion-item.active .watermark-icon {
    opacity: 0.1; transform: rotate(-15deg) scale(1.2);
}

/* المحتوى */
.acc-content h3 { font-size: 1.4rem; white-space: nowrap; margin-bottom: 5px; font-weight: 800; z-index: 2; }
.acc-content p { font-size: 0.9rem; color: #ccc; opacity: 0; max-height: 0; transition: 0.5s; z-index: 2; }
.accordion-item.active .acc-content p { opacity: 1; max-height: 150px; margin-top: 10px; }
.acc-link { font-size: 0.8rem; font-weight: bold; color: white; margin-top: 15px; display: inline-block; opacity: 0; }
.accordion-item.active .acc-link { opacity: 1; }

.acc-icon { font-size: 2.5rem; margin-bottom: auto; margin-top: 10px; z-index: 2; transition: 0.4s; }
.blue-mode .acc-icon { color: var(--brand-blue); }
.gold-mode .acc-icon { color: var(--brand-gold); }
.green-mode .acc-icon { color: var(--brand-green); }

/* =========================================
   3. تحسينات قسم القيم (الموزاييك الملون)
   ========================================= */
.values-mosaic { padding: 80px 0; background-color: #050505; }

.mosaic-box {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 30px; border-radius: 15px;
    transition: 0.4s;
}
.mosaic-box:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.15); }

/* التيمات اللونية للكروت */
.theme-blue { box-shadow: 0 10px 30px -10px var(--glow-blue); }
.theme-blue i.big-icon { color: var(--brand-blue); }
.theme-blue .corner-decoration { background: var(--brand-blue); }

.theme-gold { box-shadow: 0 10px 30px -10px var(--glow-gold); }
.theme-gold i.big-icon { color: var(--brand-gold); }
.theme-gold .corner-decoration { background: var(--brand-gold); }

.theme-green { box-shadow: 0 10px 30px -10px var(--glow-green); }
.theme-green .icon-side { color: var(--brand-green); }
.theme-green .corner-decoration { background: var(--brand-green); }

/* زخرفة الزاوية */
.corner-decoration {
    position: absolute; top: 0; right: 0; width: 60px; height: 60px;
    opacity: 0.1;
    clip-path: polygon(0 0, 100% 0, 100% 100%); /* مثلث في الزاوية */
}

/* رموز خلفية داخل الكروت */
.bg-symbol {
    position: absolute; bottom: -10px; left: -10px;
    font-size: 5rem; opacity: 0.05; transform: rotate(15deg);
    color: white;
}
.theme-blue .bg-symbol { color: var(--brand-blue); }
.theme-gold .bg-symbol { color: var(--brand-gold); }

/* =========================================
   4. الفواصل الموجية (كما هي)
   ========================================= */
.wave-divider {
    position: relative; width: 100%; height: 60px; overflow: hidden;
    margin-top: -2px; z-index: 5;
}
.wave-divider svg { fill: #0a0a0a; width: 100%; height: 100%; transform: rotate(180deg); }
.wave-bottom svg { transform: rotate(0deg); fill: #050505; }
/* =========================================
   تعديل قسم القيم (إعادة الحيوية والألوان)
   ========================================= */

.values-mosaic { 
    padding: 80px 0; 
    /* خلفية القسم نفسه تبقى داكنة لضمان التباين */
    background-color: #050505; 
}

.mosaic-box {
    position: relative; 
    overflow: hidden;
    /* الخلفية الأساسية ليست شفافة بالكامل، بل داكنة مع شفافية */
    background: rgba(20, 20, 25, 0.7);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 30px; 
    border-radius: 20px;
    transition: all 0.4s ease;
    /* ظل خفيف يعطي عمقاً */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.mosaic-box:hover { 
    transform: translateY(-5px); 
}

/* --- تلوين الكروت (السر هنا: تدرج لوني خفيف داخل الكرت) --- */

/* 1. الكرت الأزرق (رؤيتنا) */
.theme-blue {
    /* تدرج من أزرق شفاف في الزاوية إلى أسود */
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(10, 15, 30, 0.9) 100%);
    /* لون الحدود أوضح */
    border-color: rgba(37, 99, 235, 0.4);
}
.theme-blue:hover {
    /* عند الهوفر يزيد التشبع قليلاً */
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.25) 0%, rgba(10, 15, 30, 0.9) 100%);
    border-color: var(--brand-blue);
    box-shadow: 0 10px 40px -5px rgba(37, 99, 235, 0.2);
}
.theme-blue i.big-icon { color: var(--brand-blue); text-shadow: 0 0 15px rgba(37, 99, 235, 0.4); }
.theme-blue .corner-decoration { background: var(--brand-blue); opacity: 0.4; }


/* 2. الكرت الذهبي/البني (رسالتنا) */
.theme-gold {
    /* تدرج ذهبي خفيف */
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.15) 0%, rgba(30, 20, 10, 0.9) 100%);
    border-color: rgba(217, 119, 6, 0.4);
}
.theme-gold:hover {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.25) 0%, rgba(30, 20, 10, 0.9) 100%);
    border-color: var(--brand-gold);
    box-shadow: 0 10px 40px -5px rgba(217, 119, 6, 0.2);
}
.theme-gold i.big-icon { color: var(--brand-gold); text-shadow: 0 0 15px rgba(217, 119, 6, 0.4); }
.theme-gold .corner-decoration { background: var(--brand-gold); opacity: 0.4; }


/* 3. الكرت الأخضر (شركاؤنا) */
.theme-green {
    /* تدرج أخضر خفيف */
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(5, 20, 15, 0.9) 100%);
    border-color: rgba(5, 150, 105, 0.4);
}
.theme-green:hover {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.25) 0%, rgba(5, 20, 15, 0.9) 100%);
    border-color: var(--brand-green);
    box-shadow: 0 10px 40px -5px rgba(5, 150, 105, 0.2);
}
.theme-green .icon-side { color: var(--brand-green); opacity: 0.5; }
.theme-green .corner-decoration { background: var(--brand-green); opacity: 0.4; }


/* 4. الكرت السماوي (قيمنا) */
.theme-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(10, 25, 30, 0.9) 100%);
    border-color: rgba(6, 182, 212, 0.4);
}
.theme-cyan:hover {
    border-color: #06b6d4;
    box-shadow: 0 10px 40px -5px rgba(6, 182, 212, 0.2);
}
.theme-cyan i { color: #06b6d4; }


/* --- تحسين النصوص والرموز الخلفية --- */
.mosaic-box h3 {
    font-size: 1.6rem; 
    margin-bottom: 10px; 
    color: #fff; /* أبيض ناصع للتباين */
}

.mosaic-box p {
    color: #cbd5e1; /* رمادي فاتح جداً للقراءة */
    font-size: 0.95rem;
    line-height: 1.6;
}

/* الرمز الخلفي المائي (زيادة وضوحه قليلاً) */
.bg-symbol {
    position: absolute; bottom: -10px; left: -10px;
    font-size: 6rem; 
    opacity: 0.1; /* رفعناها من 0.05 لـ 0.1 لتكون ظاهرة */
    transform: rotate(15deg);
    color: white;
    transition: 0.4s;
}
.mosaic-box:hover .bg-symbol {
    opacity: 0.2; /* تزيد عند الهوفر */
    transform: rotate(0deg) scale(1.1);
}

/* أيقونات كبيرة رئيسية */
.big-icon {
    font-size: 2.8rem;
    margin-bottom: 15px;
    display: block;
}

/* زخرفة الزاوية (المثلث) */
.corner-decoration {
    position: absolute; top: 0; right: 0; width: 70px; height: 70px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    transition: 0.3s;
}
/* =========================================
   تعديلات الاستجابة (Mobile Responsiveness)
   ========================================= */

/* إخفاء عناصر الموبايل في الشاشات الكبيرة */
.menu-btn, .mobile-only {
    display: none;
}

/* --- إعدادات الموبايل (للشاشات أقل من 991px) --- */
@media (max-width: 991px) {
    
    /* 1. الناف بار (القائمة) */
    .super-nav {
        padding: 15px 20px;
        background: rgba(5, 5, 5, 0.95); /* خلفية داكنة للناف بار */
    }

    .desktop-only { display: none; } /* إخفاء زر الدخول الكبير */
    .menu-btn { display: block; font-size: 1.8rem; cursor: pointer; color: white; }
    .mobile-only { display: block; margin-top: 15px; }
    .btn-action-mobile {
        display: block; text-align: center;
        background: var(--brand-blue); color: white;
        padding: 10px; border-radius: 10px; font-weight: bold;
    }

    /* القائمة المنسدلة */
    .menu {
        position: absolute;
        top: 100%; left: 0; width: 100%;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 20px;
        gap: 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        
        /* إخفاء القائمة افتراضياً */
        display: none;
        animation: slideDown 0.3s ease forwards;
    }

    .menu.active { display: flex; } /* إظهار القائمة عند الضغط */

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* 2. الهيرو سكشن */
    .hero-layout {
        grid-template-columns: 1fr; /* عمود واحد */
        text-align: center;
        padding-top: 40px;
    }

    .hero-txt h1 { font-size: 2.5rem; }
    .hero-txt p { margin: 0 auto 30px; font-size: 1rem; }
    .btn-group { justify-content: center; }
    
    .hero-art { 
        display: none; /* إخفاء الصورة المعقدة في الموبايل لتبسيط التصميم */
    }
    
    /* إذا أردت إظهار الصورة، استخدم الكود التالي بدلاً من display: none */
    /* .hero-art { height: 300px; margin-top: 30px; }
       .main-img { width: 80%; height: 100%; position: relative; transform: none; } */


    /* 3. قسم الخدمات (الأكورديون) */
    .accordion-wrapper {
        flex-direction: column; /* ترتيب عمودي */
        height: auto; /* ارتفاع تلقائي */
    }

    .accordion-item {
        width: 100%;
        height: 100px; /* ارتفاع صغير للكروت المغلقة */
        min-height: 100px;
    }

    .accordion-item.active {
        flex: none; /* إلغاء التمدد المرن */
        height: auto; /* ارتفاع حسب المحتوى */
        min-height: 250px;
    }

    .acc-icon { font-size: 2rem; }
    .accordion-item.active .acc-icon { display: none; } /* إخفاء الأيقونة الكبيرة عند الفتح لتوفير مساحة */

    /* 4. قسم القيم (Grid) */
    .mosaic-grid {
        display: flex;
        flex-direction: column; /* ترتيب الكروت تحت بعض */
        gap: 20px;
    }
    
    /* إلغاء التمدد الشبكي */
    .box-large, .box-tall, .box-wide, .box-small {
        grid-column: auto;
        grid-row: auto;
        height: auto;
        min-height: 200px;
    }

    .flex-center { flex-direction: column; text-align: center; gap: 20px; }


    /* 5. الفوتر */
    .footer-layout {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .footer-contact {
        flex-direction: column;
        width: 100%;
    }
    
    .contact-card { width: 100%; justify-content: center; }
}
/* =========================================
   تعديل حجم خط الخدمات (Services Text Fix)
   ========================================= */

.acc-content h3 {
    /* تصغير الخط في الوضع المغلق */
    font-size: 1.1rem !important; 
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 5px;
    
    /* السماح للنص بالنزول لسطر ثاني بشكل مرتب */
    white-space: normal; 
    text-align: right;
    
    color: #fff;
    transition: 0.3s ease;
}

/* عند تفعيل الكرت (Active)، نكبر الخط */
.accordion-item.active .acc-content h3 {
    font-size: 1.8rem !important;
    margin-bottom: 15px;
    color: white;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* تحسين شكل الأيقونة الكبيرة في الخلفية */
.watermark-icon {
    font-size: 6rem; /* تصغيرها قليلاً لكي لا تغطي على النص */
    opacity: 0.03;
    top: 10px; left: 10px;
}
/* =========================================
   تصميم الفوتر الفخم (New Footer Design)
   ========================================= */

footer {
    position: relative;
    background-color: #020202; /* أسود عميق */
    padding: 80px 0 30px;
    margin-top: 50px;
    overflow: hidden;
    /* حد علوي متدرج بألوان الهوية */
    border-top: 3px solid transparent;
    border-image: linear-gradient(to right, var(--brand-blue), var(--brand-gold), var(--brand-green)) 1;
}

/* إضافة إضاءة خفيفة خلف الفوتر */
footer::before {
    content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
    width: 60%; height: 100px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}

.footer-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* تقسيم المساحة: قسم للهوية وقسم للتواصل */
    gap: 60px;
    align-items: start;
}

/* --- قسم الهوية (اليمين) --- */
.footer-brand h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 20px;
    display: inline-block;
    position: relative;
}

/* خط صغير تحت كلمة خطة */
.footer-brand h2::after {
    content: ''; position: absolute; bottom: -5px; right: 0;
    width: 40px; height: 3px; background: var(--brand-gold);
    border-radius: 2px;
}

.legals {
    color: #94a3b8; /* رمادي هادئ للقراءة */
    font-size: 0.95rem;
    line-height: 1.8;
    background: rgba(255,255,255,0.03); /* خلفية خفيفة جداً للنص */
    padding: 20px;
    border-radius: 15px;
    border-right: 3px solid var(--brand-blue); /* خط جمالي على اليمين */
}

/* --- قسم التواصل (اليسار) --- */
.footer-contact h3 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 25px;
    opacity: 0.9;
}

.footer-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* شبكة مرنة للكروت */
    gap: 15px;
}

/* كروت التواصل */
.contact-card {
    background: rgba(20, 20, 20, 1);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-gold);
    background: rgba(255, 255, 255, 0.05);
}

.contact-card i {
    font-size: 1.5rem;
    color: var(--brand-gold); /* لون الأيقونات ذهبي */
    transition: 0.3s;
}

.contact-card:hover i {
    color: white;
    text-shadow: 0 0 10px var(--brand-gold);
}

.contact-card div {
    display: flex;
    flex-direction: column;
}

.contact-card span {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 2px;
}

.contact-card a {
    color: #eee;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: sans-serif; /* للأرقام الإنجليزية */
}

/* --- الحقوق --- */
.copyright {
    text-align: center;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    color: #555;
    font-size: 0.85rem;
}

/* --- استجابة الفوتر للموبايل --- */
@media (max-width: 768px) {
    .footer-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-brand h2 { font-size: 2rem; }
    
    .footer-contact {
        grid-template-columns: 1fr; /* الكروت تحت بعض في الموبايل */
    }
}
/* =========================================
   1. تعديل اللوجو (صورة)
   ========================================= */
.logo-img {
    height: 50px; /* تحكم في حجم اللوجو */
    width: auto;
    object-fit: contain;
}

/* =========================================
   2. ستايل البانر المتحرك (Slider) - بديل الهيرو
   ========================================= */
.hero-slider {
    position: relative;
    width: 100%;
    height: 90vh; /* ارتفاع ملء الشاشة تقريباً */
    overflow: hidden;
    background: #000;
}

.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
}

.slide.active { opacity: 1; z-index: 1; }

.slide-content {
    position: relative; z-index: 2; text-align: center;
    max-width: 800px; padding: 20px;
}

.slide-badge {
    background: var(--brand-gold); color: black; padding: 5px 15px;
    border-radius: 20px; font-weight: bold; display: inline-block; margin-bottom: 20px;
}
.slide-badge.blue { background: var(--brand-blue); color: white; }

.slide h1 {
    font-size: 4rem; margin-bottom: 20px; line-height: 1.2;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.slide p {
    font-size: 1.2rem; color: #eee; margin-bottom: 30px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

/* أزرار التحكم بالسلايدر */
.slider-controls {
    position: absolute; bottom: 30px; right: 50px; z-index: 10;
    display: flex; gap: 10px;
}
.control-btn {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    color: white; cursor: pointer; transition: 0.3s;
}
.control-btn:hover { background: var(--brand-gold); color: black; }

/* تجاوب السلايدر للموبايل */
@media (max-width: 768px) {
    .hero-slider { height: 70vh; }
    .slide h1 { font-size: 2.5rem; }
    .slider-controls { right: 50%; transform: translateX(50%); bottom: 20px; }
}

/* =========================================
   3. تعديلات الكروت (حل مشكلة التعليق + الجملة الجديدة)
   ========================================= */

/* الجملة الفرعية الجديدة تحت العنوان */
.acc-subtitle {
    display: block;
    font-size: 0.85rem;
    color: var(--brand-gold); /* لون مميز للجملة */
    margin-bottom: 10px;
    font-weight: normal;
    white-space: nowrap; /* سطر واحد */
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

/* تعديل الوصف الطويل (يختفي تماماً عند الغلق) */
.acc-desc {
    font-size: 0.95rem; color: #ccc;
    opacity: 0; max-height: 0; margin: 0;
    overflow: hidden; transition: 0.4s ease;
}

/* عند التفعيل */
.accordion-item.active .acc-desc {
    opacity: 1; max-height: 200px; margin-top: 10px;
}

/* ثبات الكروت (منع التعليق) */
.accordion-item {
    /* أزلنا Hover من CSS ونعتمد على كلاس active من الجافاسكربت */
    flex: 1;
    min-width: 120px; /* عرض أدنى ثابت */
    transition: flex 0.5s ease-out; /* حركة ناعمة للتمدد */
}

.accordion-item.active {
    flex: 3.5; /* التمدد عند التفعيل */
}
/* =========================================
   تعديلات اللوجو (الهيدر والفوتر)
   ========================================= */

/* 1. تكبير لوجو الهيدر (الناف بار) */
.logo-img {
    height: 90px; /* كبرناه من 50px لـ 90px ليكون واضح جداً */
    width: auto;  /* العرض يتظبط تلقائي عشان الصورة متمطش */
    object-fit: contain; /* ضمان ظهور اللوجو كاملاً */
    display: block;
    transition: transform 0.3s;
}

.logo-img:hover {
    transform: scale(1.05); /* تكبير بسيط عند مرور الماوس */
}

/* تعديل الناف بار ليستوعب اللوجو الكبير */
.super-nav {
    padding: 10px 40px; /* تقليل الحواف قليلاً */
    height: auto;
    min-height: 100px; /* ضمان ارتفاع مناسب للوجو */
}

/* 2. تنسيق لوجو الفوتر الجديد */
.footer-logo-img {
    height: 110px; /* حجم كبير وفخم للفوتر */
    width: auto;
    display: block;
    margin-bottom: 25px; /* مسافة بين اللوجو والنص تحته */
    object-fit: contain;
}

/* في حالة الموبايل، نصغر اللوجو قليلاً ليتناسب مع الشاشة */
@media (max-width: 768px) {
    .logo-img {
        height: 60px; /* حجم مناسب للموبايل */
    }
    
    .footer-logo-img {
        height: 90px;
        margin: 0 auto 20px auto; /* توسيط اللوجو في الفوتر للموبايل */
    }
}
/* =========================================
   1. تكبير وتنسيق اللوجو العلوي (الناف بار)
   ========================================= */

/* تكبير الصورة نفسها */
.logo-img {
    height: 90px;      /* كبرنا الارتفاع ليكون واضحاً */
    width: auto;       /* العرض يتناسب تلقائياً */
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

/* تأثير بسيط عند مرور الماوس */
.logo-img:hover {
    transform: scale(1.05);
}

/* ضبط ارتفاع الناف بار ليستوعب اللوجو الكبير */
.super-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;  /* تقليل الحواف العلوية والسفلية */
    min-height: 110px;   /* ضمان أن البار عريض بما يكفي */
}

/* =========================================
   2. تنسيق الفوتر (تظبيط الصورة والنصوص)
   ========================================= */

/* تنسيق صورة اللوجو في الفوتر */
.footer-logo-img {
    height: 130px;       /* حجم كبير وفخم للوجو في الأسفل */
    width: auto;
    display: block;
    margin-bottom: 25px; /* مسافة بين اللوجو والنص تحته */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); /* ظل خفيف للوجو */
}

/* تنسيق النص القانوني تحت اللوجو */
.legals {
    color: #a0a0a0;
    font-size: 0.9rem;
    line-height: 1.8;
    background: rgba(255, 255, 255, 0.05); /* خلفية شفافة خفيفة للنص */
    padding: 20px;
    border-radius: 12px;
    border-right: 4px solid #d97706; /* خط ذهبي جمالي على اليمين */
    max-width: 400px; /* لعدم تمدد النص بشكل مبالغ فيه */
}

/* =========================================
   3. ضبط الأحجام للموبايل (مهم جداً)
   ========================================= */
@media (max-width: 768px) {
    /* تصغير اللوجو قليلاً في الموبايل عشان الشاشة */
    .logo-img {
        height: 60px; 
    }
    
    .super-nav {
        min-height: 80px;
        padding: 10px 20px;
    }

    /* توسيط لوجو الفوتر في الموبايل */
    .footer-logo-img {
        height: 100px;
        margin: 0 auto 20px auto;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
/* =========================================
   1. شاشة الترحيب (Intro Loader - Curtain)
   ========================================= */
.intro-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #000;
    z-index: 9999; /* فوق كل شيء */
    display: flex; align-items: center; justify-content: center;
    transition: opacity 1s ease-in-out;
}

.intro-content { text-align: center; }

/* اللوجو في الستارة */
.intro-logo {
    height: 100px;
    width: auto;
    filter: invert(1) brightness(1.5);
    opacity: 0;
    animation: fadeIn 1s ease forwards 0.5s; /* يظهر بعد نصف ثانية */
}

/* العنوان (موقع راكان) */
.intro-title {
    font-size: 3rem; color: #fff; margin: 20px 0 10px;
    opacity: 0;
    animation: fadeIn 1s ease forwards 1.5s; /* يظهر بعد 1.5 ثانية */
}

/* الوصف (للاستشارات...) */
.intro-subtitle {
    font-size: 1.2rem; color: #d97706; /* لون ذهبي */
    opacity: 0;
    animation: fadeIn 1s ease forwards 2.5s; /* يظهر بعد 2.5 ثانية */
}

/* أنيميشن الظهور */
@keyframes fadeIn {
    to { opacity: 1; transform: translateY(0); }
    from { opacity: 0; transform: translateY(20px); }
}

/* كلاس الاختفاء للستارة بالكامل */
.intro-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}


/* =========================================
   2. قسم نبذة عنا (Bio Section)
   ========================================= */
.bio-section {
    padding: 60px 0;
    background-color: #050505;
    text-align: center;
}

.bio-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

/* أيقونة جمالية أعلى الكرت */
.bio-icon {
    font-size: 3rem; color: var(--brand-gold);
    margin-bottom: 20px;
}

.bio-card h2 {
    font-size: 2.5rem; color: #fff; margin-bottom: 10px;
}

.bio-card h3 {
    font-size: 1.3rem; color: #ccc; font-weight: 400; margin-bottom: 30px;
}

/* بادجات التراخيص والخبرة */
.bio-badges {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;
}

.badge-item {
    background: rgba(37, 99, 235, 0.1);
    color: #60a5fa; /* لون أزرق فاتح */
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: bold;
    border: 1px solid rgba(37, 99, 235, 0.3);
    display: flex; align-items: center; gap: 8px;
}

.badge-item i { color: var(--brand-gold); }

/* تجاوب للموبايل */
@media (max-width: 768px) {
    .intro-title { font-size: 2rem; }
    .bio-card { padding: 20px; }
    .bio-card h2 { font-size: 2rem; }
    .bio-badges { flex-direction: column; }
}
/* =========================================
   1. تعديلات الستارة (Intro) الجديدة
   ========================================= */
.intro-text-group {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.intro-line-1 {
    font-size: 1.5rem; color: #fff; letter-spacing: 1px;
    opacity: 0; animation: fadeInUp 0.8s ease forwards 2s;
}

.intro-divider {
    width: 50px; height: 2px; background: #d97706; /* خط ذهبي فاصل */
    opacity: 0; animation: expandWidth 0.8s ease forwards 2.5s;
}

.intro-line-2 {
    font-size: 1.8rem; color: #d97706; font-weight: bold; /* تمييز الاستشارات الإدارية */
    opacity: 0; animation: fadeInUp 0.8s ease forwards 3s;
}

@keyframes expandWidth { from { width: 0; opacity: 0; } to { width: 100px; opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


/* =========================================
   2. تصميم قسم راكان الجديد (Royal Style)
   ========================================= */
.bio-section {
    padding: 80px 0;
    background: #020202;
    position: relative;
    overflow: hidden;
}

/* الكارت الفخم */
.bio-card-premium {
    position: relative;
    background: linear-gradient(145deg, #111, #050505);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    padding: 60px 40px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    overflow: hidden;
}

/* إطار ذهبي ناعم حول الكارت */
.bio-card-premium::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px;
    background: linear-gradient(90deg, transparent, #d97706, transparent);
}

/* توهج خلفي */
.card-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* الهيدر والأيقونة */
.icon-crown {
    font-size: 3.5rem; 
    background: linear-gradient(to bottom, #ffd700, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(217, 119, 6, 0.3));
}

.bio-header h2 {
    font-size: 3rem; color: #fff; margin-bottom: 5px; font-weight: 900;
}

.bio-subtitle {
    font-size: 1.1rem; color: #888; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 40px;
}

/* الوصف الرئيسي */
.main-desc {
    font-size: 1.6rem; color: #e5e5e5; margin-bottom: 50px;
    line-height: 1.6; font-weight: 300;
}

/* شبكة البادجات */
.bio-badges-grid {
    display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
}

.premium-badge {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 30px;
    border-radius: 15px;
    display: flex; align-items: center; gap: 20px;
    transition: 0.4s;
    min-width: 280px;
    text-align: right;
}

.premium-badge:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
}

.premium-badge i { font-size: 2.5rem; }

/* ستايل بادج الذهب (الترخيص) */
.premium-badge.gold { border-right: 4px solid #d97706; }
.premium-badge.gold i { color: #d97706; }

/* ستايل بادج الأزرق (الخبرة) */
.premium-badge.blue { border-right: 4px solid #2563eb; }
.premium-badge.blue i { color: #2563eb; }

.premium-badge span {
    font-size: 1.1rem; color: #fff; font-weight: bold; line-height: 1.4;
}
.premium-badge small {
    display: block; font-size: 0.85rem; color: #aaa; font-weight: normal;
}

/* موبايل */
@media (max-width: 768px) {
    .intro-line-1 { font-size: 1.2rem; }
    .intro-line-2 { font-size: 1.5rem; }
    
    .bio-card-premium { padding: 40px 20px; }
    .bio-header h2 { font-size: 2.2rem; }
    .main-desc { font-size: 1.2rem; }
    .bio-badges-grid { flex-direction: column; }
    .premium-badge { width: 100%; justify-content: flex-start; }
}
/* =========================================
   تعديل البانر ليملأ الشاشة بالكامل (Full Screen)
   ========================================= */

.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh; /* التغيير هنا: 100vh تعني ارتفاع الشاشة بالكامل 100% */
    overflow: hidden;
    background: #000;
    margin: 0;      /* ضمان عدم وجود هوامش */
    padding: 0;
}

/* تأكد أيضاً من إزالة أي هوامش للصفحة نفسها */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
/* =========================================
   تنسيقات صفحة الدخول والتسجيل (Auth Page)
   ========================================= */

.auth-body {
    background: #050505;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Tajawal', sans-serif;
    overflow: hidden;
}

.auth-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    position: relative;
}

/* زر العودة */
.back-home {
    position: absolute; top: -50px; right: 0;
    color: #fff; text-decoration: none; font-size: 0.9rem;
    transition: 0.3s;
}
.back-home:hover { color: #d97706; }

/* اللوجو */
.auth-logo { text-align: center; margin-bottom: 20px; }
.auth-logo img { 
    height: 80px; 
    filter: invert(1) brightness(1.5); 
}

/* الصندوق الرئيسي */
.form-box {
    width: 100%;
    height: 480px; /* ارتفاع الصندوق */
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 5px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* أزرار التبديل العلوية */
.button-box {
    width: 220px;
    margin: 20px auto;
    position: relative;
    box-shadow: 0 0 20px 9px rgba(0,0,0,0.1);
    border-radius: 30px;
    background: rgba(0,0,0,0.5);
    display: flex;
}

.toggle-btn {
    padding: 10px 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
    color: #fff;
    flex: 1;
    font-family: 'Tajawal', sans-serif;
    font-weight: bold;
}

#btn-highlight {
    top: 0; right: 0;
    position: absolute;
    width: 110px;
    height: 100%;
    background: linear-gradient(to right, #d97706, #fbbf24);
    border-radius: 30px;
    transition: .5s;
    z-index: 0;
}

/* الفورم */
.input-group {
    top: 100px;
    position: absolute;
    width: 280px;
    transition: .5s;
    right: 50px; /* مكان الظهور */
}

/* فورم التسجيل مخفي مبدئياً */
#register-form { right: 450px; }

.form-title {
    color: #fff; text-align: center; margin-bottom: 20px; font-size: 1.5rem;
}

.input-field {
    width: 100%;
    padding: 10px 0;
    margin: 5px 0;
    border-bottom: 1px solid #999;
    display: flex;
    align-items: center;
}

.input-field i { color: #d97706; margin-left: 10px; font-size: 1.1rem; }

.input-field input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Tajawal', sans-serif;
}

.submit-btn {
    width: 85%;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: 30px auto;
    background: linear-gradient(to right, #2563eb, #60a5fa);
    border: 0;
    outline: none;
    border-radius: 30px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
    font-family: 'Tajawal', sans-serif;
    transition: 0.3s;
}

.gold-btn {
    background: linear-gradient(to right, #d97706, #fbbf24);
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.4);
}

.submit-btn:hover { transform: scale(1.05); }

/* رسائل التنبيه */
.alert {
    padding: 10px; text-align: center; margin-bottom: 10px; border-radius: 5px; font-size: 0.9rem;
}
.alert.error { background: rgba(220, 38, 38, 0.2); color: #fca5a5; border: 1px solid #dc2626; }
.alert.success { background: rgba(5, 150, 105, 0.2); color: #6ee7b7; border: 1px solid #059669; }

/* للموبايل */
@media (max-width: 400px) {
    .form-box { width: 100%; padding: 0; }
    .input-group { width: 85%; right: 7.5%; }
    #register-form { right: 110%; }
}
/* =========================================
   تنسيقات صفحة الاستشارات (القائمة)
   ========================================= */

/* هيدر الصفحة الفرعية */
.page-header {
    padding-top: 150px; /* مسافة عشان الناف بار العائم */
    padding-bottom: 50px;
    text-align: center;
    background: linear-gradient(to bottom, #000, #050505);
}

.page-header h1 {
    font-size: 2.5rem; color: #fff; margin-bottom: 10px;
}
.page-header p { color: var(--brand-gold); font-size: 1.1rem; }

/* شبكة الكروت */
.services-list-section {
    padding-bottom: 80px;
    background: #050505;
    min-height: 60vh;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
}

/* تصميم الكرت */
.srv-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 25px;
    transition: 0.3s;
    display: flex; flex-direction: column;
}

.srv-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--brand-blue);
}

.srv-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 15px;
}

.srv-title {
    font-size: 1.2rem; color: #fff; line-height: 1.5;
    border-right: 3px solid var(--brand-gold);
    padding-right: 10px; flex: 1;
}

.srv-actions { display: flex; gap: 8px; }
.icon-btn {
    width: 35px; height: 35px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1rem; transition: 0.3s;
}
.icon-btn.whatsapp { background: #25D366; }
.icon-btn.email { background: #0ea5e9; }
.icon-btn:hover { transform: scale(1.1); }

.srv-desc {
    color: #aaa; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; flex: 1;
}

.srv-footer {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 15px; margin-top: auto;
}

.srv-provider {
    font-size: 0.8rem; color: #666;
}

.srv-price-box {
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}

.price-tag { font-size: 0.9rem; color: var(--brand-gold); font-weight: bold; }

.details-btn {
    font-size: 0.85rem; color: #fff; text-decoration: none;
    background: rgba(255,255,255,0.1); padding: 5px 12px; border-radius: 5px;
    transition: 0.3s;
}
.details-btn:hover { background: var(--brand-blue); }

/* =========================================
   تنسيقات صفحة التفاصيل (Details Page)
   ========================================= */
.details-page-wrapper {
    padding-top: 140px; padding-bottom: 80px;
    background: #050505; min-height: 100vh;
}

.back-btn-top {
    display: inline-block; color: #888; margin-bottom: 20px; transition: 0.3s;
}
.back-btn-top:hover { color: var(--brand-gold); padding-right: 5px; }

.details-card {
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; padding: 40px;
    position: relative;
    box-shadow: 0 10px 50px rgba(0,0,0,0.5);
}

.details-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.main-icon { font-size: 2rem; color: var(--brand-blue); }
.details-header h1 { font-size: 2rem; color: #fff; margin: 0; }

.details-actions-row {
    display: flex; align-items: center; gap: 15px; color: #aaa; font-size: 0.9rem;
}
.action-chip {
    padding: 5px 15px; border-radius: 20px; font-size: 0.85rem; color: white;
    display: flex; align-items: center; gap: 5px; text-decoration: none;
}
.action-chip.whats { background: rgba(37, 211, 102, 0.2); color: #25D366; }
.action-chip.email { background: rgba(14, 165, 233, 0.2); color: #0ea5e9; }

.divider { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 30px 0; }

.details-body { color: #ccc; line-height: 1.8; font-size: 1.05rem; }
/* تنسيق القوائم داخل الوصف */
.details-body ul { list-style: none; padding: 0; }
.details-body li {
    position: relative; padding-right: 25px; margin-bottom: 10px;
}
.details-body li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: 0; color: var(--brand-green);
}

.details-footer-cta {
    margin-top: 40px;
    background: rgba(255,255,255,0.03);
    padding: 20px; border-radius: 15px;
    display: flex; justify-content: space-between; align-items: center;
}

.price-big { font-size: 1.5rem; color: var(--brand-gold); font-weight: bold; }

.order-btn {
    background: #25D366; color: white; padding: 12px 30px; border-radius: 8px;
    font-weight: bold; text-decoration: none; transition: 0.3s;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}
.order-btn:hover { background: #1ebc56; transform: translateY(-3px); }

/* موبايل */
@media (max-width: 768px) {
    .details-footer-cta { flex-direction: column; gap: 15px; text-align: center; }
    .order-btn { width: 100%; text-align: center; }
}
/* =========================================
   تجديد صفحة الاستشارات (Luxurious Makeover)
   ========================================= */

/* 1. الخلفية المتحركة للصفحة (Aurora Background) */
.page-bg-animate {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background-color: #050505;
    background-image: 
        radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(217, 119, 6, 0.05) 0px, transparent 50%);
}

.page-glow {
    position: fixed; border-radius: 50%; filter: blur(100px); opacity: 0.4; z-index: -1;
    animation: floatOrb 10s infinite alternate ease-in-out;
}
.p-orb-1 { width: 300px; height: 300px; background: #2563eb; top: 10%; left: -100px; }
.p-orb-2 { width: 400px; height: 400px; background: #d97706; bottom: 10%; right: -100px; animation-delay: 2s; }

@keyframes floatOrb { from { transform: translate(0,0); } to { transform: translate(30px, 30px); } }


/* 2. هيدر الصفحة */
.consult-header {
    padding-top: 160px; padding-bottom: 60px; text-align: center;
}
.consult-header h1 {
    font-size: 3rem; color: #fff; margin-bottom: 15px; font-weight: 800;
}
.highlight-text {
    background: linear-gradient(to right, #60a5fa, #2563eb);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.consult-header p { color: #aaa; font-size: 1.1rem; }


/* 3. شبكة الكروت (Grid) */
.consult-grid-section { padding-bottom: 100px; }

.consult-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
}

/* 4. تصميم الكارت الزجاجي (Glass Card) */
.glass-consult-card {
    display: block; text-decoration: none;
    position: relative; overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 35px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* تأثير الهوفر القوي */
.glass-consult-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(37, 99, 235, 0.5); /* حدود زرقاء مضيئة */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* توهج داخلي عند الهوفر */
.card-hover-glow {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(37, 99, 235, 0.2), transparent 70%);
    opacity: 0; transition: 0.4s; pointer-events: none;
}
.glass-consult-card:hover .card-hover-glow { opacity: 1; }

.card-inner { position: relative; z-index: 2; }

/* الأيقونة العائمة */
.card-icon-box {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #60a5fa;
    margin-bottom: 25px;
    transition: 0.4s;
}
.glass-consult-card:hover .card-icon-box {
    background: #2563eb; color: #fff; transform: rotate(-10deg);
}

/* النصوص */
.card-title {
    font-size: 1.4rem; color: #fff; margin-bottom: 15px; line-height: 1.4;
    transition: 0.3s;
}
.glass-consult-card:hover .card-title { color: #60a5fa; }

.card-desc {
    color: #94a3b8; font-size: 0.95rem; line-height: 1.7; margin-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 20px;
}

/* الفوتر السفلي للكارت */
.card-meta {
    display: flex; justify-content: space-between; align-items: center;
}

.meta-price {
    font-size: 0.95rem; color: var(--brand-gold); font-weight: bold;
    background: rgba(217, 119, 6, 0.1); padding: 5px 12px; border-radius: 20px;
}

.meta-arrow {
    color: #fff; font-size: 0.9rem; font-weight: bold;
    display: flex; align-items: center; gap: 8px;
    opacity: 0.7; transition: 0.3s;
}
.glass-consult-card:hover .meta-arrow {
    opacity: 1; transform: translateX(-5px); color: #60a5fa;
}

/* حالة فارغة */
.empty-state {
    text-align: center; color: #555; padding: 50px; grid-column: 1 / -1;
}
.empty-state i { font-size: 4rem; margin-bottom: 20px; opacity: 0.5; }

/* للموبايل */
@media (max-width: 768px) {
    .consult-header h1 { font-size: 2.2rem; }
    .consult-grid { grid-template-columns: 1fr; }
}
/* =========================================
   تنسيقات البروفايل والشروط
   ========================================= */

.profile-container {
    padding: 150px 0 100px;
    background: #050505;
    min-height: 100vh;
}

/* هيدر البروفايل */
.profile-header {
    text-align: center; margin-bottom: 50px;
}
.avatar-circle {
    width: 100px; height: 100px; background: rgba(255,255,255,0.1);
    border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--brand-gold); border: 2px solid var(--brand-gold);
}
.profile-header h2 { color: #fff; margin-bottom: 5px; }
.role-badge { color: #aaa; font-size: 0.9rem; }
.role-badge i { color: var(--brand-blue); margin-left: 5px; }

/* صندوق الشروط والأحكام (Terms Box) */
.terms-modal {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid var(--brand-gold);
    border-radius: 20px; padding: 40px;
    max-width: 800px; margin: 0 auto;
    box-shadow: 0 0 50px rgba(217, 119, 6, 0.2);
}

.terms-content h3 {
    color: var(--brand-gold); text-align: center; margin-bottom: 20px; font-size: 1.8rem;
}
.terms-intro {
    color: #fff; text-align: center; margin-bottom: 20px;
}

.terms-scroll-box {
    height: 300px; overflow-y: auto;
    background: rgba(255,255,255,0.05);
    padding: 20px; border-radius: 10px;
    color: #ccc; font-size: 0.9rem; line-height: 1.8;
    margin-bottom: 30px; border: 1px solid rgba(255,255,255,0.1);
}
.terms-scroll-box h4 { color: #fff; margin-bottom: 15px; text-decoration: underline; }
.terms-scroll-box strong { color: var(--brand-blue); }

/* زر الموافقة */
.accept-btn {
    width: 100%; padding: 15px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    color: white; border: none; border-radius: 10px;
    font-weight: bold; font-size: 1.1rem; cursor: pointer;
    transition: 0.3s;
}
.accept-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 20px rgba(34, 197, 94, 0.4); }

/* لوحة التحكم للشريك */
.dashboard-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;
}
.dash-card {
    background: rgba(255,255,255,0.05); padding: 30px; border-radius: 15px; text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
}
.dash-card h3 { color: #fff; margin-bottom: 10px; }
.dash-card p { color: #aaa; margin-bottom: 20px; font-size: 0.9rem; }

.dash-btn {
    display: inline-block; padding: 10px 20px; background: var(--brand-blue); color: #fff;
    border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.3s;
}
.dash-btn.sec { background: transparent; border: 1px solid var(--brand-blue); }
.dash-btn:hover { opacity: 0.8; }

/* صندوق الترويج للعضو العادي */
.promo-box {
    background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(0,0,0,0));
    padding: 40px; border-radius: 20px; text-align: center; border: 1px solid var(--brand-blue);
}
.promo-box h3 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
.promo-box p { color: #ccc; margin-bottom: 20px; }

/* نموذج التقديم */
.partner-form-section { padding: 50px 0; background: #050505; min-height: 80vh; }
.partner-form { max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; color: #ccc; margin-bottom: 10px; }
.form-group input, .form-group textarea {
    width: 100%; padding: 15px; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #fff; outline: none;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--brand-gold); }

/* كروت الحالة (Pending / Approved) */
.status-card {
    text-align: center; padding: 50px; background: rgba(255,255,255,0.05); border-radius: 20px; max-width: 500px; margin: 0 auto;
}
.status-card i { font-size: 4rem; margin-bottom: 20px; display: block; }
.status-card.pending i { color: #f59e0b; }
.status-card.approved i { color: #22c55e; }
.status-card h3 { color: #fff; font-size: 1.8rem; margin-bottom: 15px; }
.status-card p { color: #ccc; margin-bottom: 30px; line-height: 1.6; }
/* =========================================
   1. تنسيق زر المستخدم في الهيدر
   ========================================= */
.user-dropdown-container { position: relative; display: inline-block; }

.user-profile-btn {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    padding: 5px 15px 5px 5px; border-radius: 50px; cursor: pointer;
    transition: 0.3s;
}
.user-profile-btn:hover { background: rgba(255,255,255,0.2); }

.avatar-small {
    width: 35px; height: 35px; background: var(--brand-gold);
    color: #000; font-weight: bold; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.user-name { color: #fff; font-size: 0.9rem; }
.user-profile-btn i { color: #ccc; font-size: 0.8rem; margin-right: 5px; }

/* القائمة المنسدلة */
.user-dropdown-menu {
    display: none; position: absolute; top: 50px; left: 0; width: 200px;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; overflow: hidden; z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.user-dropdown-menu.show { display: block; animation: fadeIn 0.2s; }
.user-dropdown-menu a {
    display: block; padding: 12px 20px; color: #ccc; text-decoration: none;
    font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.user-dropdown-menu a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.user-dropdown-menu a.logout-link:hover { background: rgba(220, 38, 38, 0.2); color: #fca5a5; }


/* =========================================
   2. تنسيق نموذج الشريك (مثل الصورة)
   ========================================= */
.page-header-simple {
    text-align: center; padding-top: 150px; padding-bottom: 40px;
    background: #050505;
}
.page-header-simple h1 { color: #fff; margin-bottom: 10px; }
.page-header-simple p { color: #888; }

.partner-register-section {
    background: #050505; padding-bottom: 100px;
}

.partner-form-grid {
    background: #fff; /* خلفية بيضاء للفورم كما في الصورة */
    border-radius: 15px; padding: 40px;
    max-width: 900px; margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    color: #333; /* نص أسود */
}

/* في حالة الدارك مود (إذا كنت تفضله)، يمكنك تغيير الخلفية لـ #111 */

.form-row {
    display: flex; gap: 30px; margin-bottom: 25px;
}
.input-wrapper { flex: 1; }
.input-wrapper.full-width { width: 100%; }

.input-wrapper label {
    display: block; margin-bottom: 8px; font-weight: bold; font-size: 0.95rem; text-align: right;
}
.req { color: red; }

.input-wrapper input, .input-wrapper textarea {
    width: 100%; padding: 12px 15px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 1rem; background: #f9f9f9;
    font-family: 'Tajawal', sans-serif;
}

/* الحقول للقراءة فقط (الرمادية) */
.readonly-input {
    background-color: #e9ecef !important; cursor: not-allowed; color: #666;
}

.input-wrapper input:focus, .input-wrapper textarea:focus {
    border-color: var(--brand-blue); background: #fff; outline: none;
}

.submit-partner-btn {
    width: 100%; padding: 15px;
    background: #000; color: #fff; /* زر أسود فخم */
    border: none; border-radius: 8px;
    font-size: 1.1rem; font-weight: bold; cursor: pointer;
    transition: 0.3s; margin-top: 20px;
}
.submit-partner-btn:hover { background: #333; }

/* رسائل التنبيه */
.success-box {
    background: #d1fae5; color: #065f46; padding: 15px; border-radius: 8px; text-align: center; margin-bottom: 30px; border: 1px solid #34d399;
}
.info-box {
    background: #dbeafe; color: #1e40af; padding: 15px; border-radius: 8px; text-align: center; margin-bottom: 30px; border: 1px solid #60a5fa;
}

/* تجاوب الموبايل */
@media (max-width: 768px) {
    .form-row { flex-direction: column; gap: 15px; }
    .partner-form-grid { padding: 20px; }
}
/* =========================================
   تنسيق كارت حالة الطلب (Status Tracker)
   ========================================= */

.status-tracker-card {
    background: #fff;
    border-radius: 20px;
    padding: 60px 40px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.status-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
}

.status-icon.pending {
    background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 2px solid #f59e0b;
}
.status-icon.approved {
    background: rgba(34, 197, 94, 0.1); color: #22c55e; border: 2px solid #22c55e;
}

.status-tracker-card h2 { font-size: 2rem; color: #333; margin-bottom: 10px; }
.status-tracker-card p { color: #666; font-size: 1.1rem; margin-bottom: 40px; }

/* شريط التقدم (Timeline) */
.progress-track {
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 40px; position: relative;
}

.step {
    text-align: center; position: relative; z-index: 2;
}

.step-icon {
    width: 50px; height: 50px; background: #eee; color: #aaa;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px; font-size: 1.2rem; transition: 0.3s;
}

.step span { font-size: 0.9rem; color: #999; font-weight: bold; }

/* الخط الواصل */
.line {
    width: 100px; height: 4px; background: #eee; margin: -25px 10px 0;
}

/* الحالة النشطة */
.step.completed .step-icon { background: #22c55e; color: #fff; }
.step.completed span { color: #22c55e; }

.step.active .step-icon { background: var(--brand-gold); color: #fff; box-shadow: 0 0 15px rgba(217, 119, 6, 0.4); }
.step.active span { color: var(--brand-gold); }

.line.active { background: #22c55e; } /* الخط المكتمل أخضر */

/* ملاحظة سفلية */
.status-note {
    background: #f8f9fa; color: #555; padding: 15px;
    border-radius: 10px; font-size: 0.9rem; margin-bottom: 30px;
    border: 1px solid #eee;
}

.back-home-btn {
    display: inline-block; padding: 12px 35px;
    background: #333; color: #fff; border-radius: 8px;
    text-decoration: none; font-weight: bold; transition: 0.3s;
}
.back-home-btn:hover { background: #000; transform: translateY(-3px); }

/* تنسيق بسيط لهيدر الفورم */
.form-header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.form-header h3 { font-size: 1.5rem; color: #333; margin-bottom: 5px; }
.form-header p { color: #888; font-size: 0.9rem; }

/* تجاوب للموبايل */
@media (max-width: 768px) {
    .line { width: 40px; } /* تصغير الخطوط في الموبايل */
    .step span { font-size: 0.7rem; }
    .step-icon { width: 40px; height: 40px; font-size: 1rem; }
}
/* =========================================
   تنسيقات صفحة إضافة خدمة (Dark Neon Style)
   ========================================= */

/* كارت الفورم الرئيسي */
.service-form-card {
    background: rgba(20, 20, 20, 0.8); /* خلفية داكنة شفافة */
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 50px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    position: relative;
    overflow: hidden;
}

/* شريط علوي ملون للكارت */
.service-form-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-gold));
}

/* هيدر الفورم */
.form-header-neon {
    text-align: center; margin-bottom: 40px;
}
.form-header-neon .icon-glow {
    font-size: 3rem; 
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.4));
}
.form-header-neon h2 { font-size: 2rem; color: #fff; margin-bottom: 5px; }
.form-header-neon p { color: #888; font-size: 1rem; }

/* تنسيق الحقول */
.neon-form { display: flex; flex-direction: column; gap: 20px; }

.form-row-neon { display: flex; gap: 20px; }
.form-group-neon { display: flex; flex-direction: column; gap: 8px; }
.form-group-neon.half { flex: 1; }

.form-group-neon label {
    color: #ccc; font-size: 0.95rem; font-weight: bold; margin-right: 5px;
}

.input-wrapper-neon {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: 0.3s;
    display: flex; align-items: center;
}

.input-wrapper-neon:focus-within {
    border-color: var(--brand-gold);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 15px rgba(217, 119, 6, 0.2);
}

.input-wrapper-neon i {
    position: absolute; right: 15px; color: #666; font-size: 1.1rem;
    transition: 0.3s;
}
.input-wrapper-neon i.top-icon { top: 15px; }

.input-wrapper-neon:focus-within i { color: var(--brand-gold); }

.input-wrapper-neon input,
.input-wrapper-neon select,
.input-wrapper-neon textarea {
    width: 100%;
    background: transparent; border: none; outline: none;
    padding: 15px 45px 15px 15px; /* مسافة للأيقونة */
    color: #fff; font-size: 1rem; font-family: 'Tajawal', sans-serif;
}

.input-wrapper-neon textarea { resize: vertical; min-height: 100px; }
.input-wrapper-neon select { cursor: pointer; }
.input-wrapper-neon select option { background: #111; color: #fff; } /* للأوبشنز في الكروم */

.hint { color: #555; font-size: 0.8rem; }

/* زر الإرسال المتوهج */
.btn-neon-submit {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, var(--brand-blue), #1d4ed8);
    color: white; border: none; border-radius: 30px;
    font-size: 1.1rem; font-weight: bold; cursor: pointer;
    position: relative; overflow: hidden; transition: 0.3s;
    box-shadow: 0 5px 20px rgba(37, 99, 235, 0.4);
}

.btn-neon-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.6);
}

/* رسالة النجاح */
.success-message-box {
    text-align: center; padding: 40px 20px;
    animation: fadeIn 0.5s ease-in-out;
}
.success-message-box i {
    font-size: 4rem; color: #22c55e; margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(34, 197, 94, 0.5));
}
.success-message-box h3 { color: #fff; font-size: 1.8rem; margin-bottom: 10px; }
.success-message-box p { color: #ccc; margin-bottom: 5px; }
.success-message-box .note { color: #f59e0b; font-size: 0.9rem; margin-top: 15px; background: rgba(245, 158, 11, 0.1); padding: 10px; border-radius: 8px; display: inline-block; }
.back-link {
    display: inline-block; margin-top: 30px; color: var(--brand-blue); text-decoration: none; font-weight: bold; border-bottom: 1px solid var(--brand-blue);
}

/* تجاوب الموبايل */
@media (max-width: 768px) {
    .service-form-card { padding: 30px 20px; }
    .form-row-neon { flex-direction: column; gap: 20px; }
}
/* =========================================
   تنسيقات اللوجو والنصوص الجديدة في الـ Index
   ========================================= */

/* 1. تنسيق صورة اللوجو داخل الكرت */
.bio-logo-img {
    height: 120px;       /* حجم مناسب */
    width: auto;
    display: block;
    margin: 0 auto 20px; /* توسيط ومسافة سفلية */
    filter: drop-shadow(0 0 15px rgba(217, 119, 6, 0.4)); /* توهج ذهبي خفيف خلف اللوجو */
    transition: transform 0.3s;
}

.bio-logo-img:hover {
    transform: scale(1.05); /* تكبير بسيط عند الماوس */
}

/* 2. النصوص تحت اللوجو */
.bio-subtitle {
    font-size: 1.2rem !important;
    color: #888 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: inline-block;
    padding-bottom: 10px;
}

.main-specialty {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 700;
    line-height: 1.4;
    background: linear-gradient(to right, #fff, #ddd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 3. شريط الرخصة */
.license-badge {
    background: rgba(217, 119, 6, 0.1); /* خلفية ذهبية شفافة */
    color: #fbbf24;                      /* نص ذهبي */
    border: 1px solid rgba(217, 119, 6, 0.3);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.license-badge i {
    font-size: 1.2rem;
}

/* 4. تعديل ارتفاع الكرت ليناسب المحتوى الجديد */
.bio-card-premium {
    padding-top: 50px;
    padding-bottom: 60px;
}

/* تعديل للموبايل */
@media (max-width: 768px) {
    .bio-logo-img { height: 90px; }
    .main-specialty { font-size: 1.4rem; }
    .license-badge { font-size: 0.9rem; padding: 8px 15px; width: 100%; justify-content: center; }
}