:root {
            --main-color: #0056b3; 
            --accent-color: #ff6b00; 
            --dark-color: #0d1b2a;
            --light-bg: #f8fbff;
            --white: #ffffff;
            --text-main: #333333;
            --text-muted: #666666;
            --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            --shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        body {
            font-family: 'Cairo', sans-serif;
            background-color: var(--light-bg);
            color: var(--text-main);
            overflow-x: hidden;
            line-height: 1.8;
        }

        /* -------------------------------------------------------------------------- */
        /* 1. Hero Section (الإنترو - تعديل الموبايل: الصورة فوق الكلام) */
        /* -------------------------------------------------------------------------- */
        .hero-section {
            padding: 60px 0;
            background: linear-gradient(135deg, var(--white) 0%, #eef5ff 100%);
            min-height: 60vh;
            display: flex;
            align-items: center;
        }

        .hero-image svg {
            max-width: 100%;
        
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-25px) rotate(1deg); }
        }

        .btn-custom {
            padding: 15px 40px;
            border-radius: 50px;
            font-weight: 700;
            transition: var(--transition);
            text-decoration: none;
            display: inline-block;
        }
        .btn-main { background: var(--main-color); color: white; }
        .btn-accent { background: var(--accent-color); color: white; }
        .btn-custom:hover { transform: scale(1.08); box-shadow: 0 10px 20px rgba(0,0,0,0.15); color: white; }

        @media (max-width: 768px) {
            .hero-section .row { flex-direction: column-reverse; } /* الصورة فوق النص */
            .hero-image { margin-bottom: 50px; }
            .hero-content { text-align: center; }
        }

        /* -------------------------------------------------------------------------- */
        /* 2. Section Titles & Utilities */
        /* -------------------------------------------------------------------------- */
        .section-padding { padding: 100px 0; }
        .section-title { text-align: center; margin-bottom: 70px; }
        .section-title h2 { font-weight: 900; font-size: 2.5rem; color: var(--dark-color); }
        .section-title span { color: var(--accent-color); }
        
        .card-box {
            background: var(--white);
            padding: 45px;
            border-radius: 20px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 1px solid rgba(0,0,0,0.03);
            height: 100%;
        }
        .card-box:hover { transform: translateY(-15px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

        /* -------------------------------------------------------------------------- */
        /* 3. Comparison Section (تسويق تقليدي vs إلكتروني) */
        /* -------------------------------------------------------------------------- */
        .vs-box {
            background: var(--dark-color);
            color: white;
            border-radius: 25px;
            padding: 50px;
            position: relative;
            overflow: hidden;
        }
        .vs-badge {
            background: var(--accent-color);
            padding: 10px 20px;
            border-radius: 10px;
            font-weight: bold;
            display: inline-block;
            margin-bottom: 20px;
        }

        /* -------------------------------------------------------------------------- */
        /* 4. The "Connection" Logic (السوشيال ميديا والموقع) */
        /* -------------------------------------------------------------------------- */
        .connect-line {
            height: 4px;
            background: var(--main-color);
            width: 100%;
            position: relative;
            margin: 40px 0;
        }
        .connect-dot {
            width: 20px;
            height: 20px;
            background: var(--accent-color);
            border-radius: 50%;
            position: absolute;
            top: -8px;
            left: 50%;
        }

        /* -------------------------------------------------------------------------- */
        /* 5. Icon Styling */
        /* -------------------------------------------------------------------------- */
        .icon-circle {
            width: 80px;
            height: 80px;
            background: rgba(0, 86, 179, 0.05);
            color: var(--main-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 35px;
            margin-bottom: 25px;
        }

        /* -------------------------------------------------------------------------- */
        /* 6. Massive Content Padding for Scroll Effect */
        /* -------------------------------------------------------------------------- */
        .content-block { margin-bottom: 120px; }