@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

 html {
     scroll-behavior: smooth;
     /* تجعل التنقل بين السكاشن ناعماً */
 }

 * {
     padding: 0;
     margin: 0;
     list-style: none;
 }

 /* 1. إخفاء الزر تماماً في شاشات الكمبيوتر */
 .menu-toggle {
     display: none;
 }

 .show {
     display: block !important;
 }

 .navbar {
     position: relative;
     /* أو fixed/sticky */
     z-index: 10000 !important;

 }

 body {
     font-family: "Open Sans", arial;
 }

 /* الحجم الافتراضي لكل سكشن h2 في الموقع */
 h2 {
     font-size: 2.8rem !important;
     /* حجم موحد للشاشات الكبيرة */
     font-weight: 700;
     text-transform: uppercase;
     /* لجعل الحروف كبيرة كما في Nestify */
     letter-spacing: 1.5px;
     margin-bottom: 20px;

     color: #ffffff;
 }

 /* للشاشات المتوسطة (Tablets) */
 @media (max-width: 768px) {
     h2 {
         font-size: 2.2rem !important;
     }
 }

 /* للشاشات الصغيرة (Mobile) */
 @media (max-width: 480px) {
     h2 {
         font-size: 1.8rem !important;
         /* حجم مثالي للموبايل يمنع تكسر السطور */
         letter-spacing: 1px;
         margin-bottom: 15px;
     }
 }

 .navbar {


     top: 0;
     position: fixed;
     width: 100%;

     padding-bottom: 15px;
     overflow: hidden;
     background-color: rgb(32, 29, 29);




 }

 .navbar {
     display: flex;
     justify-content: space-between;
     /* هذا السطر سيدفع اللوجو لليسار والنصوص لليمين */
     align-items: center;
     padding: 5px 5%;
     /* يعطي مساحة جانبية لكي لا يلتصق اللوجو بحافة الشاشة */
     background-color: #1a1a1a;
     /* لون الخلفية حسب الصورة */
     width: 100%;
     box-sizing: border-box;
 }

 /* تأمين حاوية القائمة */
 .dropdown {
     position: relative;
     display: inline-block;
 }

 /* القائمة المنسدلة */
 .dropdown-content {
     display: none;
     /* مخفية افتراضياً */
     position: absolute;
     background-color: #272626;

     box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
     /* z-index عالي جداً لضمان الظهور فوق السلايدر والفيديو */
     z-index: 999999 !important;
     list-style: none;
     padding-top: 5px;
     padding-bottom: 5px;
     /* نؤكد المحاذاة داخل الرابط نفسه */
     text-align: left !important;

     border-radius: 8px;
     top: 100%;
     left: 0;
     margin-top: 5px;
 }

 .dropdown-content {
     display: none;
     position: absolute;
     /* أضف تنسيقاتك الخاصة هنا مثل background-color و box-shadow */
 }

 /* إظهار القائمة عند عمل Hover على الـ li الأب */
 .dropdown:hover .dropdown-content {
     display: block;
 }

 /* الكلاس الذي سيتم إضافته عند الضغط */
 .show {
     display: block !important;
 }

 /* تنسيق الروابط داخل القائمة */
 .dropdown-content li a {
     color: #333;
     padding: 12px 20px;
     text-decoration: none;
     display: block;
     font-size: 15px;
     /* نؤكد المحاذاة داخل الرابط نفسه */
     text-align: left !important;

 }

 .dropdown-content li a:hover {
     background-color: #645a5a;

 }

 /* حل مشكلة الاختفاء تحت الهيدر */
 .navbar,
 .nav,
 .nav-list {
     overflow: visible !important;
     /* ضروري لكي لا يختفي الدروب داون */
 }


 .header .eng {
     padding-top: 2px;
     width: 90px;
     height: 30px;




 }

 .header li {
     list-style: none;
     /* التأكيد على إزالة النقاط */
     display: inline-block;
     /* بدلاً من float لجعل العناصر بجانب بعضها بانتظام */
     margin: 0 15px;
     /* مسافة جانبية بين كل كلمة وأخرى */
 }

 .header li a {
     text-decoration: none;
     color: aliceblue;
     font-size: 16px;
     /* حجم خط مناسب */
     white-space: nowrap;
     /* منع النص من النزول لسطر جديد */
 }

 /* ضبط الحاوية الخاصة بالقائمة */
 .nav {
     text-align: right;
     /* لجعل القائمة تظهر جهة اليمين */
     padding-right: 50px;

     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);


 }

 .side {
     position: fixed;
     background-color: #fff;
     width: 40px;
     height: 80px;
     right: 0;
     top: 30%;
     text-align: center;
     border-radius: 4px;


 }

 .side .fa-solid {
     color: #4b4b4b;
     margin-bottom: 28px;
     font-size: 20px;
     padding-top: 5px;
 }

 .header-contact {
     padding-top: 240px;
     padding-left: 60px;



 }

 .header {
     position: relative;
     height: 100vh;
     width: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     text-align: center;
     color: aliceblue;
 }

 .back-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
     filter: brightness(0.55);
     /* تعتيم الفيديو مباشرة */
 }

 /* طبقة تظليل إضافية (Overlay) */
 .header::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
     z-index: 1;
 }

 .header-contact {
     position: relative;
     z-index: 2;
     padding-top: 240px;
     padding-left: 60px;
 }

 /* رفع المحتوى فوق الفيديو */
 .navbar,
 .side,
 .header-contact {
     position: relative;
     z-index: 1;
 }

 /* طبقة تظليل اختيارية لجعل النص أوضح */
 .header::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     z-index: 0;
 }






 .nav .fa-solid {
     padding-left: 19px
 }

 h1 {

     font-size: 80px;
     font-family: 'Alegreya Sans', sans-serif;
     font-weight: 400px;
     line-height: 81.2px;
     display: block;
     font-family: "Open Sans", arial;
     font-size: 120px;
     font-weight: bold;
     margin-bottom: 30px;
     margin-top: 20px;



 }

 .wel {
     font-family: "Open Sans", arial;
     font-size: 22px;


 }

 .header p {

     display: block;
     font-family: "Open Sans", arial;
     font-size: 50px;
     font-weight: bold;
     margin-bottom: 40px;


     line-height: 45px;
     text-align: center;

 }

 .btn {
     padding: 15px 15px;
     background-color: rgb(255, 255, 255);
     border-radius: 10px;

     width: 170px;
     height: 60px;

     border: none;
     font-family: "Open Sans", arial;
     font-size: 15px;
     font-weight: 700;
     height: 53.5px;
     letter-spacing: 0.2px;
     line-height: 19.5px;

     padding-bottom: 15px;

     padding-right: 28px;

     position: relative;


 }

 .btn-learn:hover {
     background-color: rgb(179, 152, 31);
 }

 .download-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     margin-top: 20px;
     padding: 12px 25px;
     background-color: transparent;
     color: #ffffff;
     border: 2px solid #ffffff;
     border-radius: 5px;
     text-decoration: none;
     font-weight: bold;
     transition: 0.3s all ease;
     cursor: pointer;
 }

 .download-btn i {
     font-size: 1.2rem;
 }

 .download-btn:hover {
     background-color: #ffffff;
     color: #000000;
     transform: translateY(-3px);
     /* حركة بسيطة للأعلى عند الوقوف بالماوس */
 }






 /* end home */
 /* start whoo */
 .about {
     background-color: #1a1818;
     width: 100%;
     min-height: 100vh;
     display: flex;
     margin: 0;
     padding: 0;
     overflow: hidden;
     /* لمنع أي تمرير عرضي غير مرغوب فيه */
 }

 .about-container {
     display: flex;
     width: 100%;
     margin: 0;
     padding: 0;
 }

 /* قسم النص - يأخذ 50% من المساحة */
 .about .learn-about {
     flex: 0 0 50%;
     /* تحديد العرض بنسبة 50% ثابتة */
     padding: 5% 5% 5% 8%;
     color: #fff;
     display: flex;
     flex-direction: column;
     justify-content: center;
     box-sizing: border-box;
     /* لضمان عدم تأثير الـ padding على العرض */
 }

 /* قسم الصورة (الحمام) - يأخذ 50% من المساحة ويبدأ من الطرف */
 .about .imga {
     flex: 0 0 50%;
     /* تحديد العرض بنسبة 50% ثابتة لتمتد للطرف */
     background-image: url('../img/header1.PNG');
     background-size: cover;
     /* تجعل الصورة تملأ المساحة بالكامل */
     background-position: center;
     background-repeat: no-repeat;
     min-height: 100vh;
     /* لتأخذ كامل ارتفاع الشاشة */
     margin: 0;
     padding: 0;
 }

 .about .learn-about h2 {
     font-size: 3rem;
     font-weight: 400;
     letter-spacing: 2px;
     margin-bottom: 20px;
     text-transform: uppercase;
 }

 .title-line {
     width: 80px;
     border: 1px solid #fff;
     margin: 0 0 40px 0;
 }

 .about .learn-about p {
     font-size: 1.2rem;
     line-height: 1.8;
     max-width: auto;
     /* تم تكبيره قليلاً ليتناسب مع نصف الشاشة الجديد */
     color: #f1f1f1;
 }



 /* سكشن Who we are: النص يخرج من اليسار والصورة من اليمين */
 #about .learn-about {
     opacity: 0;
     transform: translateX(-80px);
     transition: all 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 #about .imga {
     opacity: 0;
     transform: translateX(80px);
     transition: all 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 /* سكشن What we do: الصورة تخرج من اليسار والنص من اليمين (عكس اللي فوقه) */
 .what .what-image {
     opacity: 0;
     transform: translateX(-80px);
     transition: all 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 .what .what-text {
     opacity: 0;
     transform: translateX(80px);
     transition: all 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 /* كلاس التفعيل الذي سيضيفه الجافاسكربت */
 .about .learn-about.reveal-now,
 .about .imga.reveal-now,
 .what .what-image.reveal-now,
 .what .what-text.reveal-now {
     opacity: 1 !important;
     transform: translateX(0) !important;
 }

 @media (max-width: 768px) {

     /* 1. الحاوية الرئيسية: نلغي أي هوامش ونضمن العرض الكامل */
     .about {
         position: relative;
         width: 100% !important;
         height: 100vh !important;
         margin: 0 !important;
         padding: 0 !important;
         overflow: hidden;
         display: block;
     }

     /* 2. حاوية العناصر: نلغي الـ flex القديم ونستخدمه فقط للتوسيط */
     .about-container {
         width: 100% !important;
         height: 100% !important;
         display: flex !important;
         align-items: center;
         /* توسيط عمودي */
         justify-content: center;
         /* توسيط أفقي */
         margin: 0 !important;
         padding: 0 !important;

     }

     /* 3. الصورة: نلغي الـ float ونمدها لتغطي كامل المساحة خلف النص */
     .about .imga {
         position: absolute;
         top: 0;
         left: 0;
         width: 100% !important;
         /* تمدد كامل لإزالة الجزء الرمادي */
         height: 100% !important;
         background-image: url('../img/header1.PNG');
         background-size: cover;
         background-position: center;
         z-index: 1;
         float: none !important;
         /* ضروري لإلغاء الإزاحة الجانبية */
     }

     /* 4. حاوية النص: نضمن أنها فوق الصورة وفي المنتصف تماماً */
     .about .learn-about {
         position: relative;
         z-index: 2;
         width: 100% !important;
         /* تأخذ العرض الكامل للتوسيط */
         text-align: center;
         padding: 20px;
         margin: 0 !important;
         float: none !important;
         /* إلغاء أي إزاحة قديمة */
         display: flex;
         flex-direction: column;
         align-items: center;

     }

     /* 5. العناوين والنصوص: توسيط كامل ومنع انكسار السطر */
     .about .learn-about h2 {
         color: #fff;
         font-size: 2.2rem;
         text-transform: uppercase;
         white-space: nowrap;
         /* منع العنوان من النزول لسطر جديد */
         margin-bottom: 5px;
         text-align: center;
     }

     .title-line {
         width: 100px;
         border: 1px solid #fff;
         margin: 10px auto 25px auto !important;
         /* التوسيط بالـ auto */
     }

     .about .learn-about p {
         color: #fff;
         font-size: 1.1rem;
         line-height: 1.6;
         max-width: 90%;
         margin: 0 auto !important;
         /* توسيط الفقرة تماماً */
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
         text-align: center;
     }
 }

 /* start about2 */
 .about .imga2 {
     float: left;
     width: 50%;
     background-image: url('../img/about.png');
     background-size: cover;
     height: 100vh;


 }

 /*  system and tecnology النقاط */
 /* تنسيق القسم ليكون 50/50 ///////////////////////////////////////////////////////*/
 .system.about .learn-about {
     flex: 0 0 50%;
     /* نصف الشاشة بالضبط */
     background-color: #141313;
     /* نفس لون خلفية الأقسام السابقة */

     padding: 5% 5% 5% 8%;
     box-sizing: border-box;
 }

 .system.about .imga2 {
     flex: 0 0 50%;
     /* النصف الآخر للصورة */
     background-image: url('../img/about.png');
     /* ضعي مسار صورتك هنا */
     background-size: cover;
     background-position: center;
     min-height: 100vh;
     background-color: #141313;
     /* نفس لون خلفية الأقسام السابقة */

 }

 /* تنسيق القائمة لتشبه الأقسام السابقة */
 .services-list {
     list-style: none;
     padding: 0;
     margin-top: 20px;
 }

 .services-list li {
     color: #f1f1f1;
     font-size: 1.1rem;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
 }

 .services-list li::before {
     content: "•";
     /* نقطة أنيقة */
     color: #fff;
     margin-right: 10px;
     font-weight: bold;
 }


 @media (max-width: 768px) {
     .system.about {
         position: relative;
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .system.about .about-container {
         flex-direction: column;
         width: 100%;
     }

     /* تحويل الصورة لتكون خلفية للقسم بالكامل */
     .system.about .imga2 {
         position: absolute;
         top: 0;
         left: 0;
         width: 100vw !important;
         /* تغطية عرض الشاشة بالكامل */
         height: 100vh !important;
         z-index: 1;
         opacity: 0.4;
         /* تقليل الشفافية لبروز النص */
         float: none !important;
     }

     .system.about .learn-about {
         position: relative;
         z-index: 2;
         /* النص فوق الصورة */
         width: 100% !important;
         background: transparent;
         /* إزالة الخلفية السوداء لتظهر الصورة */
         text-align: center;
         padding: 40px 20px;
         align-items: center;
     }

     .system.about .learn-about h2 {
         font-size: 2.2rem;
         white-space: nowrap;
         /* العنوان في سطر واحد */
     }

     .services-list {
         text-align: left;
         /* الحفاظ على محاذاة القائمة لليسار لسهولة القراءة */
         display: inline-block;
     }

     .services-list li {
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
         /* وضوح النص فوق الخلفية */
     }

     .system.about .learn-about h2 {
         font-size: 1.8rem;
         /* حجم مناسب للموبايل لمنع انكسار الكلمات */
         font-weight: 400;
         letter-spacing: 1px;
         color: #ffffff;
         margin-bottom: 10px;
         text-transform: uppercase;
         white-space: normal;
         /* السماح بالنزول لسطر جديد إذا كان العنوان طويلاً جداً */
         width: 90%;
         /* ضمان وجود مسافة عن الحواف */
     }
 }


 .what {
     background-color: #1a1818;
     color: #fff;
     width: 100%;
     min-height: 100vh;
     /* جعل الارتفاع يغطي الشاشة بالكامل مثل قسم About */
     display: flex;
     margin: 0;
     padding: 0;
     overflow: hidden;
 }

 .what-content {
     display: flex;
     width: 100%;
     margin: 0;
     padding: 0;
 }

 .what-text {
     flex: 0 0 50%;
     /* تحديد نصف مسافة الشاشة بالضبط للنص */
     padding: 5% 5% 5% 8%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     box-sizing: border-box;
 }

 .what-text h2 {
     font-size: 3rem;
     font-weight: 400;
     letter-spacing: 2px;
     margin-bottom: 20px;
     text-transform: uppercase;
 }

 .title-line {
     width: 80px;
     border: 1px solid #fff;
     margin: 0 0 40px 0;
 }

 .what-text p {
     font-size: 1.2rem;
     line-height: 1.8;
     max-width: auto;
     /* زيادة العرض قليلاً ليتناسب مع التقسيم الجديد */
     color: #f1f1f1;
 }

 .what-image {
     flex: 0 0 50%;
     /* تحديد نصف مسافة الشاشة بالضبط للصورة */
     margin: 0;
     padding: 0;
     height: 100vh;
     /* لضمان أن الصورة تملأ كامل الارتفاع عمودياً */
 }

 .what-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* ملء المساحة بالكامل بدون ترك فراغات رمادية */
     display: block;
     /* إلغاء أي فجوة تحت الصورة */
 }

 /* تنسيق خاص للجوال لضمان التوافق */
 @media (max-width: 768px) {
     .what-content {
         flex-direction: column;
         /* جعل الصورة تحت النص في الجوال */
     }

     .what-text {
         padding: 50px 20px;
         text-align: center;
     }

     .title-line {
         margin: 0 auto 30px auto;
         /* توسيط الخط في الجوال */
     }

     .what-image {
         height: 200px;

     }

     .what {
         padding-top: 2rem;
     }
 }



 /*3d*/
 .image-section {
     text-align: center;
     /* لتوسيط الفيديو إذا كان داخل div */
     padding: 10px;
 }

 .main-panel {
     width: 70%;
     /* يمكنك تغيير هذه النسبة حسب الرغبة (50% أو 70%) */
     max-width: 600px;
     /* تحديد حد أقصى للعرض بالبكسل لضمان عدم كبره في الشاشات الضخمة */
     height: auto;
     /* للحفاظ على أبعاد الفيديو (النسبة بين الطول والعرض) */
     border-radius: 25px;
     /* اختيارياً: لإضافة زوايا ناعمة */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     /* اختيارياً: لإضافة ظل جمالي */
 }




 /* /* الحاوية الرئيسية */
 .bestsealler {
     background-color: rgb(0, 0, 0);
     padding-bottom: 80px;
 }

 .bestsealler h2 {
     text-align: center;
     padding-top: 90px;
     color: #fff;
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .bestsealler p {
     width: 50%;
     /* تكبير عرض الفقرة قليلاً للتناسب مع الشاشة */
     text-align: center;
     margin: 0 auto 60px auto;
     line-height: 1.6;
     color: #b1b1b1;
 }

 /* توزيع العناصر باستخدام Flexbox */
 .items {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 2px;
     /* مسافة بين المنتجات */
     max-width: 2000px;
     margin: auto;
 }

 /* بطاقة المنتج الواحدة */
 .bestsealler .i {
     position: relative;


     width: 500px;
     height: 320px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 /* تنسيق الصورة - تكبير دون تغيير الأبعاد */
 .bestsealler .i img {
     width: 90%;
     height: auto;
     /* الحفاظ على النسبة الأصلية للصورة */
     transition: transform 0.5s ease;
     object-fit: contain;
 }

 /* طبقة التعتيم والاسم عند الـ Hover */
 .bestsealler .buy {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     /* تعتيم أسود */
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     /* مخفي افتراضياً */
     transition: opacity 0.4s ease;
     z-index: 2;
 }

 .bestsealler .buy a {
     color: #fff;
     text-decoration: none;
     font-size: 1.1rem;
     text-align: center;
     /* تحويل الرابط لشكل كبسة */
     padding: 12px 25px;
     background-color: transparent;
     /* خلفية شفافة */

     transition: all 0.3s ease;
     /* حركة ناعمة عند التفاعل */
     display: inline-block;
     /* لضمان عمل الـ padding والـ width */
     font-weight: 500;
     pointer-events: auto;
     /* تفعيل الضغط على الكبسة */
 }

 /* تأثير عند تمرير الماوس على الكبسة نفسها */
 .bestsealler .buy a:hover {
     background-color: #000000;
     /* تحول الخلفية للأبيض عند الهوفر */
     color: #fffbfb;
     /* تحول النص للأسود ليظهر بوضوح */
 }



 /* تأثيرات الماوس */
 .bestsealler .i:hover .buy {
     opacity: 1;
     /* إظهار التعتيم والاسم */
 }

 .bestsealler .i:hover img {
     transform: scale(1.1);
     /* تكبير بسيط للصورة */
 }



 /* استهداف الكروت داخل سكشن الحلول ////////////////////////*/
 .bestsealler .items .i {
     opacity: 0;
     /* تبدأ من اليمين (50px) لتتحرك نحو اليسار */
     transform: translateX(50px);
     /* مدة الحركة 2 ثانية لجعلها بطيئة جداً وانسيابية */
     transition: opacity 2.0s cubic-bezier(0.2, 1, 0.3, 1),
         transform 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 /* الحالة عند الظهور */
 .bestsealler .items .i.reveal-now {
     opacity: 1 !important;
     transform: translateX(0) !important;
 }

 /* حاوية التعتيم - التوسط الكامل */
 .bestsealler .buy {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.65);
     /* تعتيم متوازن لرؤية المنتج خلف الكبسة */
     display: flex;
     align-items: center;
     /* توسيط عمودي مثالي */
     justify-content: center;
     /* توسيط أفقي مثالي */
     opacity: 0;
     /* مخفي افتراضياً في كل الشاشات */
     transition: opacity 0.4s ease;
     z-index: 5;
     pointer-events: none;
     /* يسمح بالضغط على الصورة تحتها */
 }

 /* الكبسة بداخل السنتر */
 .bestsealler .buy a {
     color: #fff;
     text-decoration: none;
     font-size: 1.1rem;
     padding: 12px 25px;
     background-color: transparent;

     font-weight: bold;
     pointer-events: auto;
     /* تفعيل الضغط على الكبسة */
 }

 /* إظهار الكبسة عند الهوفر (للكمبيوتر) وعند اللمس (للجوال) */
 .bestsealler .i:hover .buy,
 .bestsealler .i:active .buy {
     opacity: 1;
     /* تظهر فقط عند التفاعل */
 }



 @media (max-width: 768px) {

     /* الخلفية الرئيسية للقسم تظل سوداء داكنة */
     .bestsealler {

         padding: 40px 5px;
     }

     /* توزيع المنتجات (2 في كل صف) */
     .items {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 10px;
         /* تقليل المسافة لزيادة عرض الكروت */
     }

     /* الكارد: إزالة الخلفية الرمادية وجعلها شفافة */
     .bestsealler .i {
         background-color: transparent !important;
         /* إزالة الرمادي تماماً */
         width: calc(48% - 5px);
         /* الحفاظ على منتجين في الصف */
         height: 300px;

         position: relative;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /* توسيط الصورة في المنتصف */
         overflow: hidden;

     }

     /* تنسيق الصورة لتتوسط الكارد */
     .bestsealler .i img {
         width: 85%;
         height: auto;
         max-height: 500px;
         object-fit: contain;
         background-color: transparent !important;
         margin-top: 20px;
         /* موازنة المسافة مع النص العلوي */
     }

     /* محاذاة اسم المنتج في الأعلى */
     .bestsealler .buy {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 60px;
         background: transparent;
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 2;
     }

     .bestsealler .i {
         width: calc(48% - 10px);
         /* صورتين حد بعض بدون تداخل */
         height: 250px;
         /* ارتفاع متناسق للجوال */
     }

     /* ضمان التوسط حتى لو صغر حجم الكارد */
     .bestsealler .buy a {
         font-size: 0.85rem;
         padding: 8px 16px;
         border-width: 1px;
     }

     .bestsealler .i {
         height: 220px;
         /* تقليل الارتفاع ليناسب الجوال */
     }

     .bestsealler .buy a {
         font-size: 0.85rem;
         /* تصغير الخط ليناسب الكروت الصغيرة */
         padding: 8px 16px;

     }
 }

 /* ضبط الموبايلات الصغيرة جداً لضمان بقاء منتجين في الصف */
 @media (max-width: 800px) {

     /* الحاوية: تصفير أي هوامش جانبية وتوسيط العناصر */
     .items {
         display: flex !important;
         flex-wrap: wrap !important;
         flex-direction: row !important;
         justify-content: center !important;
         /* توسيط الكروت أفقيًا */
         align-items: flex-start !important;
         gap: 10px !important;
         /* مسافة بسيطة بين الكرتين */
         padding: 0 !important;
         margin: 0 auto !important;
         width: 100% !important;
     }

     /* الكارد: ضبط العرض ليكون موسطاً وبدون خلفية */
     .bestsealler .i {
         background-color: transparent !important;
         /* إزالة الرمادي */
         width: 46% !important;
         /* عرض يسمح بظهور اثنين بجانب بعضهما في الوسط */
         height: 250px !important;
         float: none !important;
         /* إزالة أي انزياح قديم لليسار */
         margin: 0 !important;
         /* تصفير المارجن ليعمل الـ gap بشكل صحيح */
         display: flex !important;
         flex-direction: column !important;
         align-items: center !important;
         justify-content: center !important;

         position: relative !important;
     }

     /* الصورة: موسطة تماماً */
     .bestsealler .i img {
         width: 90% !important;
         height: auto !important;

         margin: 40px auto 0 auto !important;
         /* دفعها لوسط الكارد */
         display: block !important;
     }

     /* النص: موسط في الأعلى */
     .bestsealler .buy {
         position: absolute !important;
         top: 0 !important;
         width: 100% !important;
         height: 80px !important;
         background: transparent !important;
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
     }

     .bestsealler .buy a {
         font-size: 0.75rem !important;
         text-align: center !important;
         width: 100% !important;
         padding: 0 5px !important;
     }

     .bestsealler .i {
         height: 220px;
         /* تقليل الارتفاع ليناسب الجوال */
     }

     .bestsealler .buy a {
         font-size: 0.85rem;
         /* تصغير الخط ليناسب الكروت الصغيرة */
         margin-top: 95%;
         margin-right: 30%;


     }
 }

 */

 /* --- تنسيق الشاشات الكبيرة (الأساسي) productttttttttttttttttttttttt--- */
 /* --- تنسيق الحاوية (الأب) --- */
 .items {
     display: flex;
     flex-wrap: wrap;

     gap: 50px;
     /* مسافة ثابتة وصغيرة للجوال */
     padding: 50px;


 }

 /* --- تنسيق الكرت (الابن) --- */
 .i {
     text-decoration: black;


     border-radius: 15px;
     padding: 20px 50px;
     margin: 30px;

     /* الحسبة الدقيقة لضمان 2 في كل صف */
     /* العرض هو (نصف الشاشة) ناقص (نصف مسافة الـ gap) */
     width: calc(40% - 50px);

     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
     min-height: 200px;
     /* توحيد الطول لضمان الاستقامة */
     box-sizing: border-box;
     /* ضروري جداً لضمان عدم خروج العنصر عن العرض */
     transition: all 0.4s ease;

 }

 /* --- تأثير الـ Hover --- */
 .i:hover {
     border-color: #f3f1e7;
     background-color: #000000;
 }

 .icon-display {
     font-size: 40px;
     color: #ffcc00;
     margin-top: 10px;
 }

 .buy {
     width: 100%;
     background-color: #ffcc00;
     padding: 8px 0;
     border-radius: 6px;
     margin-top: auto;
     /* يدفع الزر للأسفل مهما كان طول النص فوقه */
     transition: all 0.4s ease;
 }

 .buy span {
     color: #000;
     font-weight: bold;
     font-size: 13px;
     display: block;
     background-color: #1b1a1a;
     transition: all 0.3s ease;
     padding: 10px;
     border-radius: 10px;
 }

 /* --- تأثير الهوفر المطلوب --- */
 .i:hover .buy {
     background-color: transparent;
     transform: translateY(8px);
     /* تحريك للأسفل */
 }

 .i:hover .buy span {
     color: #fff8f8;
     /* اللون أبيض */
     font-size: 1.5rem;
     /* تكبير النص */

 }

 /* --- تعديل خاص للجوالات الصغيرة لتكبير الصور --- */
 @media (max-width: 1400px) {
     .items {
         padding: 10px;
         /* تقليل المسافة الخارجية للحاوية */
         gap: 20px;
         /* تقليل الفراغ بين الكروت */
     }

     .i {
         width: calc(50% - 20px);
         /* ضمان بقاء عنصرين بجانب بعض بشكل أرتب */
         padding: 5px;
         /* تقليل البادينج الداخلي لتوفير مساحة للصورة */
         margin: 5px;
         /* تقليل المارجن */
         min-height: 200px;
         /* تقليل الارتفاع الأدنى */
     }

     .i .glass {
         width: 90% !important;
         /* تكبير الصورة لتأخذ معظم عرض الكرت */
         height: auto;
         max-height: 250px;
         /* تحديد أقصى طول عشان ما يخرب التصميم */
         object-fit: contain;
         /* الحفاظ على أبعاد الصورة بدون تمطيط */
         margin-bottom: 10px;
         /* مسافة بسيطة تحت الصورة */
     }

     .buy span {
         font-size: 11px;
         /* تصغير نص الزر قليلاً ليناسب الحجم الجديد */
         padding: 8px;
     }
 }

 /*START COMPATABILITY*/
 /* الأكواد الأساسية اللي عندك مع تعديلات بسيطة للتحكم */
 .compatibility {
     background-color: #1b1a1a;
     padding: 100px 5%;
     color: #fff;
     overflow: hidden;
     /* لمنع أي خروج للعناصر عن الشاشة */
 }

 .compatibility .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     max-width: 1300px;
     margin: 0 auto;
     gap: 40px;
 }

 .comp-text {
     flex: 1;
 }

 .comp-text h1 {
     font-size: 3.2rem;
     letter-spacing: 2px;
     margin-bottom: 10px;
     font-weight: 400;
 }

 .comp-text .line {
     width: 140px;
     height: 2px;
     background-color: #fff;
     margin-bottom: 30px;
 }

 .comp-text p {
     font-size: 1.1rem;
     line-height: 1.6;
     color: #e0e0e0;
 }

 .comp-grid-box {
     flex: 1.2;
     padding: 20px;
     /* تقليل البادينج قليلاً */
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .all-logos-img {
     width: 100%;
     height: auto;
     object-fit: contain;
 }







 /* تنسيق القسم الرئيسي */
.partners-section {
    padding: 80px 20px;
    text-align: center;
    background-color: #1b1a1a; /* نفس اللون في الصورة */
    color: #ffffff;
}

/* حاوية الشعارات باستخدام Flexbox */
.logos-wrapper {
    display: flex;
    flex-wrap: wrap; /* للسماح بالنزول لسطر جديد */
    justify-content: center; /* توسيط الشعارات في الصف الأخير */
    align-items: center;
    gap: 15px; /* المسافة بين الشعارات */
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 15px;
}

/* صندوق اللوجو الواحد (الحساب لـ 8 شعارات) */
.logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95px;
    padding: 5px;
    /* الحساب: (100% تقسيم 8 شعارات) ناقص المسافات بينها */
    flex: 0 0 calc(12.5% - 15px); 
    max-width: calc(12.5% - 15px);
    box-sizing: border-box;
}

/* معالجة الصور بأحجام مختلفة */
.logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* يضمن عدم تمطط الصورة وحفظ أبعادها */
    transition: transform 0.3s ease;
    /* لإظهار الصور بوضوحها الأصلي كما في الصورة أرفقتها */
}

/* تأثير عند التمرير */
.logo-box:hover img {
    transform: scale(1.15);
}

/* --- التجاوب مع الجوال والتابلت --- */

/* تابلت: 4 شعارات في الصف */
@media (max-width: 992px) {
    .logo-box {
        flex: 0 0 calc(25% - 15px);
        max-width: calc(25% - 15px);
        height: 70px;
    }
}

/* جوال: 3 شعارات في الصف */
@media (max-width: 480px) {
    .logo-box {
        flex: 0 0 calc(33.33% - 10px);
        max-width: calc(33.33% - 10px);
        height: 55px;
    }
    .logos-wrapper { gap: 10px; }
}
















 /* --- بداية كود الـ Responsive --- */

 /* للشاشات المتوسطة (Tablets) */
 @media (max-width: 992px) {
     .compatibility {
         padding: 60px 5%;
     }

     .comp-text h1 {
         font-size: 2.5rem;
         /* تصغير الخط قليلاً */
     }

     .compatibility .container {
         gap: 20px;
     }
 }

 /* للشاشات الصغيرة (Mobile) */
 @media (max-width: 768px) {
     .compatibility .container {
         flex-direction: column;
         /* ترتيب العناصر عمودياً */
         text-align: center;
         /* توسيط النصوص للموبايل */
     }

     .comp-text .line {
         margin: 0 auto 30px auto;
         /* توسيط الخط الأبيض */
     }

     .comp-text h1 {
         font-size: 2rem;
         /* تصغير العنوان ليناسب شاشة الموبايل */
     }

     .comp-grid-box {
         width: 100%;
         /* جعل حاوية اللوجوهات تأخذ كامل العرض */
         padding: 0;
     }

     .comp-text p {
         font-size: 1rem;
         margin-bottom: 40px;
         /* مسافة بين النص والصورة */
     }
 }

















 /* start why we  */
 .why {
     background-color: rgb(19, 17, 17);
 }

 .why-content p {
     width: auto;
     text-align: center;
     margin: auto;
     line-height: 35px;
     color: #999999;
     font-weight: 400;
     margin-bottom: 60px;


 }

 .why-content h2 {
     text-align: center;
     padding-top: 90px;
     color: #fff;
     font-size: 32px;
     margin-bottom: 20px;

 }

 .p {
     overflow: hidden;
 }

 .c {
     float: left;
     width: 28%;
     color: #999999;
     margin-left: 70px;
     font-size: 15px;
     margin-bottom: 50px;


 }

 .p p {

     font-weight: 400;
     font-size: 1rem;
     text-align: center;


 }

 .p h3 {
     text-align: center;
     font-size: 1.3rem;
     font-weight: 600;
     color: #fff;
     line-height: 24.8px;
     margin-bottom: 20px;
 }

 /* تجهيز سكشن Why للحركة */
 .why .p .c {
     opacity: 0;
     transform: translateX(-50px);
     /* هنا جعلناها تأتي من اليسار للتغيير */
     transition: opacity 2.0s cubic-bezier(0.2, 1, 0.3, 1),
         transform 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 /* الكلاس الذي سيضيفه الجافاسكربت */
 .why .p .c.reveal-now {
     opacity: 1 !important;
     transform: translateX(0) !important;
 }

 /*3ddddddddddddddddddddd//////////////////////////////

/* تنسيق السكشن العام */
 .smart-integration {
     background-color: #000000;
     color: #ffffff;
     padding: 80px 10%;

     font-size: 1rem;
 }

 @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

 html {
     scroll-behavior: smooth;
     /* تجعل التنقل بين السكاشن ناعماً */
 }

 * {
     padding: 0;
     margin: 0;
     list-style: none;
 }

 /* 1. إخفاء الزر تماماً في شاشات الكمبيوتر */
 .menu-toggle {
     display: none;
 }

 .show {
     display: block !important;
 }

 .navbar {
     position: relative;
     /* أو fixed/sticky */
     z-index: 10000 !important;
 }

 body {
     font-family: "Open Sans", arial;
 }

 /* الحجم الافتراضي لكل سكشن h2 في الموقع */
 h2 {
     font-size: 2.8rem !important;
     /* حجم موحد للشاشات الكبيرة */
     font-weight: 700;
     text-transform: uppercase;
     /* لجعل الحروف كبيرة كما في Nestify */
     letter-spacing: 1.5px;
     margin-bottom: 20px;

     color: #ffffff;
 }

 /* للشاشات المتوسطة (Tablets) */
 @media (max-width: 768px) {
     h2 {
         font-size: 2.2rem !important;
     }
 }

 /* للشاشات الصغيرة (Mobile) */
 @media (max-width: 480px) {
     h2 {
         font-size: 1.8rem !important;
         /* حجم مثالي للموبايل يمنع تكسر السطور */
         letter-spacing: 1px;
         margin-bottom: 15px;
     }
 }

 .navbar {


     top: 0;
     position: fixed;
     width: 100%;

     padding-bottom: 15px;
     overflow: hidden;
     background-color: rgb(32, 29, 29);




 }

 .navbar {
     display: flex;
     justify-content: space-between;
     /* هذا السطر سيدفع اللوجو لليسار والنصوص لليمين */
     align-items: center;
     padding: 5px 5%;
     /* يعطي مساحة جانبية لكي لا يلتصق اللوجو بحافة الشاشة */
     background-color: #1a1a1a;
     /* لون الخلفية حسب الصورة */
     width: 100%;
     box-sizing: border-box;
 }

 /* تأمين حاوية القائمة */
 .dropdown {
     position: relative;
     display: inline-block;
 }

 /* القائمة المنسدلة */
 .dropdown-content {
     display: none;
     /* مخفية افتراضياً */
     position: absolute;
     background-color: #272626;

     box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
     /* z-index عالي جداً لضمان الظهور فوق السلايدر والفيديو */
     z-index: 999999 !important;
     list-style: none;
     padding-top: 5px;
     padding-bottom: 5px;
     /* نؤكد المحاذاة داخل الرابط نفسه */
     text-align: left !important;

     border-radius: 8px;
     top: 100%;
     left: 0;
     margin-top: 5px;
 }

 .dropdown-content {
     display: none;
     position: absolute;
     /* أضف تنسيقاتك الخاصة هنا مثل background-color و box-shadow */
 }

 /* إظهار القائمة عند عمل Hover على الـ li الأب */
 .dropdown:hover .dropdown-content {
     display: block;
 }

 /* الكلاس الذي سيتم إضافته عند الضغط */
 .show {
     display: block !important;
 }

 /* تنسيق الروابط داخل القائمة */
 .dropdown-content li a {
     color: #333;
     padding: 12px 20px;
     text-decoration: none;
     display: block;
     font-size: 15px;
     /* نؤكد المحاذاة داخل الرابط نفسه */
     text-align: left !important;

 }

 .dropdown-content li a:hover {
     background-color: #645a5a;

 }

 /* حل مشكلة الاختفاء تحت الهيدر */
 .navbar,
 .nav,
 .nav-list {
     overflow: visible !important;
     /* ضروري لكي لا يختفي الدروب داون */
 }


 .header .eng {
     padding-top: 2px;
     width: 93px;
     height: 30px;




 }
 .header li {
     list-style: none;
     /* التأكيد على إزالة النقاط */
     display: inline-block;
     /* بدلاً من float لجعل العناصر بجانب بعضها بانتظام */
     margin: 0 15px;
     /* مسافة جانبية بين كل كلمة وأخرى */
 }

 .header li a {
     text-decoration: none;
     color: aliceblue;
     font-size: 16px;
     /* حجم خط مناسب */
     white-space: nowrap;
     /* منع النص من النزول لسطر جديد */
 }

 /* ضبط الحاوية الخاصة بالقائمة */
 .nav {
     text-align: right;
     /* لجعل القائمة تظهر جهة اليمين */


     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);


 }

 .side {
     position: fixed;
     background-color: #fff;
     width: 40px;
     height: 80px;
     right: 0;
     top: 30%;
     text-align: center;
     border-radius: 4px;


 }

 .side .fa-solid {
     color: #4b4b4b;
     margin-bottom: 28px;
     font-size: 20px;
     padding-top: 5px;
 }

 .header-contact {
     padding-top: 240px;
     padding-left: 60px;



 }

 .header {
     position: relative;
     height: 100vh;
     width: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     text-align: center;
     color: aliceblue;
 }

 .back-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
     filter: brightness(0.55);
     /* تعتيم الفيديو مباشرة */
 }

 /* طبقة تظليل إضافية (Overlay) */
 .header::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
     z-index: 1;
 }

 .header-contact {
     position: relative;
     z-index: 2;
     padding-top: 240px;
     padding-left: 60px;
 }

 /* رفع المحتوى فوق الفيديو */
 .navbar,
 .side,
 .header-contact {
     position: relative;
     z-index: 1;
 }

 /* طبقة تظليل اختيارية لجعل النص أوضح */
 .header::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     z-index: 0;
 }






 .nav .fa-solid {
     padding-left: 19px
 }

 h1 {

     font-size: 80px;
     font-family: 'Alegreya Sans', sans-serif;
     font-weight: 400px;
     line-height: 81.2px;
     display: block;
     font-family: "Open Sans", arial;
     font-size: 120px;
     font-weight: bold;
     margin-bottom: 30px;
     margin-top: 20px;



 }

 .wel {
     font-family: "Open Sans", arial;
     font-size: 22px;


 }

 .header p {

     display: block;
     font-family: "Open Sans", arial;
     font-size: 50px;
     font-weight: bold;
     margin-bottom: 40px;


     line-height: 45px;
     text-align: center;

 }

 .btn {
     padding: 15px 15px;
     background-color: rgb(255, 255, 255);
     border-radius: 10px;

     width: 170px;
     height: 60px;

     border: none;
     font-family: "Open Sans", arial;
     font-size: 15px;
     font-weight: 700;
     height: 53.5px;
     letter-spacing: 0.2px;
     line-height: 19.5px;

     padding-bottom: 15px;

     padding-right: 28px;

     position: relative;


 }

 .btn-learn:hover {
     background-color: rgb(179, 152, 31);
 }

 .download-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     margin-top: 20px;
     padding: 12px 25px;
     background-color: transparent;
     color: #ffffff;
     border: 2px solid #ffffff;
     border-radius: 5px;
     text-decoration: none;
     font-weight: bold;
     transition: 0.3s all ease;
     cursor: pointer;
 }

 .download-btn i {
     font-size: 1.2rem;
 }

 .download-btn:hover {
     background-color: #ffffff;
     color: #000000;
     transform: translateY(-3px);
     /* حركة بسيطة للأعلى عند الوقوف بالماوس */
 }






 /* end home */
 /* start whoo */
 .about {
     background-color: #1a1818;
     width: 100%;
     min-height: 100vh;
     display: flex;
     margin: 0;
     padding: 0;
     overflow: hidden;
     /* لمنع أي تمرير عرضي غير مرغوب فيه */
 }

 .about-container {
     display: flex;
     width: 100%;
     margin: 0;
     padding: 0;
 }

 /* قسم النص - يأخذ 50% من المساحة */
 .about .learn-about {
     flex: 0 0 50%;
     /* تحديد العرض بنسبة 50% ثابتة */
     padding: 5% 5% 5% 8%;
     color: #fff;
     display: flex;
     flex-direction: column;
     justify-content: center;
     box-sizing: border-box;
     /* لضمان عدم تأثير الـ padding على العرض */
 }

 /* قسم الصورة (الحمام) - يأخذ 50% من المساحة ويبدأ من الطرف */
 .about .imga {
     flex: 0 0 50%;
     /* تحديد العرض بنسبة 50% ثابتة لتمتد للطرف */
     background-image: url('../img/header1.PNG');
     background-size: cover;
     /* تجعل الصورة تملأ المساحة بالكامل */
     background-position: center;
     background-repeat: no-repeat;
     min-height: 100vh;
     /* لتأخذ كامل ارتفاع الشاشة */
     margin: 0;
     padding: 0;
 }

 .about .learn-about h2 {
     font-size: 3rem;
     font-weight: 400;
     letter-spacing: 2px;
     margin-bottom: 20px;
     text-transform: uppercase;
 }

 .title-line {
     width: 80px;
     border: 1px solid #fff;
     margin: 0 0 40px 0;
 }

 .about .learn-about p {
     font-size: 1.2rem;
     line-height: 1.8;
     max-width: 500px;
     /* تم تكبيره قليلاً ليتناسب مع نصف الشاشة الجديد */
     color: #f1f1f1;
 }



 /* سكشن Who we are: النص يخرج من اليسار والصورة من اليمين */
 #about .learn-about {
     opacity: 0;
     transform: translateX(-80px);
     transition: all 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 #about .imga {
     opacity: 0;
     transform: translateX(80px);
     transition: all 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 /* سكشن What we do: الصورة تخرج من اليسار والنص من اليمين (عكس اللي فوقه) */
 .what .what-image {
     opacity: 0;
     transform: translateX(-80px);
     transition: all 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 .what .what-text {
     opacity: 0;
     transform: translateX(80px);
     transition: all 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 /* كلاس التفعيل الذي سيضيفه الجافاسكربت */
 .about .learn-about.reveal-now,
 .about .imga.reveal-now,
 .what .what-image.reveal-now,
 .what .what-text.reveal-now {
     opacity: 1 !important;
     transform: translateX(0) !important;
 }

 @media (max-width: 768px) {

     /* 1. الحاوية الرئيسية: نلغي أي هوامش ونضمن العرض الكامل */
     .about {
         position: relative;
         width: 100% !important;
         height: 100vh !important;
         margin: 0 !important;
         padding: 0 !important;
         overflow: hidden;
         display: block;
     }

     /* 2. حاوية العناصر: نلغي الـ flex القديم ونستخدمه فقط للتوسيط */
     .about-container {
         width: 100% !important;
         height: 100% !important;
         display: flex !important;
         align-items: center;
         /* توسيط عمودي */
         justify-content: center;
         /* توسيط أفقي */
         margin: 0 !important;
         padding: 0 !important;

     }

     /* 3. الصورة: نلغي الـ float ونمدها لتغطي كامل المساحة خلف النص */
     .about .imga {
         position: absolute;
         top: 0;
         left: 0;
         width: 100% !important;
         /* تمدد كامل لإزالة الجزء الرمادي */
         height: 100% !important;
         background-image: url('../img/header1.PNG');
         background-size: cover;
         background-position: center;
         z-index: 1;
         float: none !important;
         /* ضروري لإلغاء الإزاحة الجانبية */
     }

     /* 4. حاوية النص: نضمن أنها فوق الصورة وفي المنتصف تماماً */
     .about .learn-about {
         position: relative;
         z-index: 2;
         width: 100% !important;
         /* تأخذ العرض الكامل للتوسيط */
         text-align: center;
         padding: 20px;
         margin: 0 !important;
         float: none !important;
         /* إلغاء أي إزاحة قديمة */
         display: flex;
         flex-direction: column;
         align-items: center;

     }

     /* 5. العناوين والنصوص: توسيط كامل ومنع انكسار السطر */
     .about .learn-about h2 {
         color: #fff;
         font-size: 2.2rem;
         text-transform: uppercase;
         white-space: nowrap;
         /* منع العنوان من النزول لسطر جديد */
         margin-bottom: 5px;
         text-align: center;
     }

     .title-line {
         width: 100px;
         border: 1px solid #fff;
         margin: 10px auto 25px auto !important;
         /* التوسيط بالـ auto */
     }

     .about .learn-about p {
         color: #fff;
         font-size: 1.1rem;
         line-height: 1.6;
         max-width: 90%;
         margin: 0 auto !important;
         /* توسيط الفقرة تماماً */
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
         text-align: center;
     }
 }

 /* start about2 */
 .about .imga2 {
     float: left;
     width: 50%;
     background-image: url('../img/about.png');
     background-size: cover;
     height: 100vh;


 }

 /*  system and tecnology النقاط */
 /* تنسيق القسم ليكون 50/50 ///////////////////////////////////////////////////////*/
 .system.about .learn-about {
     flex: 0 0 50%;
     /* نصف الشاشة بالضبط */
     background-color: #141313;
     /* نفس لون خلفية الأقسام السابقة */

     padding: 5% 5% 5% 8%;
     box-sizing: border-box;
 }

 .system.about .imga2 {
     flex: 0 0 50%;
     /* النصف الآخر للصورة */
     background-image: url('../img/about.png');
     /* ضعي مسار صورتك هنا */
     background-size: cover;
     background-position: center;
     min-height: 100vh;
     background-color: #141313;
     /* نفس لون خلفية الأقسام السابقة */

 }

 /* تنسيق القائمة لتشبه الأقسام السابقة */
 .services-list {
     list-style: none;
     padding: 0;
     margin-top: 20px;
 }

 .services-list li {
     color: #f1f1f1;
     font-size: 1.1rem;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
 }

 .services-list li::before {
     content: "•";
     /* نقطة أنيقة */
     color: #fff;
     margin-right: 10px;
     font-weight: bold;
 }


 @media (max-width: 768px) {
     .system.about {
         position: relative;
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .system.about .about-container {
         flex-direction: column;
         width: 100%;
     }

     /* تحويل الصورة لتكون خلفية للقسم بالكامل */
     .system.about .imga2 {
         position: absolute;
         top: 0;
         left: 0;
         width: 100vw !important;
         /* تغطية عرض الشاشة بالكامل */
         height: 100vh !important;
         z-index: 1;
         opacity: 0.4;
         /* تقليل الشفافية لبروز النص */
         float: none !important;
     }

     .system.about .learn-about {
         position: relative;
         z-index: 2;
         /* النص فوق الصورة */
         width: 100% !important;
         background: transparent;
         /* إزالة الخلفية السوداء لتظهر الصورة */
         text-align: center;
         padding: 40px 20px;
         align-items: center;
     }

     .system.about .learn-about h2 {
         font-size: 2.2rem;
         white-space: nowrap;
         /* العنوان في سطر واحد */
     }

     .services-list {
         text-align: left;
         /* الحفاظ على محاذاة القائمة لليسار لسهولة القراءة */
         display: inline-block;
     }

     .services-list li {
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
         /* وضوح النص فوق الخلفية */
     }

     .system.about .learn-about h2 {
         font-size: 1.8rem;
         /* حجم مناسب للموبايل لمنع انكسار الكلمات */
         font-weight: 400;
         letter-spacing: 1px;
         color: #ffffff;
         margin-bottom: 10px;
         text-transform: uppercase;
         white-space: normal;
         /* السماح بالنزول لسطر جديد إذا كان العنوان طويلاً جداً */
         width: 90%;
         /* ضمان وجود مسافة عن الحواف */
     }
 }


 .what {
     background-color: #1a1818;
     color: #fff;
     width: 100%;
     min-height: 100vh;
     /* جعل الارتفاع يغطي الشاشة بالكامل مثل قسم About */
     display: flex;
     margin: 0;
     padding: 0;
     overflow: hidden;
 }

 .what-content {
     display: flex;
     width: 100%;
     margin: 0;
     padding: 0;
 }

 .what-text {
     flex: 0 0 50%;
     /* تحديد نصف مسافة الشاشة بالضبط للنص */
     padding: 5% 5% 5% 8%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     box-sizing: border-box;
 }

 .what-text h2 {
     font-size: 3rem;
     font-weight: 400;
     letter-spacing: 2px;
     margin-bottom: 20px;
     text-transform: uppercase;
 }

 .title-line {
     width: 80px;
     border: 1px solid #fff;
     margin: 0 0 40px 0;
 }

 .what-text p {
     font-size: 1.2rem;
     line-height: 1.8;


     color: #f1f1f1;
 }

 .what-image {
     flex: 0 0 50%;
     /* تحديد نصف مسافة الشاشة بالضبط للصورة */
     margin: 0;
     padding: 0;
     height: 100vh;
     /* لضمان أن الصورة تملأ كامل الارتفاع عمودياً */
 }

 .what-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* ملء المساحة بالكامل بدون ترك فراغات رمادية */
     display: block;
     /* إلغاء أي فجوة تحت الصورة */
 }

 /* تنسيق خاص للجوال لضمان التوافق */
 @media (max-width: 768px) {
     .what-content {
         flex-direction: column;
         /* جعل الصورة تحت النص في الجوال */
     }

     .what-text {
         padding: 50px 20px;
         text-align: center;
     }

     .title-line {
         margin: 0 auto 30px auto;
         /* توسيط الخط في الجوال */
     }

     .what-image {
         height: 200px;

     }

     .what {
         padding-top: 2rem;
     }
 }



 /*3d*/
 .image-section {
     text-align: center;
     /* لتوسيط الفيديو إذا كان داخل div */
     padding: 10px;
 }

 .main-panel {
     width: 70%;
     /* يمكنك تغيير هذه النسبة حسب الرغبة (50% أو 70%) */
     max-width: 600px;
     /* تحديد حد أقصى للعرض بالبكسل لضمان عدم كبره في الشاشات الضخمة */
     height: auto;
     /* للحفاظ على أبعاد الفيديو (النسبة بين الطول والعرض) */
     border-radius: 25px;
     /* اختيارياً: لإضافة زوايا ناعمة */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     /* اختيارياً: لإضافة ظل جمالي */
 }




 /* الحاوية الرئيسية */
 .bestsealler {
     background-color: rgb(0, 0, 0);
     padding-bottom: 80px;
 }

 .bestsealler h2 {
     text-align: center;
     padding-top: 90px;
     color: #fff;
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .bestsealler p {
     width: 50%;
     /* تكبير عرض الفقرة قليلاً للتناسب مع الشاشة */
     text-align: center;
     margin: 0 auto 60px auto;
     line-height: 1.6;
     color: #b1b1b1;
 }

 /* توزيع العناصر باستخدام Flexbox */
 .items {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 2px;
     /* مسافة بين المنتجات */
     max-width: 2000px;
     margin: auto;
 }

 /* بطاقة المنتج الواحدة */
 .bestsealler .i {
     position: relative;


     width: 500px;
     height: 320px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 /* تنسيق الصورة - تكبير دون تغيير الأبعاد */
 .bestsealler .i img {
     width: 90%;
     height: auto;
     /* الحفاظ على النسبة الأصلية للصورة */
     transition: transform 0.5s ease;
     object-fit: contain;
 }

 /* طبقة التعتيم والاسم عند الـ Hover */
 .bestsealler .buy {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     /* تعتيم أسود */
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     /* مخفي افتراضياً */
     transition: opacity 0.4s ease;
     z-index: 2;
 }

 .bestsealler .buy a {
     color: #fff;
     text-decoration: none;
     font-size: 1.1rem;
     text-align: center;
     /* تحويل الرابط لشكل كبسة */
     padding: 12px 25px;
     background-color: transparent;
     /* خلفية شفافة */
     border: 2px solid #faf8f8;
     /* إطار أبيض يحدد الكبسة */
     border-radius: 5px;
     /* حواف منحنية بسيطة */
     transition: all 0.3s ease;
     /* حركة ناعمة عند التفاعل */
     display: inline-block;
     /* لضمان عمل الـ padding والـ width */
     font-weight: 500;
     pointer-events: auto;
     /* تفعيل الضغط على الكبسة */
 }

 /* تأثير عند تمرير الماوس على الكبسة نفسها */
 .bestsealler .buy a:hover {
     background-color: #000000;
     /* تحول الخلفية للأبيض عند الهوفر */
     color: #fffbfb;
     /* تحول النص للأسود ليظهر بوضوح */
 }



 /* تأثيرات الماوس */
 .bestsealler .i:hover .buy {
     opacity: 1;
     /* إظهار التعتيم والاسم */
 }

 .bestsealler .i:hover img {
     transform: scale(1.1);
     /* تكبير بسيط للصورة */
 }



 /* استهداف الكروت داخل سكشن الحلول ////////////////////////*/
 .bestsealler .items .i {
     opacity: 0;
     /* تبدأ من اليمين (50px) لتتحرك نحو اليسار */
     transform: translateX(50px);
     /* مدة الحركة 2 ثانية لجعلها بطيئة جداً وانسيابية */
     transition: opacity 2.0s cubic-bezier(0.2, 1, 0.3, 1),
         transform 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 /* الحالة عند الظهور */
 .bestsealler .items .i.reveal-now {
     opacity: 1 !important;
     transform: translateX(0) !important;
 }

 /* حاوية التعتيم - التوسط الكامل */
 .bestsealler .buy {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.65);
     /* تعتيم متوازن لرؤية المنتج خلف الكبسة */
     display: flex;
     align-items: center;
     /* توسيط عمودي مثالي */
     justify-content: center;
     /* توسيط أفقي مثالي */
     opacity: 0;
     /* مخفي افتراضياً في كل الشاشات */
     transition: opacity 0.4s ease;
     z-index: 5;
     pointer-events: none;
     /* يسمح بالضغط على الصورة تحتها */
 }

 /* الكبسة بداخل السنتر */
 .bestsealler .buy a {
     color: #fff;
     text-decoration: none;
     font-size: 1.1rem;
     padding: 12px 25px;
     background-color: transparent;
     border: 2px solid #ffffff;
     /* الإطار الأبيض المطلوب */
     border-radius: 5px;
     font-weight: bold;
     pointer-events: auto;
     /* تفعيل الضغط على الكبسة */
 }

 /* إظهار الكبسة عند الهوفر (للكمبيوتر) وعند اللمس (للجوال) */
 .bestsealler .i:hover .buy,
 .bestsealler .i:active .buy {
     opacity: 1;
     /* تظهر فقط عند التفاعل */
 }

 @media (max-width: 768px) {

     /* الخلفية الرئيسية للقسم تظل سوداء داكنة */
     .bestsealler {
         background-color: #1a1818 !important;
         padding: 40px 5px;
     }

     /* توزيع المنتجات (2 في كل صف) */
     .items {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 10px;
         /* تقليل المسافة لزيادة عرض الكروت */
     }

     /* الكارد: إزالة الخلفية الرمادية وجعلها شفافة */
     .bestsealler .i {
         background-color: transparent !important;
         /* إزالة الرمادي تماماً */
         width: calc(48% - 5px);
         /* الحفاظ على منتجين في الصف */
         height: 300px;
         border-radius: 12px;
         position: relative;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /* توسيط الصورة في المنتصف */
         overflow: hidden;

     }

     /* تنسيق الصورة لتتوسط الكارد */
     .bestsealler .i img {
         width: 85%;
         height: auto;
         max-height: 500px;
         object-fit: contain;
         background-color: transparent !important;
         margin-top: 20px;
         /* موازنة المسافة مع النص العلوي */
     }

     /* محاذاة اسم المنتج في الأعلى */
     .bestsealler .buy {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 60px;
         background: transparent;
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 2;
     }

     .bestsealler .i {
         width: calc(48% - 10px);
         /* صورتين حد بعض بدون تداخل */
         height: 250px;
         /* ارتفاع متناسق للجوال */
     }

     /* ضمان التوسط حتى لو صغر حجم الكارد */
     .bestsealler .buy a {
         font-size: 0.85rem;
         padding: 8px 16px;
         border-width: 1px;
     }

     .bestsealler .i {
         height: 220px;
         /* تقليل الارتفاع ليناسب الجوال */
     }

     .bestsealler .buy a {
         font-size: 0.85rem;
         /* تصغير الخط ليناسب الكروت الصغيرة */
         padding: 8px 16px;
         border-width: 1px;
         /* تنحيف الإطار قليلاً للجوال */
     }
 }

 /* ضبط الموبايلات الصغيرة جداً لضمان بقاء منتجين في الصف */
 @media (max-width: 600px) {

     /* الحاوية: تصفير أي هوامش جانبية وتوسيط العناصر */
     .items {
         display: flex !important;
         flex-wrap: wrap !important;
         flex-direction: row !important;
         justify-content: center !important;
         /* توسيط الكروت أفقيًا */
         align-items: flex-start !important;
         gap: 10px !important;
         /* مسافة بسيطة بين الكرتين */
         padding: 0 !important;
         margin: 0 auto !important;
         width: 100% !important;
     }

     /* الكارد: ضبط العرض ليكون موسطاً وبدون خلفية */
     .bestsealler .i {
         background-color: transparent !important;
         /* إزالة الرمادي */
         width: 46% !important;
         /* عرض يسمح بظهور اثنين بجانب بعضهما في الوسط */
         height: 250px !important;
         float: none !important;
         /* إزالة أي انزياح قديم لليسار */
         margin: 0 !important;
         /* تصفير المارجن ليعمل الـ gap بشكل صحيح */
         display: flex !important;
         flex-direction: column !important;
         align-items: center !important;
         justify-content: center !important;
       
         position: relative !important;
     }

     /* الصورة: موسطة تماماً */
     .bestsealler .i img {
         width: 90% !important;
         height: auto !important;
         max-height: 500px !important;
         margin: 40px auto 0 auto !important;
         /* دفعها لوسط الكارد */
         display: block !important;
     }

     /* النص: موسط في الأعلى */
     .bestsealler .buy {
         position: absolute !important;
         top: 0 !important;
         width: 100% !important;
         height: 80px !important;
         background: transparent !important;
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
     }

     .bestsealler .buy a {
         font-size: 0.75rem !important;
         text-align: center !important;
         width: 100% !important;
         padding: 0 5px !important;
     }

     .bestsealler .i {
         height: 220px;
         /* تقليل الارتفاع ليناسب الجوال */
     }

     .bestsealler .buy a {
         font-size: 0.85rem;
         /* تصغير الخط ليناسب الكروت الصغيرة */
         margin-top: 95%;
         margin-right: 30%;

         border-width: 1px;
         /* تنحيف الإطار قليلاً للجوال */
     }
 }




 /* --- تنسيق الشاشات الكبيرة (الأساسي) productttttttttttttttttttttttt--- */
 /* --- تنسيق الحاوية (الأب) --- */
 .items {
     display: flex;
     flex-wrap: wrap;

     gap: 50px;
     /* مسافة ثابتة وصغيرة للجوال */
     padding: 50px;


 }

 /* --- تنسيق الكرت (الابن) --- */
 .i {
     text-decoration: black;

    
     padding: 20px 50px;
     margin: 30px;

     /* الحسبة الدقيقة لضمان 2 في كل صف */
     /* العرض هو (نصف الشاشة) ناقص (نصف مسافة الـ gap) */
     width: calc(40% - 50px);

     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
     min-height: 200px;
     /* توحيد الطول لضمان الاستقامة */
     box-sizing: border-box;
     /* ضروري جداً لضمان عدم خروج العنصر عن العرض */
     transition: all 0.4s ease;

 }

 /* --- تأثير الـ Hover --- */
 .i:hover {
     border-color: #f3f1e7;
     background-color: #000000;
 }

 .icon-display {
     font-size: 40px;
     color: #ffcc00;
     margin-top: 10px;
 }

 .buy {
     width: 100%;
     background-color: #ffcc00;
     padding: 8px 0;
     border-radius: 6px;
     margin-top: auto;
     /* يدفع الزر للأسفل مهما كان طول النص فوقه */
     transition: all 0.4s ease;
 }

 .buy span {
     color: #000;
     font-weight: bold;
     font-size: 13px;
     display: block;
     background-color: #000;
     transition: all 0.3s ease;
     padding: 10px;
     border-radius: 10px;
 }

 /* --- تأثير الهوفر المطلوب --- */
 .i:hover .buy {
     background-color: transparent;
     transform: translateY(8px);
     /* تحريك للأسفل */
 }

 .i:hover .buy span {
     color: #fff8f8;
     /* اللون أبيض */
     font-size: 1.5rem;
     /* تكبير النص */

 }

 /* --- ضبط التجاوب للشاشات الكبيرة (لأنه الكود أعلاه للجوال) --- */
 /* --- تعديل خاص للجوالات الصغيرة لتكبير الصور --- */
 @media (max-width: 1400px) {
     .items {
         padding: 10px;
         /* تقليل المسافة الخارجية للحاوية */
         gap: 20px;
         /* تقليل الفراغ بين الكروت */
     }

     .i {
         width: calc(50% - 20px);
         /* ضمان بقاء عنصرين بجانب بعض بشكل أرتب */
         padding: 5px;
         /* تقليل البادينج الداخلي لتوفير مساحة للصورة */
         margin: 5px;
         /* تقليل المارجن */
         min-height: 200px;
         /* تقليل الارتفاع الأدنى */
     }

     .i .glass {
         width: 90% !important;
         /* تكبير الصورة لتأخذ معظم عرض الكرت */
         height: auto;
         max-height: 250px;
         /* تحديد أقصى طول عشان ما يخرب التصميم */
         object-fit: contain;
         /* الحفاظ على أبعاد الصورة بدون تمطيط */
         margin-bottom: 10px;
         /* مسافة بسيطة تحت الصورة */
     }

     .buy span {
         font-size: 11px;
         /* تصغير نص الزر قليلاً ليناسب الحجم الجديد */
         padding: 8px;
     }
 }




 /*START COMPATABILITY*/
 /* الأكواد الأساسية اللي عندك مع تعديلات بسيطة للتحكم */
 .compatibility {
     background-color: #1b1a1a;
     padding: 100px 5%;
     color: #fff;
     overflow: hidden;
     /* لمنع أي خروج للعناصر عن الشاشة */
 }

 .compatibility .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     max-width: 1300px;
     margin: 0 auto;
     gap: 40px;
 }

 .comp-text {
     flex: 1;
 }

 .comp-text h1 {
     font-size: 3.2rem;
     letter-spacing: 2px;
     margin-bottom: 10px;
     font-weight: 400;
 }

 .comp-text .line {
     width: 140px;
     height: 2px;
     background-color: #fff;
     margin-bottom: 30px;
 }

 .comp-text p {
     font-size: 1.1rem;
     line-height: 1.6;
     color: #e0e0e0;
 }

 .comp-grid-box {
     flex: 1.2;
     padding: 20px;
     /* تقليل البادينج قليلاً */
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .all-logos-img {
     width: 100%;
     height: auto;
     object-fit: contain;
 }

 /* --- بداية كود الـ Responsive --- */

 /* للشاشات المتوسطة (Tablets) */
 @media (max-width: 992px) {
     .compatibility {
         padding: 60px 5%;
     }

     .comp-text h1 {
         font-size: 2.5rem;
         /* تصغير الخط قليلاً */
     }

     .compatibility .container {
         gap: 20px;
     }
 }

 /* للشاشات الصغيرة (Mobile) */
 @media (max-width: 768px) {
     .compatibility .container {
         flex-direction: column;
         /* ترتيب العناصر عمودياً */
         text-align: center;
         /* توسيط النصوص للموبايل */
     }

     .comp-text .line {
         margin: 0 auto 30px auto;
         /* توسيط الخط الأبيض */
     }

     .comp-text h1 {
         font-size: 2rem;
         /* تصغير العنوان ليناسب شاشة الموبايل */
     }

     .comp-grid-box {
         width: 100%;
         /* جعل حاوية اللوجوهات تأخذ كامل العرض */
         padding: 0;
     }

     .comp-text p {
         font-size: 1rem;
         margin-bottom: 40px;
         /* مسافة بين النص والصورة */
     }
 }

 /* start why we  */
 .why {
     background-color: rgb(19, 17, 17);
 }

 .why-content p {
     width: 37%;
     text-align: center;
     margin: auto;
     line-height: 35px;
     color: #999999;
     font-weight: 400;
     margin-bottom: 60px;

 }

 .why-content h2 {
     text-align: center;
     padding-top: 90px;
     color: #fff;
     font-size: 32px;
     margin-bottom: 20px;

 }

 .p {
     overflow: hidden;
 }

 .c {
     float: left;
     width: 28%;
     color: #999999;
     margin-left: 70px;
     font-size: 15px;
     margin-bottom: 50px;


 }

 .p p {

     font-weight: 400;
     font-size: 1rem;
     text-align: center;



 }

 .p h3 {
     text-align: center;
     font-size: 1.3rem;
     font-weight: 600;
     color: #fff;
     line-height: 24.8px;
     margin-bottom: 20px;
 }

 /* تجهيز سكشن Why للحركة */
 .why .p .c {
     opacity: 0;
     transform: translateX(-50px);
     /* هنا جعلناها تأتي من اليسار للتغيير */
     transition: opacity 2.0s cubic-bezier(0.2, 1, 0.3, 1),
         transform 2.0s cubic-bezier(0.2, 1, 0.3, 1);
 }

 /* الكلاس الذي سيضيفه الجافاسكربت */
 .why .p .c.reveal-now {
     opacity: 1 !important;
     transform: translateX(0) !important;
 }

 /*3ddddddddddddddddddddd//////////////////////////////

/* تنسيق السكشن العام */
 .smart-integration {
     background-color: #000000;
     color: #ffffff;
     padding: 80px 10%;

     font-size: 1rem;
 }

 .integration-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }

 /* تنسيق النصوص */
 .text-section {
     flex: 1;

 }



 .divider {
     width: 150px;
     height: 2px;
     background-color: #ffffff;
     margin-bottom: 25px;
 }

 .text-section p {
     font-size: 1.1rem;
     color: #cccccc;
     line-height: 1.6;
     margin-bottom: 40px;
     width: auto;
 }

 /* تنسيق بطاقة الدعم (مستوحى من الصورة الأولى) */
 .support-card {
     border: 1px solid #444;
     border-radius: 15px;
     padding: 20px;

 }

 .support-card-inner {
     border: 1px solid #666;
     /* الخط الداخلي */
     border-radius: 12px;
     padding: 30px;
     text-align: center;
 }

 .support-card i {
     font-size: 40px;
     color: #007bff;
     margin-bottom: 15px;
 }

 .support-card h3 {
     margin-bottom: 10px;
 }

 .email-text {
     font-size: 0.9rem !important;
     color: #888 !important;
     margin-bottom: 20px !important;
 }

 .send-btn {
     color: #ffffff;
     text-decoration: underline;
     font-weight: bold;
     cursor: pointer;
 }


 /* تنسيق الصورة */
 .image-section {
     flex: 1;
     display: flex;
     justify-content: center;
 }

 .main-panel {
     max-width: 100%;
     height: auto;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
 }

 /* ضبط استجابة الموبايل */
 @media (max-width: 768px) {
     .integration-content {
         flex-direction: column;
         text-align: center;
     }

     .text-section h2 {
         font-size: 0.1rem;

     }

     .divider {
         margin: 0 auto 25px;
     }

     .support-card {
         margin: 0 auto;
     }


 }

 /*FEDBACK/////////////////////////////////////////////////////////////*/
 /* السكشن الرئيسي */
 /* السكشن الرئيسي */
 .testimonials {
     background-color: #1a1818;
     padding: 80px 5%;
     text-align: center;
     position: relative;
     overflow: hidden;
     /* لمنع الكروت من الخروج عن حدود الشاشة */
 }

 .test-slider-wrapper {
     position: relative;
     max-width: 1200px;
     margin: 50px auto 0;
 }

 .test-container {
     display: flex;
     /* ترتيب الكروت أفقياً */
     gap: 25px;
     transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
     /* حركة انزلاقية ناعمة */
 }

 .test-card {
     background-color: #353030;
     min-width: calc(33.33% - 17px);
     /* عرض الكرت (3 كروت في الصف) */
     padding: 40px 30px;
     border-radius: 20px;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-sizing: border-box;
     text-align: left;
 }

 .quote-icon {
     font-size: 50px;
     color: #4a4a4a;
     font-family: serif;
     position: absolute;
     top: 10px;
     left: 20px;
 }

 .client-info {
     color: #cccccc;
 }

 .test-card p {
     color: #cccccc;
     font-style: italic;
     line-height: 1.6;
     margin-top: 20px;
     margin-bottom: 25px;
 }

 /* تنسيق الأسهم */
 .nav-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.05);
     color: white;
     border: 1px solid rgba(7, 6, 6, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     cursor: pointer;
     z-index: 100;
     transition: 0.3s;
 }

 .nav-btn:hover {
     background: white;
     color: black;
 }

 .prev {
     left: -60px;
 }

 .next {
     right: -60px;
 }

 /* إخفاء الأسهم إذا ضاق المكان وتحويلها لسحب يدوي */
 @media (max-width: 1300px) {
     .prev {
         left: 10px;
     }

     .next {
         right: 10px;
     }
 }

 @media (max-width: 768px) {
     .test-card {
         min-width: calc(100%);
         /* كرت واحد في الموبايل */
     }
 }

 /* start felling */
 .felling {
     position: relative;
     height: 75vh;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* تنسيق الفيديو ليكون خلفية كاملة */
 .back-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* لضمان عدم تمطيط الفيديو وملئه للمساحة */
     z-index: 1;
     /* الفيديو في الطبقة الأولى */
 }

 /* إضافة طبقة تعتيم (Overlay) لجعل النص أكثر وضوحاً */
 .felling::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.1);
     /* تعتيم بنسبة 50% */
     z-index: 2;
     /* التعتيم فوق الفيديو */
 }

 /* ضبط المحتوى ليظهر فوق كل شيء */
 .fellig-cotent {
     position: relative;
     z-index: 3;
     /* النص في أعلى طبقة */
     text-align: center;
     color: #fff;
 }

 .fellig-cotent h2 {
     font-size: 3rem;
     margin-bottom: 10px;
     font-weight: bold;
 }

 .fellig-cotent p {
     font-size: 1.5rem;
     color: #ddd;
 }

 /* تنسيق الزر */
 .email-btn {
     display: inline-block;
     margin-top: 25px;
     padding: 12px 35px;
     background-color: transparent;
     color: #ffffff;
     text-decoration: none;
     font-size: 1.1rem;
     font-weight: bold;
     border: 2px solid #ffffff;
     border-radius: 30px;
     /* زوايا منحنية لتناسب هوية الموقع */
     transition: all 0.3s ease;
     cursor: pointer;
 }

 /* التأثير عند مرور الماوس */
 .email-btn:hover {
     background-color: #ffffff;
     color: #000000;
     transform: scale(1.05);
     /* تكبير بسيط عند اللمس */
 }

 /* ضبط الزر للموبايل */
 @media (max-width: 480px) {
     .email-btn {
         padding: 10px 25px;
         font-size: 0.9rem;
     }
 }

 /* ضبط التجاوب للموبايل */
 @media (max-width: 768px) {
     .felling {
         height: 50vh;
         /* تصغير الارتفاع في الموبايل */
     }

     .fellig-cotent h2 {
         font-size: 2rem;
     }
 }

 /* start footr ///////////////////////////////////////////////////////////////////*/
 .footer-content {
     background-color: #1a1818;
     /* لون متناسق مع الموقع */
     padding: 60px 0;
     width: 100%;
 }

 .footer {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .footer .sec {
     flex: 1;
     min-width: 200px;
     /* تضمن عدم صغر القسم جداً */
     margin: 10px;
     color: #fff;
 }

 .footer .sec h4 {
     font-size: 1.2rem;
     margin-bottom: 25px;
     text-transform: uppercase;
     position: relative;
     padding-bottom: 10px;
 }

 /* إضافة خط صغير تحت عناوين الفوتر لتناسق التصميم */
 .footer .sec h4::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 30px;
     height: 2px;
     background-color: #fff;
 }

 .footer .sec p,
 .footer .sec li,
 .footer .sec a {
     color: #b1b1b1;
     /* لون رمادي خفيف للقراءة المريحة */
     font-size: 0.9rem;
     line-height: 1.8;
     text-decoration: none;
     list-style: none;
 }

 /* تنسيق قسم المنتجات (الصور والنصوص بجانب بعض) */
 .footer .sec ul li {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
     border-bottom: 1px solid #333;
     padding-bottom: 10px;
 }

 .footer .sec .hi {
     width: 50px;
     height: 50px;
     object-fit: contain;
     background: #fff;
     padding: 2px;
     border-radius: 4px;
 }


 /* تنسيق قسم الهيرو */
 .support-hero {
     height: 50vh;
     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/support-bg.jpg');
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
 }


 /* تنسيق بطاقات التواصل */
 .support-cards {
     padding: 80px 5%;
     background-color: #1a1818;
     /* اللون الموحد للموقع */
 }

 .support-cards .container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .card {
     background: #252323;
     padding: 40px 20px;
     border-radius: 15px;
     text-align: center;
     transition: 0.3s;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .card:hover {
     transform: translateY(-10px);
     border-color: #ffffff;
 }

 .card i {
     font-size: 2.5rem;
     color: #ffffff;
     margin-bottom: 20px;
 }

 .card h3 {
     margin-bottom: 10px;
     color: #fff;
 }

 .card p {
     color: #aaa;
     margin-bottom: 20px;
     font-size: 0.1rem;
 }

 .card-link {
     color: #ffffff;
     text-decoration: none;
     font-weight: bold;
     border-bottom: 1px solid #ffffff;
     padding-bottom: 5px;
 }

 @media (max-width: 768px) {
     .support-hero h1 {
         font-size: 2rem;
     }
 }

 /* تنسيق الأسئلة الشائعة */
 .faq-section {
     padding: 60px 5%;
     background-color: #1a1818;
     color: #fff;
     text-align: center;
 }

 .faq-container {
     max-width: 800px;
     margin: 40px auto;
     text-align: left;
 }

 .faq-item {
     background: rgba(255, 255, 255, 0.02);
     padding: 20px;
     margin-bottom: 15px;
     border-radius: 8px;
 }

 .faq-item h4 {
     color: #ffffff;
     margin-bottom: 10px;
 }

 .faq-item p {
     color: #ccc;
     font-size: 0.95rem;
 }








 @media (max-width: 768px) {
     .footer {
         flex-direction: column;
         /* ترتيب العناصر عمودياً */
         text-align: center;
         /* توسيط النصوص في الموبايل */
     }

     .footer .sec {
         margin-bottom: 40px;
         width: 100%;
     }

     .footer .sec h4::after {
         left: 50%;
         transform: translateX(-50%);
         /* توسيط الخط تحت العنوان في الموبايل */
     }

     /* ضبط محاذاة عناصر التواصل في الموبايل */
     .footer .sec ul li {
         justify-content: center;
         flex-direction: column;
         border-bottom: none;
     }

     .footer .sec .l2 {
         margin-bottom: 10px;
     }

     /* جعل أيقونات التواصل تظهر بجانب النص حتى في الموبايل */
     .footer .sec .e {
         flex-direction: row !important;
         justify-content: center;
         gap: 10px;
     }
 }

 /* startend */
 .end-end {

     height: 30px;
 }

 .end {


     overflow: hidden;

 }

 .end span {
     float: left;
     width: 40%;
     color: #797979;

     padding-left: 40px;
 }

 .end ul {
     float: left;
     width: 12%;
     overflow: hidden;

     margin-left: 600px
 }

 .end li {
     float: left;
     width: 30px;

 }

 .end .fa-brands {
     color: #949292;
     font-size: 20px;
 }



 /* lklkllll */
 @media (max-width: 700px) {
     h1 {

         font-family: 'Alegreya Sans', sans-serif;
         font-weight: 400px;
         line-height: 30.2px;
         display: block;
         font-family: "Open Sans", arial;
         font-size: 50px;
         font-weight: bold;
         margin-bottom: 29px;


     }

     /* 1. إخفاء القائمة في الحالة العادية */
     .nav {
         display: none;
     }

     /* 2. تنسيق القائمة عند التفعيل (تظهر عمودية في نصف الشاشة) */
     .nav.active {
         display: flex !important;
         position: fixed !important;
         top: 0 !important;
         right: 0 !important;
         /* تبدأ من اليمين */
         width: 60% !important;
         /* تأخذ أكثر من نصف الشاشة قليلاً لراحة العين */
         height: 100vh !important;
         background-color: rgba(0, 0, 0, 0.95) !important;
         /* خلفية سوداء فخمة */
         flex-direction: column !important;
         /* ترتيب عمودي */
         justify-content: flex-start !important;
         /* تبدأ من الأعلى */
         padding-top: 80px !important;
         /* إزاحة للأسفل لكي لا تغطي الزر */
         z-index: 1000000 !important;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
         /* ظل لإبراز الانفصال عن الموقع */
     }

     /* 3. تنسيق قائمة الروابط */
     .nav-list {
         display: flex !important;
         flex-direction: column !important;
         /* عمودي */
         align-items: flex-start !important;
         /* محاذاة النص لليمين/البداية */
         width: 100%;
         padding-left: 30px;
         /* مسافة جانبية للنص */
     }

     .nav-list li {
         list-style: none;
         margin: 15px 0;
         width: 100%;
     }

     .nav-list li a {
         color: white !important;
         font-size: 20px !important;
         text-decoration: none;
         display: block;
         width: 100%;
         transition: 0.3s;
     }

     /* تأثير بسيط عند لمس الرابط */
     .nav-list li a:active {
         color: #ffcc00 !important;
         /* أو لون هويتك البصرية */
     }

     /* 4. زر الهمبرجر (تأكد من وجوده في HTML) */
     .menu-toggle {
         display: block !important;
         position: fixed;
         top: 0;
         right: 0;
         z-index: 1000001 !important;
         /* دائماً فوق القائمة */
         font-size: 28px;
         color: white;
         cursor: pointer;
         background: rgba(0, 0, 0, 0.3);
         padding: 5px 0px;
         border-radius: 5px;
     }

     /* جعل القائمة المنسدلة تظهر تحت كلمة Products بشكل عمودي */
     /* القائمة المنسدلة - إجبارها على أخذ مساحة عمودية */
     .dropdown-content {
         display: none !important;
         /* مخفية افتراضياً */
         position: static !important;
         /* لتأخذ حيزاً عمودياً */
         width: 100% !important;
         background-color: #1a1a1a !important;
         /* لون تمييزي */
         visibility: visible !important;
         opacity: 1 !important;
     }

     /* الكلاس الذي سيتم إضافته بالـ JS */
     .dropdown-content.show-now {
         display: block !important;
     }

     .dropdown:hover .dropdown-content {
         display: block;
     }

     .dropdown-content li a {
         padding: 10px !important;
         font-size: 16px !important;
         border-left: 2px solid #555 !important;
         /* خط جانبي لتمييز المنتجات */
     }

     .header-contact {
         padding-top: 50px;
         /* تقليل المسافة العلوية للمحتوى */
         padding-left: 0px;
         text-align: center;
     }


     .header {
         /* text-align: left; */
         color: aliceblue;
         color: aliceblue;

         background-size: cover;
         background-position: center;
     }

     .wel {
         font-family: "Open Sans", arial;
         font-size: 10px;
         line-height: 50px;

     }

     .header p {
         color: rgba(255, 255, 255, 0.92);
         display: block;
         font-family: "Open Sans", arial;
         font-size: 30px;
         font-weight: 400;
         height: 20;

         line-height: 50px;

     }

     .btn {

         background-color: aliceblue;
         border-radius: 10px;
         margin-top: 35px;
         width: 100px;

         border: none;
         font-size: 11px;
         font-weight: 700;
         height: 50.5px;
         letter-spacing: 0.2px;
         line-height: 10.5px;
         margin-bottom: 100px;
         padding-bottom: 1px;
         padding-left: 8px;
         padding-right: 8px;
         padding-top: 5px;
         margin-top: 20px;

     }

     .footer {

         color: #797979;
         padding-left: 18px;



     }

     .sec {



         width: 100%;
         display: block;

     }

     h4 {
         padding-top: 50px;
         font-style: calc();
         color: #fff;
         margin-bottom: 20px;
     }

     .footer p {
         line-height: 30px;
         margin-bottom: 7px;
         margin-top: 7px;
         font-size: 16px;
     }

     .footer li {

         border-bottom: #858383;
         border-style: solid;
         border-width: 1px;
         border-top: none;
         border-left: none;
         border-right: 0;


     }

     .sec .l2 {
         float: left;
         width: 70%;
         height: 40px;
         margin-bottom: 40px;


     }

     .l2 img {
         float: left;
         width: 30%;


     }

     .l2 a {
         text-decoration: none;
         color: #fffefe;
         display: block;

     }

     .hi {
         width: 66px;

         padding-top: 20px;
     }

     .sec a {
         text-decoration: none;
         color: #797979;
         line-height: 50px;
         font-weight: 500;
     }

     .footer span {
         display: block;
     }

     .e p {
         width: 75%;
         padding-left: 16px;
         display: inline;
     }


     /* media-about */





     /* media-feeling */
     .felling {

         height: 75vh;

         background-position: 1090px, 80px;

     }

     .felling h2 {
         text-align: center;
         color: #fff;
         font-size: 22px;
         padding-top: 130px;


     }

     .felling p {
         text-align: center;
         color: #fff;
         font-size: 16px;
         font-style: normal;
         font-weight: 400;
         height: 30px;
         line-height: 30px;

     }

     .felling button {
         text-align: center;
         margin: auto;
         left: 120px;
         margin-top: 70px;
         background-attachment: scroll;
         background-clip: border-box;
         background-color: rgba(0, 0, 0, 0);
         background-image: none;
         border: #fff;
         border-style: solid;
         border-radius: 0;
         color: #fff;
         cursor: pointer;
         width: 130px;
         font-size: 15px;
         height: 70px;

     }

     /* media why */
     .why-content p {
         width: 60%;
         text-align: center;
         margin: auto;
         line-height: 25px;
         color: #999999;
         font-weight: 400;
         margin-bottom: 60px;

         font-size: 0.1rem;
     }

     .why-content h2 {
         text-align: center;
         padding-top: 90px;
         color: #fff;
         font-size: 29px;
         margin-bottom: 20px;

     }

     .p {
         overflow: hidden;
     }

     .c {

         width: 100%;
         color: #999999;
         margin-left: 0px;
         font-size: 15px;
         margin-bottom: 50px;


     }

     .p p {

         font-weight: 400;

         font-size: 0.1rem;


     }

     .p h3 {
         padding-left: 15px;

         font-weight: 600;
         color: #fff;
         line-height: 24.8px;
         margin-bottom: 20px;
     }

     /* media best sellar/////////////////// */
     .bestsealler {
         background-color: rgb(26, 24, 24);
         background-attachment: scroll;
     }

     .items {
         overflow: hidden;
         margin: auto;
     }

     .items .i {

         width: 100%;
         height: 500px;

     }

     .items .i img {
         width: 270px;
         background-color: black;
         height: 300px;

     }

     .bestsealler p {
         width: 60%;
         text-align: center;
         margin: auto;
         line-height: 29px;
         color: #999999;
         font-weight: 400;
         margin-bottom: 40px;
     }

     .bestsealler h2 {
         text-align: center;
         padding-top: 90px;
         color: #fff;
         font-size: 29px;
         margin-bottom: 15px;
     }

     .shoeshat img {
         width: 220px;
         height: 220px;

     }


     .bestsealler a {
         text-decoration: none;
         line-height: 40px;
         color: #fff;
         margin-left: 60px;
         display: block;



     }

     .bestsealler .price {
         padding-left: 25%;
         color: rgb(134, 124, 124);

     }


     .bestsealler .i img {
         width: 150px;
         height: 150px;
         ;
         transition: transform 1s;

     }


     .offer {
         font-size: 10px;
         text-decoration: line-through;
         color: #fff;
     }

     .bestsealler .i {


         background-color: rgb(49, 49, 49);
         width: 150px;

         margin-right: 47px;
         height: 230px;

         margin: auto;
         margin-left: 23px;
         margin-bottom: 23px;
     }

     /* media about1 */

     .about {
         overflow: hidden;
         background-color: rgb(19, 17, 17);
         height: 100vh;
         padding-left: 1rem;
         position: relative;
         /* ضروري لضمان ترتيب الطبقات */
     }

     .about .learn-about {
         width: 30%;
         float: left;
         position: relative;
         /* لرفع النص فوق أي تداخل */
         z-index: 10;
         /* قيمة عالية لضمان عدم تأثره بشفافية العناصر الأخرى */
         padding-top: 8rem;
     }

     .about .imga {
         float: left;
         width: 70%;
         height: 100%;
         /* تأكدي من إعطائها طولاً لتظهر */
         background-image: url('../img/header1.PNG');
         background-size: cover;
         background-position: center;
         opacity: 0.4;
         /* الشفافية هنا تؤثر على الصورة فقط */
     }

     .learn-about p {
         /* زيادة عرض الفقرة لتتمكن من الامتداد فوق مساحة الصورة */
         width: 25rem;
         font-size: 1.1rem;
         /* جعل اللون أبيض صريح وقوي لكسر الشفافية */
         color: #e7e2e2;

         padding-left: 1.2rem;
         line-height: 1.2rem;
         /* زيادة المسافة بين الأسطر للوضوح */
         font-weight: 500;
         /* وزن متوسط ليكون أوضح من 400 */
         text-align: left;

         /* إضافة ظل خلف النص يجعله يبرز جداً فوق الصورة الملونة */
         text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);

         position: relative;
         z-index: 20;
     }

     .clear {
         clear: both;
     }

     .shoeshat img {
         width: 100px;
         height: 100px;

     }


     .shoeshat a {
         text-decoration: none;
         line-height: 10px;
         color: #fff;

         margin-right: 70PX;


     }

     .price {
         display: block;
         padding-right: 30px;


     }

     .shoeshat .item {


         background-color: rgb(49, 49, 49);
         width: 100px;
         text-align: center;
         margin-left: 30px;
         margin-bottom: 40px;

     }

     .about h2 {
         padding-left: 1rem;
         width: 15rem;
         line-height: 38px;
         font-size: 2rem;
         font-family: 'Open Sans', sans-serif;
     }

     /* media about2 */
     .about .imga2 {
         float: left;
         width: 50%;
         background-image: url('../img/square-1.jpg');

         height: 100vh;
         background-position: 400px, 4px, 0px, 100px;

     }

     /* media end  */
     .end-end {


         height: 30px;
     }

     .end {


         overflow: hidden;

     }

     .end span {
         text-align: center;
         width: 80%;
         color: #797979;

         padding-right: 20px;
     }

     .end ul {

         width: 100%;
         overflow: hidden;

         margin-left: 120px;


     }

     .end li {
         float: left;
         width: 30px;

     }


 }

 @media (max-width :1200px) {
     h1 {

         font-family: 'Alegreya Sans', sans-serif;
         font-weight: 400px;
         line-height: 30.2px;
         display: block;
         font-family: "Open Sans", arial;
         font-size: 50px;
         font-weight: 400;
         margin-bottom: 29px;
         margin-top: 13px;

     }

     .nav {
         display: none;
     }

     /* 2. تنسيق القائمة عند التفعيل (تظهر عمودية في نصف الشاشة) */
     .nav.active {
         display: flex !important;
         position: fixed !important;
         top: 0 !important;
         right: 0 !important;
         /* تبدأ من اليمين */
         width: 60% !important;
         /* تأخذ أكثر من نصف الشاشة قليلاً لراحة العين */
         height: 100vh !important;
         background-color: rgba(0, 0, 0, 0.95) !important;
         /* خلفية سوداء فخمة */
         flex-direction: column !important;
         /* ترتيب عمودي */
         justify-content: flex-start !important;
         /* تبدأ من الأعلى */
         padding-top: 80px !important;
         /* إزاحة للأسفل لكي لا تغطي الزر */
         z-index: 1000000 !important;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
         /* ظل لإبراز الانفصال عن الموقع */
     }

     /* 3. تنسيق قائمة الروابط */
     .nav-list {
         display: flex !important;
         flex-direction: column !important;
         /* عمودي */
         align-items: flex-start !important;
         /* محاذاة النص لليمين/البداية */
         width: 100%;
         padding-left: 30px;
         /* مسافة جانبية للنص */
     }

     .nav-list li {
         list-style: none;
         margin: 15px 0;
         width: 100%;
     }

     .nav-list li a {
         color: white !important;
         font-size: 20px !important;
         text-decoration: none;
         display: block;
         width: 100%;
         transition: 0.3s;
     }

     /* تأثير بسيط عند لمس الرابط */
     .nav-list li a:active {
         color: #ffcc00 !important;
         /* أو لون هويتك البصرية */
     }

     /* 4. زر الهمبرجر (تأكد من وجوده في HTML) */
     .menu-toggle {
         display: block !important;
         position: fixed;
         top: 0;
         right: 0;
         z-index: 1000001 !important;
         /* دائماً فوق القائمة */
         font-size: 28px;
         color: white;
         cursor: pointer;
         background: rgba(0, 0, 0, 0.3);
         padding: 5px 12px;
         border-radius: 5px;
     }

     /* جعل القائمة المنسدلة تظهر تحت كلمة Products بشكل عمودي */
     /* القائمة المنسدلة - إجبارها على أخذ مساحة عمودية */
     .dropdown-content {
         display: none !important;
         /* مخفية افتراضياً */
         position: static !important;
         /* لتأخذ حيزاً عمودياً */
         width: 100% !important;
         background-color: #1a1a1a !important;
         /* لون تمييزي */
         visibility: visible !important;
         opacity: 1 !important;
     }

     /* الكلاس الذي سيتم إضافته بالـ JS */
     .dropdown-content.show-now {
         display: block !important;
     }

     .dropdown:hover .dropdown-content {
         display: block;
     }

     .dropdown-content li a {
         padding: 10px !important;
         font-size: 16px !important;
         border-left: 2px solid #555 !important;
         /* خط جانبي لتمييز المنتجات */
     }

     .header li {
         float: none;
         /* إلغاء الطفو */
         display: inline-block;
         width: auto;
         /* ترك العرض ليتناسب مع طول الكلمة */
         margin: 5px 8px;
         /* مسافة بين الروابط */
     }

     .header li a {
         font-size: 14px;
         /* تصغير الخط ليناسب الشاشة */
         white-space: nowrap;
     }

     /* إخفاء العناصر الجانبية أو تعديلها للجوال */
     .side {
         display: none;
         /* يفضل إخفاؤها في الجوال لتوفير مساحة */
     }

     .header-contact {
         padding-top: 150px;
         /* تقليل المسافة العلوية للمحتوى */
         padding-left: 20px;
         text-align: center;

     }



     .header {
         /* text-align: left; */
         color: aliceblue;

         background-position: 700px, 30px;
     }

     .wel {
         font-family: "Open Sans", arial;
         font-size: 20px;

     }

     .header p {
         color: rgba(255, 255, 255, 0.92);
         display: block;
         font-family: "Open Sans", arial;
         font-size: 30px;
         font-weight: 400;
         height: 20;

         line-height: 20px;

     }

     .btn {
         padding: 15px 15px;
         background-color: aliceblue;
         border-radius: 10px;
         margin-top: 35px;
         width: 100px;
         height: 30px;

         border: none;
         font-size: 11px;
         font-weight: 700;
         height: 50.5px;
         letter-spacing: 0.2px;
         line-height: 10.5px;
         margin-bottom: 100px;
         padding-bottom: 1px;
         padding-left: 8px;
         padding-right: 8px;
         padding-top: 5px;
         margin-top: 20px;

     }



     /* media why  */

     .about h2 {
         padding-left: 10px;
         line-height: 55px;
         font-size: 35px;
         font-family: 'Open Sans', sans-serif;
     }

     .why-content p {
         width: 70%;
         text-align: center;
         margin: auto;
         line-height: 30px;
         color: #999999;
         font-weight: 400;
         margin-bottom: 60px;
         font-size: 21px;

     }

     .why-content h2 {
         text-align: center;
         padding-top: 90px;
         color: #fff;
         font-size: 35px;
         margin-bottom: 20px;

     }

     .p {
         overflow: hidden;
     }

     .c {


         color: #999999;
         margin-left: 0px;
         font-size: 15px;
         margin-bottom: 50px;


     }

     .p p {
         width: auto;
         font-weight: 400;
         font-size: 1rem;
         text-align: center;
     }

     .p h3 {
         padding-left: 15px;

         font-weight: 600;
         color: #fff;
         line-height: 24.8px;
         margin-bottom: 20px;
     }

     .bestsealler p {
         width: 70%;
         text-align: center;
         margin: auto;
         line-height: 29px;
         color: #999999;
         font-weight: 400;
         margin-bottom: 40px;
         font-size: 20px;
     }

     .bestsealler h2 {
         text-align: center;
         padding-top: 90px;
         color: #fff;
         font-size: 29px;
         margin-bottom: 15px;
     }

     .felling button {
         text-align: center;
         justify-content: center;
         margin: auto;
         left: 300px;
         margin-top: 70px;
         background-attachment: scroll;
         background-clip: border-box;
         background-color: rgba(0, 0, 0, 0);
         background-image: none;
         border: #fff;
         border-style: solid;
         border-radius: 0;
         color: #fff;
         cursor: pointer;
         width: 180px;
         font-size: 15px;
         height: 70px;

     }

     .footer {

         color: #797979;
         padding-left: 18px;



     }

     .sec {



         width: 100%;
         display: block;

     }

     h4 {
         padding-top: 50px;
         font-style: calc();
         color: #fff;
         margin-bottom: 20px;
     }

     .footer p {
         line-height: 30px;
         margin-bottom: 7px;
         margin-top: 7px;
         font-size: 16px;
     }

     .footer li {

         border-bottom: #858383;
         border-style: solid;
         border-width: 1px;
         border-top: none;
         border-left: none;
         border-right: 0;


     }

     .sec .l2 {
         float: left;
         width: 70%;
         height: 40px;
         margin-bottom: 40px;


     }

     .l2 img {
         float: left;
         width: 30%;


     }

     .l2 a {
         text-decoration: none;
         color: #fffefe;
         display: block;

     }

     .hi {
         width: 66px;

         padding-top: 20px;
     }

     .sec a {
         text-decoration: none;
         color: #797979;
         line-height: 50px;
         font-weight: 500;
     }

     .footer span {
         display: block;
     }

     .e p {
         width: 75%;
         padding-left: 16px;
         display: inline;
     }

     .about .imga2 {
         float: left;
         width: 50%;
         background-image: url('../img/square-1.jpg');

         height: 100vh;
         background-position: 600px, 4px, 0px, 100px;

     }

 }

 .integration-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }

 /* تنسيق النصوص */
 .text-section {
     flex: 1;

 }



 .divider {
     width: 150px;
     height: 2px;
     background-color: #ffffff;
     margin-bottom: 25px;
 }

 .text-section p {
     font-size: 1.1rem;
     color: #cccccc;
     line-height: 1.6;
     margin-bottom: 40px;
     width: auto;
 }

 /* تنسيق بطاقة الدعم (مستوحى من الصورة الأولى) */
 .support-card {
     border: 1px solid #444;
     border-radius: 15px;
     padding: 20px;

 }

 .support-card-inner {
     border: 1px solid #666;
     /* الخط الداخلي */
     border-radius: 12px;
     padding: 30px;
     text-align: center;
 }

 .support-card i {
     font-size: 40px;
     color: #007bff;
     margin-bottom: 15px;
 }

 .support-card h3 {
     margin-bottom: 10px;
 }

 .email-text {
     font-size: 0.9rem !important;
     color: #888 !important;
     margin-bottom: 20px !important;
 }

 .send-btn {
     color: #ffffff;
     text-decoration: underline;
     font-weight: bold;
     cursor: pointer;
 }


 /* تنسيق الصورة */
 .image-section {
     flex: 1;
     display: flex;
     justify-content: center;
 }

 .main-panel {
     max-width: 100%;
     height: auto;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
 }

 /* ضبط استجابة الموبايل */
 @media (max-width: 768px) {
     .integration-content {
         flex-direction: column;
         text-align: center;
     }

     .text-section h2 {
         font-size: 0.1rem;

     }

     .divider {
         margin: 0 auto 25px;
     }

     .support-card {
         margin: 0 auto;
     }


 }

 /*FEDBACK/////////////////////////////////////////////////////////////*/
 /* السكشن الرئيسي */
 /* السكشن الرئيسي */
 .testimonials {
     background-color: #1a1818;
     padding: 80px 5%;
     text-align: center;
     position: relative;
     overflow: hidden;
     /* لمنع الكروت من الخروج عن حدود الشاشة */
 }

 .test-slider-wrapper {
     position: relative;
     max-width: 1200px;
     margin: 50px auto 0;
 }

 .test-container {
     display: flex;
     /* ترتيب الكروت أفقياً */
     gap: 25px;
     transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
     /* حركة انزلاقية ناعمة */
 }

 .test-card {
     background-color: #353030;
     min-width: calc(33.33% - 17px);
     /* عرض الكرت (3 كروت في الصف) */
     padding: 40px 30px;
     border-radius: 20px;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-sizing: border-box;
     text-align: left;
 }

 .quote-icon {
     font-size: 50px;
     color: #4a4a4a;
     font-family: serif;
     position: absolute;
     top: 10px;
     left: 20px;
 }

 .client-info {
     color: #cccccc;
 }

 .test-card p {
     color: #cccccc;
     font-style: italic;
     line-height: 1.6;
     margin-top: 20px;
     margin-bottom: 25px;
 }

 /* تنسيق الأسهم */
 .nav-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.05);
     color: white;
     border: 1px solid rgba(7, 6, 6, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     cursor: pointer;
     z-index: 100;
     transition: 0.3s;
 }

 .nav-btn:hover {
     background: white;
     color: black;
 }

 .prev {
     left: -60px;
 }

 .next {
     right: -60px;
 }

 /* إخفاء الأسهم إذا ضاق المكان وتحويلها لسحب يدوي */
 @media (max-width: 1300px) {
     .prev {
         left: 10px;
     }

     .next {
         right: 10px;
     }
 }

 @media (max-width: 768px) {
     .test-card {
         min-width: calc(100%);
         /* كرت واحد في الموبايل */
     }
 }

 /* start felling */
 .felling {
     position: relative;
     height: 75vh;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* تنسيق الفيديو ليكون خلفية كاملة */
 .back-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* لضمان عدم تمطيط الفيديو وملئه للمساحة */
     z-index: 1;
     /* الفيديو في الطبقة الأولى */
 }

 /* إضافة طبقة تعتيم (Overlay) لجعل النص أكثر وضوحاً */
 .felling::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.1);
     /* تعتيم بنسبة 50% */
     z-index: 2;
     /* التعتيم فوق الفيديو */
 }

 /* ضبط المحتوى ليظهر فوق كل شيء */
 .fellig-cotent {
     position: relative;
     z-index: 3;
     /* النص في أعلى طبقة */
     text-align: center;
     color: #fff;
 }

 .fellig-cotent h2 {
     font-size: 3rem;
     margin-bottom: 10px;
     font-weight: bold;
 }

 .fellig-cotent p {
     font-size: 1.5rem;
     color: #ddd;
 }

 /* تنسيق الزر */
 .email-btn {
     display: inline-block;
     margin-top: 25px;
     padding: 12px 35px;
     background-color: transparent;
     color: #ffffff;
     text-decoration: none;
     font-size: 1.1rem;
     font-weight: bold;
     border: 2px solid #ffffff;
     border-radius: 30px;
     /* زوايا منحنية لتناسب هوية الموقع */
     transition: all 0.3s ease;
     cursor: pointer;
 }

 /* التأثير عند مرور الماوس */
 .email-btn:hover {
     background-color: #ffffff;
     color: #000000;
     transform: scale(1.05);
     /* تكبير بسيط عند اللمس */
 }

 /* ضبط الزر للموبايل */
 @media (max-width: 480px) {
     .email-btn {
         padding: 10px 25px;
         font-size: 0.9rem;
     }
 }

 /* ضبط التجاوب للموبايل */
 @media (max-width: 768px) {
     .felling {
         height: 50vh;
         /* تصغير الارتفاع في الموبايل */
     }

     .fellig-cotent h2 {
         font-size: 2rem;
     }
 }

 /* start footr ///////////////////////////////////////////////////////////////////*/
 .footer-content {
     background-color: #1a1818;
     /* لون متناسق مع الموقع */
     padding: 60px 0;
     width: 100%;
 }

 .footer {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .footer .sec {
     flex: 1;
     min-width: 200px;
     /* تضمن عدم صغر القسم جداً */
     margin: 10px;
     color: #fff;
 }

 .footer .sec h4 {
     font-size: 1.2rem;
     margin-bottom: 25px;
     text-transform: uppercase;
     position: relative;
     padding-bottom: 10px;
 }

 /* إضافة خط صغير تحت عناوين الفوتر لتناسق التصميم */
 .footer .sec h4::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 30px;
     height: 2px;
     background-color: #fff;
 }

 .footer .sec p,
 .footer .sec li,
 .footer .sec a {
     color: #b1b1b1;
     /* لون رمادي خفيف للقراءة المريحة */
     font-size: 0.9rem;
     line-height: 1.8;
     text-decoration: none;
     list-style: none;
 }

 /* تنسيق قسم المنتجات (الصور والنصوص بجانب بعض) */
 .footer .sec ul li {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
     border-bottom: 1px solid #333;
     padding-bottom: 10px;
 }

 .footer .sec .hi {
     width: 50px;
     height: 50px;
     object-fit: contain;
     background: #fff;
     padding: 2px;
     border-radius: 4px;
 }


 /* تنسيق قسم الهيرو */
 .support-hero {
     height: 50vh;
     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/support-bg.jpg');
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
 }


 /* تنسيق بطاقات التواصل */
 .support-cards {
     padding: 80px 5%;
     background-color: #1a1818;
     /* اللون الموحد للموقع */
 }

 .support-cards .container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .card {
     background: #252323;
     padding: 40px 20px;
     border-radius: 15px;
     text-align: center;
     transition: 0.3s;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .card:hover {
     transform: translateY(-10px);
     border-color: #ffffff;
 }

 .card i {
     font-size: 2.5rem;
     color: #ffffff;
     margin-bottom: 20px;
 }

 .card h3 {
     margin-bottom: 10px;
     color: #fff;
 }

 .card p {
     color: #aaa;
     margin-bottom: 20px;
     font-size: 0.1rem;
 }

 .card-link {
     color: #ffffff;
     text-decoration: none;
     font-weight: bold;
     border-bottom: 1px solid #ffffff;
     padding-bottom: 5px;
 }

 @media (max-width: 768px) {
     .support-hero h1 {
         font-size: 2rem;
     }
 }

 /* تنسيق الأسئلة الشائعة */
 .faq-section {
     padding: 60px 5%;
     background-color: #1a1818;
     color: #fff;
     text-align: center;
 }

 .faq-container {
     max-width: 800px;
     margin: 40px auto;
     text-align: left;
 }

 .faq-item {
     background: rgba(255, 255, 255, 0.02);
     padding: 20px;
     margin-bottom: 15px;
     border-radius: 8px;
 }

 .faq-item h4 {
     color: #ffffff;
     margin-bottom: 10px;
 }

 .faq-item p {
     color: #ccc;
     font-size: 0.95rem;
 }








 @media (max-width: 768px) {
     .footer {
         flex-direction: column;
         /* ترتيب العناصر عمودياً */
         text-align: center;
         /* توسيط النصوص في الموبايل */
     }

     .footer .sec {
         margin-bottom: 40px;
         width: 100%;
     }

     .footer .sec h4::after {
         left: 50%;
         transform: translateX(-50%);
         /* توسيط الخط تحت العنوان في الموبايل */
     }

     /* ضبط محاذاة عناصر التواصل في الموبايل */
     .footer .sec ul li {
         justify-content: center;
         flex-direction: column;
         border-bottom: none;
     }

     .footer .sec .l2 {
         margin-bottom: 10px;
     }

     /* جعل أيقونات التواصل تظهر بجانب النص حتى في الموبايل */
     .footer .sec .e {
         flex-direction: row !important;
         justify-content: center;
         gap: 10px;
     }
 }

 /* startend */
 .end-end {

     height: 30px;
 }

 .end {


     overflow: hidden;

 }

 .end span {
     float: left;
     width: 40%;
     color: #797979;

     padding-left: 40px;
 }

 .end ul {
     float: left;
     width: 12%;
     overflow: hidden;

     margin-left: 600px
 }

 .end li {
     float: left;
     width: 30px;

 }

 .end .fa-brands {
     color: #949292;
     font-size: 20px;
 }



 /* lklkllll */
 @media (max-width: 700px) {
     h1 {

         font-family: 'Alegreya Sans', sans-serif;
         font-weight: 400px;
         line-height: 30.2px;
         display: block;
         font-family: "Open Sans", arial;
         font-size: 50px;
         font-weight: bold;
         margin-bottom: 29px;


     }

     /* 1. إخفاء القائمة في الحالة العادية */
     .nav {
         display: none;
     }

     /* 2. تنسيق القائمة عند التفعيل (تظهر عمودية في نصف الشاشة) */
     .nav.active {
         display: flex !important;
         position: fixed !important;
         top: 0 !important;
         right: 0 !important;
         /* تبدأ من اليمين */
         width: 60% !important;
         /* تأخذ أكثر من نصف الشاشة قليلاً لراحة العين */
         height: 100vh !important;
         background-color: rgba(0, 0, 0, 0.95) !important;
         /* خلفية سوداء فخمة */
         flex-direction: column !important;
         /* ترتيب عمودي */
         justify-content: flex-start !important;
         /* تبدأ من الأعلى */
         padding-top: 80px !important;
         /* إزاحة للأسفل لكي لا تغطي الزر */
         z-index: 1000000 !important;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
         /* ظل لإبراز الانفصال عن الموقع */
     }

     /* 3. تنسيق قائمة الروابط */
     .nav-list {
         display: flex !important;
         flex-direction: column !important;
         /* عمودي */
         align-items: flex-start !important;
         /* محاذاة النص لليمين/البداية */
         width: 100%;
         padding-left: 30px;
         /* مسافة جانبية للنص */
     }

     .nav-list li {
         list-style: none;
         margin: 15px 0;
         width: 100%;
     }

     .nav-list li a {
         color: white !important;
         font-size: 20px !important;
         text-decoration: none;
         display: block;
         width: 100%;
         transition: 0.3s;
     }

     /* تأثير بسيط عند لمس الرابط */
     .nav-list li a:active {
         color: #ffcc00 !important;
         /* أو لون هويتك البصرية */
     }

     /* 4. زر الهمبرجر (تأكد من وجوده في HTML) */
     .menu-toggle {
         display: block !important;
         position: fixed;
         top: 0;
         right: 0;
         z-index: 1000001 !important;
         /* دائماً فوق القائمة */
         font-size: 28px;
         color: white;
         cursor: pointer;
         background: rgba(0, 0, 0, 0.3);
         padding: 5px 0px;
         border-radius: 5px;
     }

     /* جعل القائمة المنسدلة تظهر تحت كلمة Products بشكل عمودي */
     /* القائمة المنسدلة - إجبارها على أخذ مساحة عمودية */
     .dropdown-content {
         display: none !important;
         /* مخفية افتراضياً */
         position: static !important;
         /* لتأخذ حيزاً عمودياً */
         width: 100% !important;
         background-color: #1a1a1a !important;
         /* لون تمييزي */
         visibility: visible !important;
         opacity: 1 !important;
     }

     /* الكلاس الذي سيتم إضافته بالـ JS */
     .dropdown-content.show-now {
         display: block !important;
     }

     .dropdown:hover .dropdown-content {
         display: block;
     }

     .dropdown-content li a {
         padding: 10px !important;
         font-size: 16px !important;
         border-left: 2px solid #555 !important;
         /* خط جانبي لتمييز المنتجات */
     }

     .header-contact {
         padding-top: 50px;
         /* تقليل المسافة العلوية للمحتوى */
         padding-left: 0px;
         text-align: center;
     }


     .header {
         /* text-align: left; */
         color: aliceblue;
         color: aliceblue;

         background-size: cover;
         background-position: center;
     }

     .wel {
         font-family: "Open Sans", arial;
         font-size: 10px;
         line-height: 50px;

     }

     .header p {
         color: rgba(255, 255, 255, 0.92);
         display: block;
         font-family: "Open Sans", arial;
         font-size: 30px;
         font-weight: 400;
         height: 20;

         line-height: 50px;

     }

     .btn {

         background-color: aliceblue;
         border-radius: 10px;
         margin-top: 35px;
         width: 100px;

         border: none;
         font-size: 11px;
         font-weight: 700;
         height: 50.5px;
         letter-spacing: 0.2px;
         line-height: 10.5px;
         margin-bottom: 100px;
         padding-bottom: 1px;
         padding-left: 8px;
         padding-right: 8px;
         padding-top: 5px;
         margin-top: 20px;

     }

     .footer {

         color: #797979;
         padding-left: 18px;



     }

     .sec {



         width: 100%;
         display: block;

     }

     h4 {
         padding-top: 50px;
         font-style: calc();
         color: #fff;
         margin-bottom: 20px;
     }

     .footer p {
         line-height: 30px;
         margin-bottom: 7px;
         margin-top: 7px;
         font-size: 16px;
     }

     .footer li {

         border-bottom: #858383;
         border-style: solid;
         border-width: 1px;
         border-top: none;
         border-left: none;
         border-right: 0;


     }

     .sec .l2 {
         float: left;
         width: 70%;
         height: 40px;
         margin-bottom: 40px;


     }

     .l2 img {
         float: left;
         width: 30%;


     }

     .l2 a {
         text-decoration: none;
         color: #fffefe;
         display: block;

     }

     .hi {
         width: 66px;

         padding-top: 20px;
     }

     .sec a {
         text-decoration: none;
         color: #797979;
         line-height: 50px;
         font-weight: 500;
     }

     .footer span {
         display: block;
     }

     .e p {
         width: 75%;
         padding-left: 16px;
         display: inline;
     }


     /* media-about */





     /* media-feeling */
     .felling {

         height: 75vh;

         background-position: 1090px, 80px;

     }

     .felling h2 {
         text-align: center;
         color: #fff;
         font-size: 22px;
         padding-top: 130px;


     }

     .felling p {
         text-align: center;
         color: #fff;
         font-size: 16px;
         font-style: normal;
         font-weight: 400;
         height: 30px;
         line-height: 30px;

     }

     .felling button {
         text-align: center;
         margin: auto;
         left: 120px;
         margin-top: 70px;
         background-attachment: scroll;
         background-clip: border-box;
         background-color: rgba(0, 0, 0, 0);
         background-image: none;
         border: #fff;
         border-style: solid;
         border-radius: 0;
         color: #fff;
         cursor: pointer;
         width: 130px;
         font-size: 15px;
         height: 70px;

     }

     /* media why */
     .why-content p {
         width: 60%;
         text-align: center;
         margin: auto;
         line-height: 25px;
         color: #999999;
         font-weight: 400;
         margin-bottom: 60px;

         font-size: 0.1rem;
     }

     .why-content h2 {
         text-align: center;
         padding-top: 90px;
         color: #fff;
         font-size: 29px;
         margin-bottom: 20px;

     }

     .p {
         overflow: hidden;
     }

     .c {

         width: 100%;
         color: #999999;
         margin-left: 0px;
         font-size: 15px;
         margin-bottom: 50px;


     }

     .p p {
         padding: 20px;
         font-weight: 400;

         font-size: 0.1rem;


     }

     .p h3 {
         padding-left: 15px;

         font-weight: 600;
         color: #fff;
         line-height: 24.8px;
         margin-bottom: 20px;
     }

     /* media about1 */

     .about {
         overflow: hidden;
         background-color: rgb(19, 17, 17);
         height: 100vh;
         padding-left: 1rem;
         position: relative;
         /* ضروري لضمان ترتيب الطبقات */
     }

     .about .learn-about {
         width: 30%;
         float: left;
         position: relative;
         /* لرفع النص فوق أي تداخل */
         z-index: 10;
         /* قيمة عالية لضمان عدم تأثره بشفافية العناصر الأخرى */
         padding-top: 8rem;
     }

     .about .imga {
         float: left;
         width: 70%;
         height: 100%;
         /* تأكدي من إعطائها طولاً لتظهر */
         background-image: url('../img/header1.PNG');
         background-size: cover;
         background-position: center;
         opacity: 0.4;
         /* الشفافية هنا تؤثر على الصورة فقط */
     }

     .learn-about p {
         /* زيادة عرض الفقرة لتتمكن من الامتداد فوق مساحة الصورة */
         width: 25rem;
         font-size: 1.1rem;
         /* جعل اللون أبيض صريح وقوي لكسر الشفافية */
         color: #e7e2e2;

         padding-left: 1.2rem;
         line-height: 1.2rem;
         /* زيادة المسافة بين الأسطر للوضوح */
         font-weight: 500;
         /* وزن متوسط ليكون أوضح من 400 */
         text-align: left;

         /* إضافة ظل خلف النص يجعله يبرز جداً فوق الصورة الملونة */
         text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);

         position: relative;
         z-index: 20;
     }

     .clear {
         clear: both;
     }

     .shoeshat img {
         width: 100px;
         height: 100px;

     }


     .shoeshat a {
         text-decoration: none;
         line-height: 10px;
         color: #fff;

         margin-right: 70PX;


     }

     .price {
         display: block;
         padding-right: 30px;


     }

     .shoeshat .item {


         background-color: rgb(49, 49, 49);
         width: 100px;
         text-align: center;
         margin-left: 30px;
         margin-bottom: 40px;

     }

     .about h2 {
         padding-left: 1rem;
         width: 15rem;
         line-height: 38px;
         font-size: 2rem;
         font-family: 'Open Sans', sans-serif;
     }



     /* media end  */
     .end-end {


         height: 30px;
     }

     .end {


         overflow: hidden;

     }

     .end span {
         text-align: center;
         width: 80%;
         color: #797979;

         padding-right: 20px;
     }

     .end ul {

         width: 100%;
         overflow: hidden;

         margin-left: 120px;


     }

     .end li {
         float: left;
         width: 30px;

     }


 }

 @media (max-width :1200px) {
     h1 {

         font-family: 'Alegreya Sans', sans-serif;
         font-weight: 400px;
         line-height: 30.2px;
         display: block;
         font-family: "Open Sans", arial;
         font-size: 50px;
         font-weight: 400;
         margin-bottom: 29px;
         margin-top: 13px;

     }

     .nav {
         display: none;
     }

     /* 2. تنسيق القائمة عند التفعيل (تظهر عمودية في نصف الشاشة) */
     .nav.active {
         display: flex !important;
         position: fixed !important;
         top: 0 !important;
         right: 0 !important;
         /* تبدأ من اليمين */
         width: 60% !important;
         /* تأخذ أكثر من نصف الشاشة قليلاً لراحة العين */
         height: 100vh !important;
         background-color: rgba(0, 0, 0, 0.95) !important;
         /* خلفية سوداء فخمة */
         flex-direction: column !important;
         /* ترتيب عمودي */
         justify-content: flex-start !important;
         /* تبدأ من الأعلى */
         padding-top: 80px !important;
         /* إزاحة للأسفل لكي لا تغطي الزر */
         z-index: 1000000 !important;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
         /* ظل لإبراز الانفصال عن الموقع */
     }

     /* 3. تنسيق قائمة الروابط */
     .nav-list {
         display: flex !important;
         flex-direction: column !important;
         /* عمودي */
         align-items: flex-start !important;
         /* محاذاة النص لليمين/البداية */
         width: 100%;
         padding-left: 30px;
         /* مسافة جانبية للنص */
     }

     .nav-list li {
         list-style: none;
         margin: 15px 0;
         width: 100%;
     }

     .nav-list li a {
         color: white !important;
         font-size: 20px !important;
         text-decoration: none;
         display: block;
         width: 100%;
         transition: 0.3s;
     }

     /* تأثير بسيط عند لمس الرابط */
     .nav-list li a:active {
         color: #ffcc00 !important;
         /* أو لون هويتك البصرية */
     }

     /* 4. زر الهمبرجر (تأكد من وجوده في HTML) */
     .menu-toggle {
         display: block !important;
         position: fixed;
         top: 0;
         right: 0;
         z-index: 1000001 !important;
         /* دائماً فوق القائمة */
         font-size: 28px;
         color: white;
         cursor: pointer;
         background: rgba(17, 9, 9, 0.3);
         padding: 5px 12px;
         border-radius: 5px;
     }

     /* جعل القائمة المنسدلة تظهر تحت كلمة Products بشكل عمودي */
     /* القائمة المنسدلة - إجبارها على أخذ مساحة عمودية */
     .dropdown-content {
         display: none !important;
         /* مخفية افتراضياً */
         position: static !important;
         /* لتأخذ حيزاً عمودياً */
         width: 100% !important;
         background-color: #1a1a1a !important;
         /* لون تمييزي */
         visibility: visible !important;
         opacity: 1 !important;
     }

     /* الكلاس الذي سيتم إضافته بالـ JS */
     .dropdown-content.show-now {
         display: block !important;
     }

     .dropdown:hover .dropdown-content {
         display: block;
     }

     .dropdown-content li a {
         padding: 10px !important;
         font-size: 16px !important;
         border-left: 2px solid #555 !important;
         /* خط جانبي لتمييز المنتجات */
     }

     .header li {
         float: none;
         /* إلغاء الطفو */
         display: inline-block;
         width: auto;
         /* ترك العرض ليتناسب مع طول الكلمة */
         margin: 5px 8px;
         /* مسافة بين الروابط */
     }

     .header li a {
         font-size: 14px;
         /* تصغير الخط ليناسب الشاشة */
         white-space: nowrap;
     }

     /* إخفاء العناصر الجانبية أو تعديلها للجوال */
     .side {
         display: none;
         /* يفضل إخفاؤها في الجوال لتوفير مساحة */
     }

     .header-contact {
         padding-top: 150px;
         /* تقليل المسافة العلوية للمحتوى */
         padding-left: 20px;
         text-align: center;

     }



     .header {
         /* text-align: left; */
         color: aliceblue;

         background-position: 700px, 30px;
     }

     .wel {
         font-family: "Open Sans", arial;
         font-size: 20px;

     }

     .header p {
         color: rgba(255, 255, 255, 0.92);
         display: block;
         font-family: "Open Sans", arial;
         font-size: 30px;
         font-weight: 400;
         height: 20;

         line-height: 20px;

     }

     .btn {
         padding: 15px 15px;
         background-color: aliceblue;
         border-radius: 10px;
         margin-top: 35px;
         width: 100px;
         height: 30px;

         border: none;
         font-size: 11px;
         font-weight: 700;
         height: 50.5px;
         letter-spacing: 0.2px;
         line-height: 10.5px;
         margin-bottom: 100px;
         padding-bottom: 1px;
         padding-left: 8px;
         padding-right: 8px;
         padding-top: 5px;
         margin-top: 20px;

     }



     /* media why  */

     .about h2 {
         padding-left: 10px;
         line-height: 55px;
         font-size: 35px;
         font-family: 'Open Sans', sans-serif;
     }

     .why-content p {
         width: 70%;
         text-align: center;
         margin: auto;
         line-height: 30px;
         color: #999999;
         font-weight: 400;
         margin-bottom: 60px;
         font-size: 21px;

     }

     .why-content h2 {
         text-align: center;
         padding-top: 90px;
         color: #fff;
         font-size: 35px;
         margin-bottom: 20px;

     }

     .p {
         overflow: hidden;
     }

     .c {

         width: 100%;
         color: #999999;
         margin-left: 0px;
         font-size: 15px;
         margin-bottom: 50px;


     }

     .p p {
         padding-left: 11px;
         font-weight: 400;
         font-size: 1rem;
         text-align: center;
     }

     .p h3 {
         padding-left: 15px;

         font-weight: 600;
         color: #fff;
         line-height: 24.8px;
         margin-bottom: 20px;
     }

     .bestsealler p {
         width: 70%;
         text-align: center;
         margin: auto;
         line-height: 29px;
         color: #999999;
         font-weight: 400;
         margin-bottom: 40px;
         font-size: 20px;
     }

     .bestsealler h2 {
         text-align: center;
         padding-top: 90px;
         color: #fff;
         font-size: 29px;
         margin-bottom: 15px;
     }

     .felling button {
         text-align: center;
         justify-content: center;
         margin: auto;
         left: 300px;
         margin-top: 70px;
         background-attachment: scroll;
         background-clip: border-box;
         background-color: rgba(0, 0, 0, 0);
         background-image: none;
         border: #fff;
         border-style: solid;
         border-radius: 0;
         color: #fff;
         cursor: pointer;
         width: 180px;
         font-size: 15px;
         height: 70px;

     }

     .footer {

         color: #797979;
         padding-left: 18px;



     }

     .sec {



         width: 100%;
         display: block;

     }

     h4 {
         padding-top: 50px;
         font-style: calc();
         color: #fff;
         margin-bottom: 20px;
     }

     .footer p {
         line-height: 30px;
         margin-bottom: 7px;
         margin-top: 7px;
         font-size: 16px;
     }

     .footer li {

         border-bottom: #858383;
         border-style: solid;
         border-width: 1px;
         border-top: none;
         border-left: none;
         border-right: 0;


     }

     .sec .l2 {
         float: left;
         width: 70%;
         height: 40px;
         margin-bottom: 40px;


     }

     .l2 img {
         float: left;
         width: 30%;


     }

     .l2 a {
         text-decoration: none;
         color: #fffefe;
         display: block;

     }

     .hi {
         width: 66px;

         padding-top: 20px;
     }

     .sec a {
         text-decoration: none;
         color: #797979;
         line-height: 50px;
         font-weight: 500;
     }

     .footer span {
         display: block;
     }

     .e p {
         width: 75%;
         padding-left: 16px;
         display: inline;
     }

     .about .imga2 {
         float: left;
         width: 50%;
         background-image: url('../img/square-1.jpg');

         height: 100vh;
         background-position: 600px, 4px, 0px, 100px;

     }

 }