Update index.html

index.html

@@ -44,6 +44,7 @@
             height: 50px;
             margin-left: 1rem;
             transition: transform 0.3s;
+            filter: brightness(0) invert(1);
         }
 
         .nav-logo img:hover {
@@ -98,10 +99,11 @@
         }
 
         .hero {
+            background-color: #333;
             padding: 4rem 2rem;
             text-align: center;
-            max-width: 1200px;
-            margin: 0 auto;
+            width: 100%;
+            margin: 0;
         }
 
         .hero-content {
@@ -110,17 +112,20 @@
             justify-content: space-between;
             gap: 2rem;
             margin-bottom: 4rem;
+            max-width: 1200px;
+            margin: 0 auto;
         }
 
         .hero-text {
             flex: 1;
             text-align: right;
+            color: white;
         }
 
         .hero-image {
             flex: 1;
             position: relative;
-            background-color: #ff7961;
+            background-color: transparent;
             border-radius: 10px;
             padding: 2rem;
             transition: transform 0.3s;
@@ -133,6 +138,7 @@
         .logo {
             width: 300px;
             animation: pulse 2s infinite;
+            filter: brightness(0) invert(1);
         }
 
         @keyframes pulse {
@@ -144,12 +150,12 @@
         h1 {
             font-size: 3rem;
             margin-bottom: 1rem;
-            color: #333;
+            color: white;
         }
 
         .subtitle {
             font-size: 1.2rem;
-            color: #666;
+            color: rgba(255, 255, 255, 0.9);
             margin-bottom: 2rem;
         }
 
@@ -168,23 +174,23 @@
         }
 
         .button-primary {
-            background-color: #333;
+            background-color: #ff7961;
             color: white;
         }
 
         .button-primary:hover {
-            background-color: #444;
+            background-color: #ff6347;
             transform: translateY(-2px);
         }
 
         .button-secondary {
-            border: 2px solid #333;
-            color: #333;
+            border: 2px solid white;
+            color: white;
         }
 
         .button-secondary:hover {
-            background-color: #333;
-            color: white;
+            background-color: white;
+            color: #333;
             transform: translateY(-2px);
         }
 
@@ -194,6 +200,9 @@
             gap: 2rem;
             text-align: center;
             margin-top: 4rem;
+            padding: 4rem 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
         }
 
         .capability {
@@ -267,6 +276,10 @@
             text-align: right;
         }
 
+        .featured-text h2 {
+            color: #333;
+        }
+
         @media (max-width: 768px) {
             .nav-container {
                 flex-direction: column;
@@ -314,6 +327,7 @@
             .capabilities {
                 grid-template-columns: repeat(2, 1fr);
                 gap: 1rem;
+                padding: 2rem 1rem;
             }
 
             .buttons {
@@ -378,31 +392,31 @@
                 <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="شعار الذكاء الاصطناعي" class="logo">
             </div>
         </div>
-
-        <section class="capabilities">
-            <div class="capability">
-                <div class="icon">🧠</div>
-                <h2>تفكير متقدم</h2>
-                <p>قدرات تحليلية وإدراكية متطورة</p>
-            </div>
-            <div class="capability">
-                <div class="icon">👁️</div>
-                <h2>تحليل الصور</h2>
-                <p>فهم وتحليل المحتوى البصري</p>
-            </div>
-            <div class="capability">
-                <div class="icon">💻</div>
-                <h2>برمجة ذكية</h2>
-                <p>إنشاء وتحليل التعليمات البرمجية</p>
-            </div>
-            <div class="capability">
-                <div class="icon">🌐</div>
-                <h2>دعم متعدد اللغات</h2>
-                <p>معالجة وترجمة بين اللغات المختلفة</p>
-            </div>
-        </section>
     </main>
 
+    <section class="capabilities">
+        <div class="capability">
+            <div class="icon">🧠</div>
+            <h2>تفكير متقدم</h2>
+            <p>قدرات تحليلية وإدراكية متطورة</p>
+        </div>
+        <div class="capability">
+            <div class="icon">👁️</div>
+            <h2>تحليل الصور</h2>
+            <p>فهم وتحليل المحتوى البصري</p>
+        </div>
+        <div class="capability">
+            <div class="icon">💻</div>
+            <h2>برمجة ذكية</h2>
+            <p>إنشاء وتحليل التعليمات البرمجية</p>
+        </div>
+        <div class="capability">
+            <div class="icon">🌐</div>
+            <h2>دعم متعدد اللغات</h2>
+            <p>معالجة وترجمة بين اللغ��ت المختلفة</p>
+        </div>
+    </section>
+
     <section class="featured-section">
         <div class="featured-content">
             <div class="featured-image">