/* ===============================================================================================
    PROJECT: MAHMOUD ABOLFADL OFFICIAL PORTFOLIO & SECURITY HUB
    COMPONENT: MAIN STYLESHEET (High-End Design System)
    VERSION: 3.0 (Enterprise Edition)
    DEVELOPER: MAHMOUD IBRAHIM
    
    DESCRIPTION:
    هذا الملف يحتوي على كافة قواعد التصميم (Design Rules) الخاصة بالمشروع.
    تم الاعتماد على نظام الألوان الفاخر (Dark Luxury): الأسود، الذهبي، والأحمر للتحذير الأمني.
    
    TABLE OF CONTENTS:
    1.  ROOT VARIABLES (الألوان والخطوط)
    2.  RESET & BASE STYLES (تهيئة المتصفح)
    3.  TYPOGRAPHY (التايبوجرافي والنصوص)
    4.  LAYOUT UTILITIES (أدوات التخطيط)
    5.  COMPONENTS (الأزرار، البطاقات، النماذج)
    6.  HEADER & NAVIGATION (القائمة العلوية)
    7.  HERO SECTION (الواجهة الرئيسية)
    8.  ABOUT SECTION (من أنا)
    9.  HISTORY & TECH SECTION (دمج التاريخ والتقنية)
    10. SECURITY HUB (مركز التوعية الأمنية)
    11. PROJECTS SECTION (المشاريع)
    12. TESTIMONIALS (آراء العملاء)
    13. CONTACT SECTION (تواصل معي)
    14. FOOTER (التذييل)
    15. ANIMATIONS (التحريكات والمؤثرات)
    16. MEDIA QUERIES (التجاوب مع الشاشات)
    ===============================================================================================
*/

/* -------------------------------------------------------------------------------------------
    1. ROOT VARIABLES
    تعريف متغيرات الألوان والخطوط لسهولة التعديل وضمان توحيد الهوية البصرية.
    -------------------------------------------------------------------------------------------
*/
:root {
    /* PRIMARY PALETTE - LUXURY GOLD */
    --color-gold-100: #f9f1d8;
    --color-gold-200: #f0deaa;
    --color-gold-300: #e6cb7d;
    --color-gold-400: #dcb858;
    --color-gold-500: #cca43b; /* MAIN GOLD BRAND COLOR */
    --color-gold-600: #a3832f;
    --color-gold-700: #7a6223;
    --color-gold-800: #524118;
    --color-gold-900: #29210c;

    /* SECONDARY PALETTE - SECURITY RED (WARNING/ACTION) */
    --color-red-100: #ffebee;
    --color-red-200: #ffcdd2;
    --color-red-300: #ef9a9a;
    --color-red-400: #e57373;
    --color-red-500: #e63946; /* MAIN RED ACTION COLOR */
    --color-red-600: #d32f2f;
    --color-red-700: #c62828;
    --color-red-800: #b71c1c;
    --color-red-900: #8e0000;

    /* NEUTRAL PALETTE - DARK MATTER (BACKGROUNDS) */
    --color-dark-050: #ffffff;
    --color-dark-100: #e0e0e0;
    --color-dark-200: #a0a0a0;
    --color-dark-300: #707070;
    --color-dark-400: #404040;
    --color-dark-500: #252525;
    --color-dark-600: #1a1a1a;
    --color-dark-700: #121212; /* CARD BG */
    --color-dark-800: #0a0a0a; /* SECTION BG */
    --color-dark-900: #050505; /* MAIN BODY BG */
    --color-black: #000000;

    /* FONTS */
    --font-primary: 'Cairo', 'Tajawal', sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace; /* للكود والترمينال */
    
    /* SPACING SYSTEM */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 64px;
    --spacing-huge: 128px;

    /* BORDERS & RADIUS */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* SHADOWS & GLOWS */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.5);
    --shadow-gold: 0 0 15px rgba(204, 164, 59, 0.3);
    --shadow-red: 0 0 15px rgba(230, 57, 70, 0.3);
    
    /* TRANSITIONS */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-INDEX LAYERS */
    --z-negative: -1;
    --z-normal: 1;
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
    --z-overlay: 999;
}

/* -------------------------------------------------------------------------------------------
    2. RESET & BASE STYLES
    تنظيف إعدادات المتصفح الافتراضية لضمان ظهور الموقع بشكل متطابق على كروم، فايرفوكس، وسفاري.
    -------------------------------------------------------------------------------------------
*/
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

html {
    scroll-behavior: smooth; /* نعومة عند التنقل بين الأقسام */
    font-size: 16px; /* Base font size */
}

body {
    background-color: var(--color-dark-900);
    color: var(--color-dark-100);
    font-family: var(--font-primary);
    line-height: 1.7;
    overflow-x: hidden; /* منع التمرير الأفقي غير المرغوب فيه */
    -webkit-font-smoothing: antialiased; /* تحسين خطوط الماك */
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar Customization - تخصيص شريط التمرير */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-dark-900); 
}

::-webkit-scrollbar-thumb {
    background: var(--color-dark-500); 
    border-radius: var(--radius-full);
    border: 2px solid var(--color-dark-900);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-500); 
}

/* Selection Color - لون التظليل للنص */
::selection {
    background-color: var(--color-gold-500);
    color: var(--color-black);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -------------------------------------------------------------------------------------------
    3. TYPOGRAPHY
    تنسيقات النصوص والعناوين
    -------------------------------------------------------------------------------------------
*/
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-dark-050);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

p {
    margin-bottom: var(--spacing-md);
    color: var(--color-dark-200);
}

.text-gold { color: var(--color-gold-500); }
.text-red { color: var(--color-red-500); }
.text-white { color: var(--color-dark-050); }

/* Highlighted Text Styles */
.highlight-name {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-gold-500);
    position: relative;
    display: inline-block;
}

.highlight-name::before {
    content: 'محمود إبراهيم';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    color: var(--color-gold-500);
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--color-gold-500);
    animation: fillText 4s linear infinite alternate;
}

.highlight-gold {
    color: var(--color-gold-500);
    text-shadow: 0 0 10px rgba(204, 164, 59, 0.2);
}

.section-title {
    position: relative;
    display: inline-block;
    z-index: 2;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--color-gold-500);
    border-radius: var(--radius-full);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--color-dark-300);
    margin-top: var(--spacing-sm);
}

/* -------------------------------------------------------------------------------------------
    4. LAYOUT UTILITIES
    أدوات التخطيط (Container, Grid, Flex)
    -------------------------------------------------------------------------------------------
*/
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    position: relative;
}

.section {
    padding: var(--spacing-huge) 0;
    position: relative;
    overflow: hidden;
}

.center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.hidden { display: none !important; }

/* -------------------------------------------------------------------------------------------
    5. COMPONENTS UI
    الأزرار، البطاقات، والعناصر المتكررة
    -------------------------------------------------------------------------------------------
*/

/* Buttons Style - الأزرار */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    z-index: 1;
    gap: 10px;
}

/* Primary Button (Gold) */
.btn-primary {
    background-color: var(--color-gold-500);
    color: var(--color-black);
    border: 1px solid var(--color-gold-500);
    box-shadow: 0 4px 15px rgba(204, 164, 59, 0.2);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: var(--transition-normal);
    z-index: -1;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(204, 164, 59, 0.4);
}

.btn-primary:hover::before {
    left: 100%;
    transition: 0.5s;
}

/* Secondary Button (Red - Security/Action) */
.btn-secondary {
    background-color: var(--color-red-500);
    color: var(--color-white);
    border: 1px solid var(--color-red-500);
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2);
}

.btn-secondary:hover {
    background-color: var(--color-red-600);
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.4);
    transform: translateY(-3px);
}

/* Outline Button */
.btn-outline {
    background-color: transparent;
    color: var(--color-gold-500);
    border: 1px solid var(--color-gold-500);
}

.btn-outline:hover {
    background-color: rgba(204, 164, 59, 0.1);
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-lg {
    padding: 16px 40px;
    font-size: 1.1rem;
}

.btn-sm {
    padding: 8px 20px;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    display: inline-block;
    background: var(--color-gold-500);
    color: black;
    font-weight: bold;
    margin-left: 5px;
}
.btn-sm.btn-dark {
    background: var(--color-dark-600);
    color: white;
    border: 1px solid var(--color-dark-400);
}
.btn-sm.btn-dark:hover {
    border-color: var(--color-gold-500);
    color: var(--color-gold-500);
}

/* Badges - الشارات */
.badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 5px;
}

.security-link .badge {
    background-color: var(--color-red-500);
    color: white;
    animation: pulseRed 2s infinite;
}

.tech-badges .badge {
    background-color: var(--color-dark-700);
    border: 1px solid var(--color-dark-500);
    color: var(--color-dark-200);
}

/* -------------------------------------------------------------------------------------------
    6. HEADER & NAVIGATION
    تنسيق القائمة العلوية الثابتة
    -------------------------------------------------------------------------------------------
*/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-fixed);
    background-color: rgba(5, 5, 5, 0.85); /* شبه شفاف */
    backdrop-filter: blur(10px); /* Glassmorphism */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-normal);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo-link svg {
    height: 40px;
    width: auto;
    transition: transform var(--transition-normal);
}

.logo-link:hover svg {
    transform: scale(1.05);
}

.nav-list {
    display: flex;
    gap: var(--spacing-lg);
}

.nav-link {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark-100);
    position: relative;
    padding: 8px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-gold-500);
    transition: width var(--transition-normal);
}

.nav-link:hover {
    color: var(--color-gold-500);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
    left: 0;
    right: auto;
}

.nav-link.active {
    color: var(--color-gold-500);
}

.cta-button {
    background-color: transparent;
    border: 1px solid var(--color-gold-500);
    color: var(--color-gold-500) !important;
    padding: 8px 24px !important;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.cta-button::after { display: none; } /* إزالة الخط السفلي */

.cta-button:hover {
    background-color: var(--color-gold-500);
    color: var(--color-black) !important;
}

/* Mobile Toggle */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
    width: 30px;
    height: 2px;
    background-color: var(--color-gold-500);
    border-radius: 4px;
    position: absolute;
    transition: transform 0.15s ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--color-gold-500);
    border-radius: 4px;
    position: absolute;
    transition: transform 0.15s ease;
}

.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }

/* -------------------------------------------------------------------------------------------
    7. HERO SECTION
    الواجهة الرئيسية بلمسات إبداعية
    -------------------------------------------------------------------------------------------
*/
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px; /* لتعويض الهيدر الثابت */
    position: relative;
    background: radial-gradient(circle at 70% 30%, #1a1a1a 0%, #050505 60%);
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.9)),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23cca43b' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
}

.hero-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: var(--spacing-xxl);
    z-index: 1;
}

.hero-subtitle {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--color-gold-500);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-mono);
    letter-spacing: 2px;
}

.hero-title {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
    line-height: 1.1;
}

.dynamic-text-wrapper {
    display: inline-block;
    min-height: 1.2em;
}

.static-text {
    font-size: 2rem;
    color: var(--color-dark-200);
}

.typing-text {
    font-size: 2.5rem;
    color: var(--color-dark-050);
    position: relative;
}

.typing-text::after {
    content: '|';
    position: absolute;
    right: -10px;
    color: var(--color-gold-500);
    animation: blinkCursor 0.8s infinite;
}

.hero-description {
    font-size: 1.2rem;
    color: var(--color-dark-200);
    max-width: 600px;
    margin-bottom: var(--spacing-xl);
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
}

/* Hero Visual SVG */
.hero-visual-area {
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-svg {
    width: 100%;
    max-width: 500px;
    animation: floatAnimation 6s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(204, 164, 59, 0.15));
}

.scroll-down-btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.scroll-down-btn:hover { opacity: 1; }

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid var(--color-gold-500);
    border-radius: 20px;
    display: block;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: var(--color-gold-500);
    border-radius: 2px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 1.5s infinite;
}

/* -------------------------------------------------------------------------------------------
    8. ABOUT SECTION
    تصميم بطاقات التعريف والمهارات
    -------------------------------------------------------------------------------------------
*/
.about-section {
    background-color: var(--color-dark-800);
}

.title-separator {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--color-gold-500), transparent);
    margin: var(--spacing-lg) auto;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.about-card {
    background-color: var(--color-dark-700);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.about-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-gold-500);
    box-shadow: var(--shadow-lg);
}

/* Glow Effect on Hover */
.about-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(204,164,59,0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.about-card:hover::after { opacity: 1; }

.card-icon {
    width: 70px;
    height: 70px;
    background-color: rgba(204, 164, 59, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.info-list li {
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.info-list li:last-child { border-bottom: none; }
.info-list strong { color: var(--color-gold-500); display: inline-block; width: 100px; }

/* Skills Bars */
.skill-bar-wrapper {
    margin-bottom: var(--spacing-lg);
}

.skill-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.9rem;
    font-weight: 600;
}

.progress-bg {
    width: 100%;
    height: 8px;
    background-color: var(--color-dark-900);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    position: relative;
}

.progress-fill.gold { background: linear-gradient(90deg, var(--color-gold-600), var(--color-gold-400)); }
.progress-fill.red { background: linear-gradient(90deg, var(--color-red-800), var(--color-red-500)); }

/* -------------------------------------------------------------------------------------------
    9. HISTORY & TECH SECTION
    قسم المقارنة بين التاريخ والبرمجة
    -------------------------------------------------------------------------------------------
*/
.duel-section {
    background-color: var(--color-dark-900);
    padding: var(--spacing-huge) 0;
}

.duel-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-xxl);
}

.duel-subtitle {
    color: var(--color-gold-500);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}

.highlight-text {
    background-color: rgba(204, 164, 59, 0.15);
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--color-gold-400);
}

.styled-list li {
    position: relative;
    padding-right: 25px;
    margin-bottom: var(--spacing-md);
}

.styled-list li::before {
    content: '✓';
    position: absolute;
    right: 0;
    top: 0;
    color: var(--color-gold-500);
    font-weight: bold;
}

/* -------------------------------------------------------------------------------------------
    10. SECURITY HUB (مركز التوعية الأمنية)
    تصميم خطير واحترافي (مائل للأحمر والأسود)
    -------------------------------------------------------------------------------------------
*/
.security-section {
    background-color: #080808;
    position: relative;
    border-top: 1px solid var(--color-red-900);
    border-bottom: 1px solid var(--color-red-900);
}

/* Pattern Overlay specifically for Security Section */
.security-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), repeating-linear-gradient(45deg, #1a0000 0, #1a0000 10px, #000000 10px, #000000 20px);
    z-index: 0;
}

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

.security-badge {
    display: inline-block;
    background-color: rgba(230, 57, 70, 0.2);
    color: var(--color-red-500);
    padding: 5px 15px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: bold;
    border: 1px solid var(--color-red-800);
    margin-bottom: var(--spacing-md);
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.security-card {
    background-color: rgba(20, 20, 20, 0.8);
    border: 1px solid var(--color-dark-600);
    border-top: 4px solid var(--color-dark-400); /* Default top border */
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    transition: all 0.4s ease;
}

.security-card:hover {
    transform: translateY(-5px);
    background-color: rgba(30, 10, 10, 0.9);
}

/* Card Specific Colors on Hover */
.security-card:nth-child(1):hover { border-color: var(--color-red-500); box-shadow: 0 5px 20px rgba(230, 57, 70, 0.15); border-top-color: var(--color-red-500); }
.security-card:nth-child(2):hover { border-color: var(--color-gold-500); box-shadow: 0 5px 20px rgba(204, 164, 59, 0.15); border-top-color: var(--color-gold-500); }
.security-card:nth-child(3):hover { border-color: #7289da; box-shadow: 0 5px 20px rgba(114, 137, 218, 0.15); border-top-color: #7289da; }

.card-header-icon {
    margin-bottom: var(--spacing-md);
    opacity: 0.8;
}

.security-card h3 {
    font-size: 1.5rem;
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
}

.summary {
    font-style: italic;
    color: var(--color-dark-300);
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
}

.detailed-content {
    background-color: rgba(0,0,0,0.3);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.detailed-content ul {
    margin-top: var(--spacing-sm);
    list-style: disc;
    padding-right: 20px;
}

.tip-box {
    margin-top: var(--spacing-md);
    padding: 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    border-right: 3px solid;
}

.tip-box.warning { background: rgba(255, 193, 7, 0.1); border-color: #ffc107; color: #ffc107; }
.tip-box.success { background: rgba(40, 167, 69, 0.1); border-color: #28a745; color: #28a745; }
.tip-box.danger { background: rgba(220, 53, 69, 0.1); border-color: #dc3545; color: #dc3545; }

.security-tools-cta {
    text-align: center;
    margin-top: var(--spacing-xxl);
    background: linear-gradient(180deg, transparent, rgba(230, 57, 70, 0.05));
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-red-900);
}

.security-tools-cta h3 { color: var(--color-red-500); }

.cta-group {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* -------------------------------------------------------------------------------------------
    11. PROJECTS SECTION
    معرض الأعمال الفنية
    -------------------------------------------------------------------------------------------
*/
.projects-section {
    background-color: var(--color-dark-800);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.project-card {
    background-color: var(--color-dark-700);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

.project-image {
    height: 200px;
    background-color: var(--color-dark-600);
    overflow: hidden;
    position: relative;
}

.project-image svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.project-card:hover .project-image svg {
    transform: scale(1.1);
}

.project-info {
    padding: var(--spacing-lg);
}

.project-info h3 {
    color: var(--color-gold-500);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-xs);
}

.tech-stack {
    margin-bottom: var(--spacing-md);
}

.tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    background-color: var(--color-dark-800);
    color: var(--color-dark-200);
    border-radius: var(--radius-sm);
    margin-left: 5px;
    border: 1px solid var(--color-dark-500);
}

.description {
    font-size: 0.9rem;
    color: var(--color-dark-100);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

/* -------------------------------------------------------------------------------------------
    12. TESTIMONIALS (آراء العملاء)
    -------------------------------------------------------------------------------------------
*/
.testimonials-section {
    background: var(--color-dark-900);
    padding-bottom: var(--spacing-huge);
}

.testimonials-slider {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.testimonial-box {
    background: var(--color-dark-800);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    max-width: 500px;
    position: relative;
    border: 1px solid rgba(204, 164, 59, 0.1);
}

.quote-icon {
    font-size: 4rem;
    color: rgba(204, 164, 59, 0.2);
    position: absolute;
    top: 10px;
    right: 20px;
    font-family: serif;
}

.feedback {
    font-style: italic;
    color: var(--color-dark-100);
    margin-bottom: var(--spacing-lg);
    position: relative;
    z-index: 1;
}

.client-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.client-avatar {
    width: 50px;
    height: 50px;
    background-color: var(--color-gold-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--color-black);
}

.client-details h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--color-white);
}

.client-details span {
    font-size: 0.85rem;
    color: var(--color-dark-300);
}

/* -------------------------------------------------------------------------------------------
    13. CONTACT SECTION
    النموذج ومعلومات التواصل
    -------------------------------------------------------------------------------------------
*/
.contact-section {
    background-color: #0c0c0c;
    position: relative;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-xxl);
    background-color: var(--color-dark-800);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    border: 1px solid var(--color-dark-600);
    box-shadow: var(--shadow-lg);
}

.contact-info {
    padding-right: var(--spacing-md);
}

.contact-title {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-gold-500);
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
}

.icon-box {
    min-width: 40px;
    height: 40px;
    background-color: rgba(204, 164, 59, 0.1);
    color: var(--color-gold-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--spacing-md);
}

.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 5px;
}
.status-indicator.online {
    background-color: #28a745;
    box-shadow: 0 0 8px #28a745;
}

.social-links {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.social-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid var(--color-dark-500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark-200);
    transition: all var(--transition-normal);
}

.social-btn:hover {
    border-color: var(--color-gold-500);
    color: var(--color-gold-500);
    transform: translateY(-3px);
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--color-dark-200);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--color-dark-900);
    border: 1px solid var(--color-dark-600);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-family: inherit;
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-gold-500);
    box-shadow: 0 0 0 3px rgba(204, 164, 59, 0.1);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background-color: var(--color-gold-500);
    color: var(--color-black);
    border: none;
    border-radius: var(--radius-md);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all var(--transition-normal);
}

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

/* -------------------------------------------------------------------------------------------
    14. FOOTER
    -------------------------------------------------------------------------------------------
*/
.site-footer {
    background-color: var(--color-black);
    color: var(--color-dark-300);
    font-size: 0.9rem;
    border-top: 1px solid var(--color-dark-700);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    padding: var(--spacing-huge) var(--spacing-lg);
}

.footer-logo {
    color: var(--color-gold-500);
    font-family: var(--font-mono);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
}

.footer-col h4 {
    color: var(--color-white);
    margin-bottom: var(--spacing-lg);
    font-size: 1.1rem;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a:hover {
    color: var(--color-gold-500);
    padding-right: 5px; /* حركة بسيطة عند الهوفر */
}

.newsletter-form {
    display: flex;
    margin-top: var(--spacing-md);
}

.newsletter-form input {
    background: var(--color-dark-800);
    border: 1px solid var(--color-dark-600);
    padding: 10px;
    color: white;
    border-radius: 0 4px 4px 0;
    width: 70%;
}

.newsletter-form button {
    width: 30%;
    background: var(--color-gold-500);
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px 0 0 4px;
}

.footer-bottom {
    background-color: #000;
    padding: var(--spacing-md) 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* -------------------------------------------------------------------------------------------
    15. ANIMATIONS & PRELOADER
    الجزء المفضل لمحبي الحركة والتفاعل
    -------------------------------------------------------------------------------------------
*/

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s;
}

.loader-logo path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: dash 2s linear alternate infinite;
}

.loading-text {
    margin-top: 20px;
    color: var(--color-gold-500);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 2px;
    animation: blinkCursor 1s infinite;
}

/* Keyframes Definitions */
@keyframes dash {
    from { stroke-dashoffset: 300; }
    to { stroke-dashoffset: 0; }
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

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

@keyframes scrollWheel {
    0% { opacity: 1; top: 10px; }
    100% { opacity: 0; top: 30px; }
}

@keyframes pulseRed {
    0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}

@keyframes fillText {
    0% { width: 0; }
    100% { width: 100%; }
}

/* Fade In Up Utility Class (Used by JS) */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* -------------------------------------------------------------------------------------------
    16. MEDIA QUERIES (RESPONSIVE DESIGN)
    ضبط التصميم ليعمل بكفاءة على جميع الأجهزة
    -------------------------------------------------------------------------------------------
*/

/* Tablet (Max 1024px) */
@media screen and (max-width: 1024px) {
    h1 { font-size: 3rem; }
    
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-actions { justify-content: center; }
    
    .hero-visual-area { margin-top: var(--spacing-xl); }
    
    .duel-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .duel-text h2 { text-align: center; }
    
    .styled-list li {
        text-align: right; /* القوائم تظل يمين للقراءة */
        display: inline-block;
        width: 100%;
    }
}

/* Mobile (Max 768px) */
@media screen and (max-width: 768px) {
    /* Navigation */
    .mobile-menu-btn { display: block; }
    
    .main-nav {
        position: fixed;
        top: 80px;
        right: -100%; /* Hidden by default */
        width: 80%;
        height: calc(100vh - 80px);
        background-color: var(--color-dark-800);
        border-left: 1px solid var(--color-gold-500);
        padding: var(--spacing-xl);
        transition: right 0.4s ease;
        overflow-y: auto;
    }
    
    .main-nav.active { right: 0; }
    
    .nav-list {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .nav-link { 
        display: block; 
        font-size: 1.2rem;
        padding: 10px 0;
        border-bottom: 1px solid var(--color-dark-700);
    }
    
    /* Hero */
    .hero-title { font-size: 2.5rem; }
    .hero-description { font-size: 1rem; }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .btn { width: 100%; }

    /* Contact Form */
    .contact-wrapper {
        grid-template-columns: 1fr;
        padding: var(--spacing-lg);
    }
    
    .contact-info {
        padding-right: 0;
        margin-bottom: var(--spacing-xl);
        border-bottom: 1px solid var(--color-dark-600);
        padding-bottom: var(--spacing-lg);
    }
    
    .footer-bottom .container {
        flex-direction: column;
        text-align: center;
    }
}

/* Small Mobile (Max 480px) */
@media screen and (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    
    .logo-link svg { width: 140px; }
    
    .newsletter-form { flex-direction: column; }
    .newsletter-form input { width: 100%; border-radius: 4px; margin-bottom: 5px; }
    .newsletter-form button { width: 100%; border-radius: 4px; }
}

/* ==========================================================================
   CUSTOM IMAGE STYLES (ADDED FOR MA.PNG)
   تنسيقات إضافية لضبط صورة البروفايل والشعار
   ========================================================================== */

/* 1. تنسيق الصورة في شاشة التحميل */
.loader-logo-img {
    width: 120px;       /* حجم مناسب للشعار */
    height: 120px;
    object-fit: cover;  /* لملء الإطار دون مط الصورة */
    border-radius: 50%; /* جعل الصورة دائرية */
    border: 3px solid var(--color-gold-500); /* إطار ذهبي فخم */
    box-shadow: 0 0 20px rgba(204, 164, 59, 0.4); /* توهج ذهبي */
    animation: pulse 2s infinite; /* تأثير نبض بسيط */
    margin-bottom: 15px;
}

/* 2. تنسيق الصورة في كارد الهوية الشخصية */
.card-icon-img {
    width: 100%;        /* لتملأ مساحة الدائرة المخصصة */
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* تعديل بسيط لحاوية الأيقونة لتتناسب مع الصورة */
.about-card .card-icon {
    padding: 0;         /* إزالة الحواف الداخلية لتملأ الصورة المكان */
    overflow: hidden;   /* لضمان قص الصورة بشكل دائري */
    border: 2px solid var(--color-gold-500); /* إطار ذهبي للكارد */
}


/* ==========================================================================
   FIX FOR TESTIMONIAL IMAGE
   ضبط مقاس الصورة في قسم آراء العملاء
   ========================================================================== */

.client-img-fix {
    width: 50px !important;  /* إجبار العرض ليكون مثل القديم */
    height: 50px !important; /* إجبار الطول */
    border-radius: 50%;      /* جعلها دائرية */
    object-fit: cover;       /* لملء الإطار بشكل صحيح */
    border: 2px solid var(--color-gold-500); /* إطار ذهبي رفيع */
}

/* ==========================================================================
   PROJECT IMAGE STYLES
   تنسيق صور المشاريع الجديدة
   ========================================================================== */

.project-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* تضمن ملء الصورة للمربع بالكامل دون مط */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* نعومة الحركة */
}

/* تفعيل تأثير التكبير (Zoom) عند الوقوف على الكارد */
.project-card:hover .project-thumb-img {
    transform: scale(1.1);
}

/* ==========================================================================
   VENTURES SECTION & MODAL STYLES
   تنسيق قسم المشاريع التجارية والنوافذ المنبثقة
   ========================================================================== */

/* 1. Grid & Cards */
.ventures-section {
    background-color: #0a0a0a;
    position: relative;
}

.ventures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    justify-items: center;
}

.venture-card {
    background: var(--color-dark-800);
    border: 1px solid var(--color-dark-600);
    border-radius: var(--radius-lg);
    padding: 20px;
    width: 100%;
    max-width: 250px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.venture-card:hover {
    border-color: var(--color-gold-500);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(204, 164, 59, 0.15);
}

.venture-icon-box {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-dark-500);
    background: #000;
}

.venture-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.venture-card h3 {
    font-size: 1.1rem;
    color: var(--color-white);
    margin-bottom: 5px;
}

.venture-tag {
    font-size: 0.8rem;
    color: var(--color-gold-500);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 2. Modal (Popup) Styles */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.custom-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.modal-content-box {
    position: relative;
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1px solid var(--color-gold-500);
    border-radius: var(--radius-xl);
    padding: 30px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 30px rgba(204, 164, 59, 0.2);
    z-index: 1001;
}

.custom-modal.active .modal-content-box {
    transform: scale(1);
}

.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--color-dark-300);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.close-modal-btn:hover { color: var(--color-red-500); }

.modal-header { margin-bottom: 25px; }

.modal-img-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 50%;
    border: 3px solid var(--color-gold-500);
    overflow: hidden;
    background: #000;
}

.modal-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }

#vm-title { color: var(--color-gold-500); font-size: 1.5rem; margin-bottom: 5px; }
#vm-desc { color: var(--color-dark-200); font-size: 0.9rem; }

/* Social Links Grid inside Modal */
.modal-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.modal-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--color-dark-700);
    color: white;
    font-size: 0.9rem;
    transition: 0.3s;
    border: 1px solid var(--color-dark-500);
}

.modal-link-btn:hover {
    background: var(--color-dark-600);
    border-color: var(--color-gold-500);
    transform: translateY(-2px);
}

/* Brand Specific Colors for Buttons */
.modal-link-btn.facebook:hover { background: #1877F2; border-color: #1877F2; }
.modal-link-btn.instagram:hover { background: #E4405F; border-color: #E4405F; }
.modal-link-btn.whatsapp:hover { background: #25D366; border-color: #25D366; color: black; }
.modal-link-btn.tiktok:hover { background: #000000; border-color: #fff; }
.modal-link-btn.website:hover { background: var(--color-gold-500); border-color: var(--color-gold-500); color: black; }


/* Floating Chat FAB */
.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* الأزرار اللي بتطلع لفوق */
.chat-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: 0.3s ease;
}

/* حالة الفتح */
.chat-fab.active .chat-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* الزر الرئيسي */
.chat-main {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #000;
  color: #cca43b;
  border: 2px solid #cca43b;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(204,164,59,.45);
  transition: 0.25s;
}

.chat-main:hover {
  transform: scale(1.08);
}

/* أزرار واتساب وماسنجر */
.chat-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #000;
  color: #cca43b;
  border: 2px solid #cca43b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 0 16px rgba(204,164,59,.35);
  transition: 0.25s;
}

.chat-btn:hover {
  background: #cca43b;
  color: #000;
  transform: scale(1.1);
}


/* End of Stylesheet
    Developed with Passion by Mahmoud Ibrahim
*/