@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lateef&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alexandria&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Beiruti&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic&display=swap');






/* استيراد خط جميل */

* {
    box-sizing: border-box;
    /* تضمين padding والحدود في حساب الأبعاد */
}

body {
    direction: rtl;
    /* font-family: Arial, sans-serif; */
    margin: 0;
    /* إزالة الهوامش الافتراضية */
    padding-top: 60px;
    /* إضافة مساحة علوية لتعويض ارتفاع الهيدر الثابت */
    overflow-x: hidden;
    /* إخفاء التمرير الأفقي إذا كان موجودًا */
    background-color: #f4f4f4;
    font-family: 'Roboto', sans-serif;
    /* استخدام الخط المستورد */

}
h2 {
    font-family: 'El Messiri', sans-serif; /* تعيين الخط كخط أساسي */
}

h3 {
    font-family: 'Alexandria', serif; /* تعيين الخط كخط أساسي */
}
h4
{
    font-family: 'Beiruti', serif; /* تعيين الخط كخط أساسي */
    font-size: 20px;
}

h5
{
    font-family: 'Beiruti', serif; /* تعيين الخط كخط أساسي */
    font-size: 20px;
    color: green;
    
}

p {
    font-family: 'Lateef', cursive; /* تعيين الخط كخط أساسي */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: linear-gradient(to right, #7d131a, #e71b31, #ffffff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0.90;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    animation: sparkle 3s infinite;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.4;
    }
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    width: 150px;
    height: 80px;
    margin-right: 10px;
}

.company-name {
    color: white;
    text-align: center;
}

nav {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    position: relative; /* تأكد من أن nav يمكن أن يحتل موقعه بشكل صحيح */
}
nav a {
    position: relative;
    margin: 0 10px; /* هامش بين الروابط */
    padding: 10px 15px; /* مساحة داخلية للرابط */
    color: white;
    text-decoration: none;
    font-family: 'Beiruti', serif;
    font-size: 20px;
    font-weight: bold;
    transition: color 0.3s;
}

@media (max-width: 768px) {
    nav a {
        margin: 5px 0; /* تقليل الهامش بين العناصر */
        padding: 5px 8px; /* تقليل المساحة الداخلية */
        font-size: 18px; /* تقليل حجم الخط */
    }
}

nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(211, 211, 211, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 5px;
    z-index: -1;
}

nav a:hover::after {
    opacity: 1;
}

nav a:hover {
    color: black;
}

.menu-toggle {
    display: none; /* إخفاء الزر في الشاشات الكبيرة */
    background: none; 
    border: none; 
    font-size: 24px; 
    color: white; 
    cursor: pointer; 
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* عرض الزر في الشاشات الصغيرة */
    }
    
    nav {
        flex-direction: column; /* تغيير الاتجاه إلى عمودي */
        justify-content: flex-start; /* محاذاة العناصر إلى الأعلى */
        position: absolute; /* جعل القائمة منسدلة */
        left: 0; 
        top: 50px; 
        color: #7d131a; /* التأكد من أن الخلفية بيضاء في الشاشات الصغيرة */

        background: rgba(255, 255, 255, 0.9); /* خلفية بيضاء مع شفافية */
        width: 160px; 
        max-height: 0; /* مخفي بشكل افتراضي */
        overflow: hidden; 
        opacity: 0.10; 
        transition: max-height 0.3s ease, opacity 0.3s ease; /* تأثير الانتقال */
    }
 

    nav.show {
        max-height: 300px; /* ارتفاع قصوى عند العرض */
        opacity: 1; /* عرض العناصر */
        color: black; /* تغيير لون النص إلى الأسود */

    }

    nav a {
        color: black; /* لون النص */
        margin: 5px 0; /* تقليل الهامش بين العناصر */
        padding: 8px 10px; /* تقليل المساحة الداخلية */
        font-size: 18px; /* تقليل حجم الخط */
    }

    nav a:hover {
        color: #7d131a; /* تغيير لون النص عند المرور في الشاشات الصغيرة */
        background-color: rgba(211, 211, 211, 0.5); /* إضافة لون خلفية رمادي فاتح عند المرور */
    }
    .logo {
        width: 120px; /* تقليل عرض الشعار */
    }
}

@media (min-width: 769px) {
    nav {
        max-height: none; /* اجعل nav دائمًا مرئيًا على الشاشات الكبيرة */
        opacity: 1; /* اجعل العناصر مرئية */
        position: static; /* عودة الوضع الطبيعي للقائمة */
        display: flex; /* عرض العناصر بشكل أفقي */

    }
}



/*  سليدر اعلانات  */


.slider {
    direction: ltr;
    height: 620px; /* تحديد ارتفاع السلايدر */
    overflow: hidden; /* إخفاء الأجزاء الزائدة */
    position: relative; /* لجعل العناصر الداخلية تتداخل بشكل صحيح */
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%; /* ملء السلايدر بالكامل */
}

.slide {
    min-width: 100%;
    height: 100%; /* ملء كل شريحة بالكامل */
    position: relative; /* لجعل العناصر داخل الشريحة تستخدم هذا */
}

.slides img {
    margin-top: 60px;
    width: 100%;
    height: 100%; /* ملء الصورة بالكامل */
    object-fit: cover; /* الحفاظ على نسبة العرض إلى الارتفاع للصورة */
    display: block; /* إزالة المساحة السفلية */

    
}

.dots {
    text-align: center;
    margin-top: 10px; /* يمكنك ضبط هذه القيمة حسب الحاجة */
    position: absolute; /* لجعلها فوق السلايدر */
    bottom: 10px; /* وضعها في الأسفل */
    left: 50%;
    transform: translateX(-50%); /* توسيط */
    z-index: 2; /* اجعلها فوق أي عناصر أخرى */
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #bbb; /* لون الدائرة */
    border-radius: 50%; /* شكل دائري */
    cursor: pointer; /* تغيير شكل المؤشر عند التحويم */
    transition: background-color 0.3s ease; /* تأثير تغيير اللون */
}

.dot.active {
    background-color: #717171; /* لون الدائرة النشطة */
}
/* عن الشركة  */
#page {
    margin: 20px 0 0 20px;
    /* هامش من الأعلى واليسار */
}

.content {
    padding: 20px;
    margin-right: 20px;
    /* هامش من جهة اليمين بمقدار 20 بكسل */
    text-align: right;
    /* محاذاة النص لليمين */
    background: white;
    /* خلفية بيضاء */
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* ظل خفيف */
    position: relative;
    overflow: hidden;
}

/* إضافة لمعة شفافة */
.content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    /* لمعة شفافة */
    pointer-events: none;
    /* لمنع تأثيرات الفأرة */
    animation: sparkle 3s infinite;
    /* تأثير اللمعة المتكرر */
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.4;
        /* زيادة اللمعة في منتصف الدورة */
    }
}


h2 {
    text-align: center;
    /* توسيط العناوين */
}

.logo-container {

    line-height: 2.10;
    /* يمكنك تعديل الرقم لزيادة أو تقليل المسافة */
    margin-bottom: 20px;
    /* مسافة أسفل الفقرة إذا لزم الأمر */

}

.tabs {
    display: flex;
    /* flex-direction: row-reverse; */
    /* لجعل التاب من جهة اليمين */
    cursor: pointer;
    margin-bottom: 10px;
    color: white;
    
}

.tab {
    padding: 10px 20px;
    /* background: #f1f1f1; */
    /* background: linear-gradient(to top, #AF1740, #cdb1b8); */
    /* background: linear-gradient(to right, #7d131a, #e71b31); */
    /* background: radial-gradient(circle, #7d131a, #e71b31); */
    background: linear-gradient(to bottom right, #7d131a, #e71b31);

    border: 1px solid #ccc;
    margin-left: 5px;
    /* تغيير من margin-right إلى margin-left */
    border-radius: 5px;
    transition: background 0.3s, transform 0.2s;
    /* تأثير الانتقال */
}

.tab:hover {
    background: white;
    color:black;
    /* تغيير لون الخلفية عند التمرير */
    transform: translateY(-2px);
    /* رفع التاب قليلاً عند التمرير */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* إضافة ظل */
}

.tab.active {
    background: #7d131a;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* ظل أعمق عند التفعيل */
}

.tab-content {
    display: none;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    background: white;
    /* خلفية بيضاء لمحتوى التاب */
}
.tab-content p {
    font-size: 20px;
}

.tab-content.active {
    display: block;
}

/* المنتجات  */
#products {
    margin: 20px 20px 0 20px;
    /* هامش من الأعلى واليسار */

}

.products {
    padding: 20px;
    margin: 20px 0;
    background: white;
    /* خلفية بيضاء لمحتوى التاب */
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* ظل خفيف */
    position: relative;
    overflow: hidden;

}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    /* يسمح بانتقال الصور إلى السطر التالي */
    justify-content: space-around;
    /* توزيع الصور بالتساوي */
}

.product-card {
    width: calc(25% - 20px);
    /* عرض كل بطاقة مع هامش */
    margin: 10px;
    /* هامش بين البطاقات */
     /* border: 2px solid #7d131a ; */
    /* border: linear-gradient(to bottom right, #7d131a, #e71b31); */

    /* إطار بلون أحمر غامق */
    border-radius: 10px;
    /* زوايا مدورة */
    background-color: #fff;
    /* لون خلفية أبيض */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* ظل خفيف */
    text-align: center;
    /* توسيط النص داخل البطاقة */
    overflow: hidden;
    /* منع تجاوز المحتوى */
    transition: transform 0.3s;
    /* تأثير الحركة عند المرور */
}

.product-card:hover {
    /* transform: scale(1.05); */
    background: linear-gradient(to left, #cdb1b8, #cdb1b8); 
     /* background: linear-gradient(to left, #7d131a, #e71b31);  */

    opacity: 0.75;

    /* تكبير البطاقة عند المرور */
}

.product-card img {
    width: 100%;
    /* عرض الصورة بالكامل */
    border-bottom: 2px solid #8B0000;
    /* إطار أسفل الصورة */
}

 a {
 text-decoration: none;
 color :#8B0000
}

/* المميزات  */
#features {
    padding: 20px;
    background-color: #f9f9f9; /* لون خلفية القسم */
}

.features {
    display: flex;
    flex-wrap: wrap; /* للسماح بتوزيع العناصر على عدة أسطر */
    justify-content: space-between; /* توزيع المساحة بين العناصر */
    font-size: 20px;
}

.feature-card {
    width: 48%; /* عرض كل بطاقة */
    background-color: #fff; /* لون خلفية البطاقة */
    border: 1px solid #ddd; /* حدود البطاقة */
    border-radius: 8px; /* زوايا دائرية */
    padding: 15px; /* مسافة داخل البطاقة */
    margin-bottom: 15px; /* مسافة بين الصفوف */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* ظل البطاقة */
    display: flex; /* لتنسيق الأيقونة والنص */
    align-items: center; /* محاذاة العناصر عموديًا */
}

.icon {
    font-size: 10px; /* حجم الأيقونة */
    padding-left: 15px; /* مسافة بين الأيقونة والنص */
    color: #007bff; /* لون الأيقونة */

}
.icon i {
    color: #7d131a; /* استبدل هذا اللون باللون الذي تريده */
    font-size: 24px; /* يمكنك تعديل حجم الأيقونة إذا لزم الأمر */
}
/* الخدمات */
.feature-card:hover
{
    background: linear-gradient(to right, #7d131a, #e71b31, #ffffff);
}
#services {
    margin: 20px;
    /* هامش من جميع الاتجاهات */
    padding: 20px 0 80px 0;
    background: white;
    /* خلفية بيضاء */
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* ظل خفيف */
    position: relative;
    overflow: hidden;

}


.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

h2 {
    margin-bottom: 20px;
    /* هامش أسفل العنوان */
}

.service-card {
    width: 200px;
    height: 150px;
    /* ارتفاع ثابت للكرت */
    margin: 10px;
    border: 2px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
    /* تأثير الانتقال */
    cursor: pointer;
    background-color: white;
    /* خلفية بيضاء للكرت */
    display: flex;
    align-items: center;
    /* توسيط المحتوى عمودياً */
    justify-content: center;
    /* توسيط المحتوى أفقياً */
}

.service-card img {
    width: 100%;
    /* عرض الصورة يتناسب مع الكرت */
    height: 100%;
    /* ارتفاع الصورة يتناسب مع الكرت */
    object-fit: cover;
    /* لضمان عدم تشويه الصورة */
}

.service-card:hover {
    border-color: #7d131a;
    /* تغيير لون الحد عند التمرير */
    box-shadow: 0 4px 10px #e71b31;
    /* إضافة ظل عند التمرير */
}

.service-card.active {
    border-color: #8B0000;
    /* تغيير لون الحد عند النقر */
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.5);
    /* إضافة ظل أعمق عند النقر */
}

/* العملاء  */
#clients {
    margin: 20px;
    padding-bottom: 100px   ;
    padding-top: 40px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

#clients h2 {
    padding-bottom: 40px;

    text-align: center;
    margin-bottom: 20px;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-weight: bold;
    color: #333;
}

.clients-slider {
    width: 100%;
    overflow-x: hidden; /* مهم جداً: تحديد overflow-x */
}

.clients-inner {
    display: flex;
    width: fit-content;
    overflow: hidden; /* تأكد من وجود هذا النمط */
    /* width: calc(7 * (150px + 30px)); */


    

}

.clients-inner ul {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    transition: transform 0.3s ease;
    display: flex; /* مهم جداً */
    width: fit-content; /* مهم جداً */
}

.clients-inner li {
    list-style-type: none;
    min-width: 150px;
    margin: 0 15px;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    font-family: 'Noto Kufi Arabic', sans-serif;
    font-weight: bold;
    /* padding: 8px 12px; */
    border-radius: 5px;
      background: linear-gradient(to right,white, #7d131a , #e71b31 , white );   
    transition: background-color 0.3s ease;
    flex-shrink: 0;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
}

.clients-inner li:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.clients-slider {
    display: flex; /* مهم لعرض الأزرار بجانب القائمة */
    align-items: center; /* لمحاذاة الأزرار عمودياً */
    overflow: hidden;
    padding: 0 20px; /* مساحة للأزرار */
    justify-content: center;


}

.slider-btn {
    background-color: #7d131a;
    color:#ffffff;

    border: none;
    /* padding: 10px 15px; */
    margin: 0 10px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 20px;
    user-select: none; /* منع تحديد النص */
    transition: background-color 0.3s ease;


    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.slider-btn:hover {
    background-color: #e71b31;
}

/*  تسجيل بيانات مشترك */
#demo-form {
    margin: 20px;
    padding: 20px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.form-container {
    max-width: 1200px; /* زيادة العرض لاستيعاب الحقول بجوار بعض */
    margin: 50px auto;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

.form-group {
    display: flex; /* استخدام flex لجعل العناصر بجوار بعض */
    margin-bottom: 15px;
}

label {
    flex: 1; /* يجعل التسمية تأخذ مساحة متساوية */
    margin-right: 10px; /* إضافة فراغ بين التسمية وحقول الإدخال */
    font-weight: bold;
    font-family: 'Alexandria', serif; /* تعيين الخط كخط أساسي */

}

.registration-form input[type="text"],
.registration-form input[type="tel"],
.registration-form input[type="email"],
.registration-form textarea {
    flex: 1; /* يجعل حقول الإدخال تأخذ مساحة أكبر من التسمية */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.registration-form textarea {
    flex: 3; /* يجعل textarea تأخذ ضعف المساحة */
    resize: none; /* منع تغيير حجم textarea */
}

.registration-form button {
    width: 100%;
    padding: 10px;
    background-color: #7d131a; /* لون زر التحميل */
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.registration-form button:hover {
    background-color: #ea7880;
}

/* استعلامات الوسائط لتحسين العرض على الشاشات الصغيرة */
@media (max-width: 600px) {
    .form-group {
        flex-direction: column; /* تغيير الاتجاه إلى عمودي في الشاشات الصغيرة */
    }
    
    label {
        margin-right: 0; /* إزالة الفراغ الجانبي */
        margin-bottom: 5px; /* إضافة فراغ أسفل التسمية */
    }
    
    .registration-form input[type="text"],
    .registration-form input[type="tel"],
    .registration-form input[type="email"],
    .registration-form textarea {
        width: 100%; /* جعل الحقول تأخذ عرض كامل */
        margin-bottom: 10px; /* إضافة تباعد بين الحقول */
    }
}

/* تنزيل نسخة تجريبية  */
#demo {
    margin-top: 80px;
    padding: 20px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.download-grid {
    
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* توسيط العناصر */
    }

    .download-card {
        background-color: white; /* خلفية بيضاء */
        border: 1px solid #ccc; /* حدود خفيفة */
        border-radius: 10px; /* زوايا مدورة */
        width: 350px;
        margin: 10px; /* مسافة بين الكروت */
        padding: 20px; /* مسافة داخلية */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* ظل خفيف */
        text-align: center; /* توسيط النص */
        transition: transform 0.3s, box-shadow 0.3s; /* تأثير الانتقال */
    }

    .download-card:hover {
        transform: translateY(-5px); /* رفع الكرت عند التمرير */
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); /* ظل أعمق عند التمرير */
    }

    .icon {
        font-size: 30px; /* حجم الأيقونة */
        color: white; /* لون الأيقونة */
        margin-bottom: 10px; /* مسافة أسفل الأيقونة */
    }

    .download-button {
        font-size: 18px;
        font-family: 'El Messiri', sans-serif; /* تعيين الخط كخط أساسي */
        background-color: #7d131a; /* لون زر التحميل */
        color: rgb(255, 255, 255); /* لون النص */
        border: none; /* إزالة الحدود */
        border-radius: 5px; /* زوايا مدورة */
        padding: 10px; /* مسافة داخلية */
        cursor: pointer; /* تغيير المؤشر عند التمرير */
        /* transition: background-color 0.3s, color 0.3s; تأثير الانتقال عند تغيير اللون */
        width: 100%; /* ملء عرض الكرت بالكامل */
        display: inline-block; /* جعل الزر يتصرف ككتلة */
    }

    .download-button:hover {
        background-color: #e71b31; /* لون أغمق عند التمرير */
    }

    .download-button:active {
        background-color: #004494; 
        color: white; /* الحفاظ على لون النص */
        outline: none; /* إزالة الحدود عند الضغط */
    }

    .download-button:focus {
        outline: none; /* إزالة الحدود عند التركيز */
        color: white;
    }
/* اتصل بناء */

footer {
    /* background: linear-gradient(to left, #7d131a, #cdb1b8); */
    background: linear-gradient(to left, #7d131a, #e71b31, #ffffff);

    color: #fff;
    text-align: center;
    padding: 10px;
    position: relative;
    bottom: 0;
    font-size: 20px;
    width: 100%;
    direction: ltr;
}

.contact-info {
    display: flex;
    /* استخدام flexbox لعرض الأعمدة بجانب بعضها */
    justify-content: space-between;
    /* توزيع الأعمدة بالتساوي */
    padding: 20px;
    background-color: #f9f9f9;
    /* لون خلفية خفيف */
    margin: 20px 0;
    /* هامش حول القسم */
    border-radius: 8px;
    /* زوايا مدورة */
    direction: rtl;
    /* اتجاه النص من اليمين إلى اليسار */
}

.column {
    flex: 1;
    /* كل عمود يأخذ نفس المساحة */
    padding: 0 10px;
    /* هامش داخلي */
    text-align: center;
    /* توسيط العناوين لليمين */

}
.column p {
    font-size: 20px;

} 
.column h3 {
    font-size: 15px;

} 

.column h2,
.column h3 {
    text-align: center;
    /* توسيط العناوين لليمين */
}

.column ul {
    list-style: none;
    /* إزالة النقاط من القائمة */
    padding: 0;
    /* إزالة padding */
    text-align: center;
    /* توسيط النصوص لليمين */
}

.photos {
    display: flex;
    /* استخدام flexbox لعرض الصور بجانب بعضها */
    justify-content: center;
    /* توسيط الصور */
    margin-top: 10px;
    /* هامش أعلى */
}

.photos img {
    width: 100px;
    /* عرض ثابت للصور */
    height: auto;
    /* الحفاظ على نسبة العرض إلى الارتفاع */
    margin: 0 5px;
    /* هامش بين الصور */
}

.social-icons {
    display: flex;
    /* استخدام flexbox لعرض الأيقونات بجانب بعضها */
    justify-content: center;
    /* توسيط الأيقونات */
    margin-top: 10px;
    /* هامش أعلى */
    color:#7d131a;
}

.social-icons a {
    margin: 0 10px;
    /* هامش بين الأيقونات */
    font-size: 26px;
    /* حجم الأيقونات */
    color: #333;
    /* لون الأيقونات */
    text-decoration: none;
    /* إزالة التسطير */
}

.social-icons a:hover {
    color: #7d131a;
    /* تغيير اللون عند التمرير */
}

.whatsapp-chat {
    position: fixed;
    /* جعل الأيقونة ثابتة في الزاوية */
    bottom: 20px;
    /* المسافة من الأسفل */
    right: 20px;
    /* المسافة من اليمين */
    background-color: #25D366;
    /* لون خلفية الأخضر لواتساب */
    color: white;
    /* لون الأيقونة */
    border-radius: 50%;
    /* جعل الشكل دائري */
    padding: 15px;
    /* مساحة داخلية */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* ظل */
    font-size: 24px;
    /* حجم الأيقونة */
    text-decoration: none;
    /* إزالة التسطير */
    z-index: 1000;
    /* جعل الأيقونة فوق العناصر الأخرى */
}

.whatsapp-chat:hover {
    background-color: #128C7E;
    /* تغيير اللون عند التمرير */
}

/* Anthoer Page  */
.container {
    margin-top: 80px;
    margin-left: 20px;
    margin-right: 20px;
    background-color: white; /* خلفية بيضاء */
    border-radius: 10px; /* زوايا مدورة */
    padding: 20px; /* مسافة داخلية */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* ظل خفيف */
    display: flex; /* استخدام الفليكس لتقسيم البطاقة */
    align-items: center; /* محاذاة العناصر في المركز */
}

.text-content {
    flex: 1; /* أخذ مساحة مرنة */
    padding-right: 20px; /* مسافة على اليمين */
}

.image-content {
    flex: 1; /* أخذ مساحة مرنة */
    text-align: center; /* توسيط الصورة */
}

.title {
    text-align: center; /* توسيط العنوان */
    color: #7d131a; /* لون العنوان */
    font-size: 24px; /* حجم الخط */
    font-family: 'El Messiri', sans-serif; /* تعيين الخط كخط أساسي */
}

.subtitle {
    color: #333; /* لون العناوين الفرعية */
    font-size: 20px; /* حجم الخط */
    margin-top: 20px; /* مسافة فوق */
}

.list {
    list-style-type: disc; /* شكل النقاط */
    padding-left: 20px; /* مسافة على اليسار */
    font-family: 'Lateef', cursive; /* تعيين الخط كخط أساسي */
    font-size: 20px;

}

.list-item {
    margin-bottom: 10px; /* مسافة بين العناصر */
}


img {
    max-width: 100%; /* جعل الصورة تتناسب مع حجم البطاقة */
    border-radius: 10px; /* زوايا مدورة للصورة */
}