/* مربع البحث */


.search-box {
    position: absolute;
    top: 0px;
    left: 2px;
    display: flex;
    direction: rtl;
    align-items: center;
    z-index: 3; /* لجعله فوق العناصر الأخرى */
    font-family: 'Tajawal', Arial, sans-serif;
}

.search-box input[type="text"] {
    padding: 8px 4px 8px 40px; /* حشو لزر البحث */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 12px;
    width: 90px; /* عرض أصغر */
    direction: rtl; /* اتجاه النص من اليمين لليسار */
    font-family: 'Tajawal', Arial, sans-serif;
}

.search-box button {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding: 0 10px;
    background-color: #611927;
    color: #fff;
    border: none;
    border-radius: 5px 0px 0px 5px; /* حواف دائرية على اليمين فقط */
    cursor: pointer;
    font-family: 'Tajawal', Arial, sans-serif;
}

.search-box button:hover {
    background-color: #A80000;
}

/* أيقونات المشاركة */
.social-icons {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
      left: 0;
}



.social-icons a {
    color: #fff;
    background-color: #611927;
    padding: 8px;
    border-radius: 50%;
    margin-left: 5px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7px;
    height: 7px;
    background-size: 50%; /* حجم الأيقونة */
    background-repeat: no-repeat;
    background-position: center;
}

.social-icons a:hover {
    background-color: #A80000;
    transform: scale(1.1);
}

/* أيقونة فيسبوك */
.social-icons a.facebook {
      background-color: #1877F2;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="white" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>');
}

/* أيقونة واتساب */
.social-icons a.whatsapp {
         background-color: #25D366;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L4 476.4l114.8-30.2c32.4 17.7 68.9 27 106.1 27 122.4 0 222-99.6 222-222 0-59.3-23.2-115-65.1-157zM223.9 438c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.9-4.4-6.7c-16.7-28.3-25.7-61-25.7-94 0-103.8 84.2-188 188-188 50.1 0 97.2 19.4 132.7 54.6 35.5 35.2 54.6 82.3 54.6 132.4 0 103.8-84.2 188-188 188zm101.2-138.2c-7.9-4-46.7-23-54-25.7-7.3-2.8-12.5-4.2-17.8 4.4-5.3 8.6-20.5 25.7-25.1 31-4.6 5.3-9.2 6-17 2-7.9-4-33.3-12.3-63.4-39.2-23.4-20.9-39.2-46.7-43.8-54.6-4.6-7.9-0.5-12.2 3.4-16.1 3.9-3.9 7.9-10.2 11.9-15.3 4-5.1 5.3-8.6 8-14.2 2.7-5.6 1.4-10.6-.7-14.8-2.1-4.2-17.8-42.9-24.4-58.8-6.6-15.9-13.2-13.7-17.8-13.7-4.6 0-10.2 0-15.7 2-5.6 2-21.4 10.2-32.6 31.7-11.2 21.5-4.3 44.7 2.6 59.8 6.9 15.1 15.4 28.6 24.7 39.8 9.3 11.2 19.9 20.9 33.9 33.2 14 12.3 29.8 22.6 46.5 31.4 16.7 8.8 34.6 15.4 53.8 19.6 19.2 4.2 39.6 5.7 60.1 3.8 20.5-1.9 39.8-8.7 54.6-16.9 14.8-8.2 26.1-18.4 34.6-30.2 8.5-11.8 13.2-25.6 13.2-39.8 0-12.2-4.8-18.7-9.6-23.1-4.8-4.4-10.6-7.2-18.5-11.2z"/></svg>');
}

/* أيقونة تويتر */
.social-icons a.twitter {
     background-color: #1DA1F2;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>');
}




/* التنسيق العام */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff; /* #f9f9f9;*/
    color: #333;
    text-align: right; /* النص من اليمين لليسار */
}

/* البانر */
.banner {
    background-image: url('https://msader-ye.net/m/ic1/hbg.jpg');
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat; 
    height: 80px; /* تم تقليل الارتفاع بمقدار 20 بكسل */
    min-height: 80px; /* ارتفاع أدنى للبنر */
    text-align: center;
    line-height: 80px;
    font-size: 24px;
    color: #fff;
    margin: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative; /* لجعل القائمة المنسدلة تظهر فوق البنر */
    background-color: #000217;
}

/* القائمة المنسدلة */
.dropdown-content {
    display: none;
    background-color: rgba(52, 73, 94, 0.9); /* شفافية */
    position: absolute;
    top: 55px; /* تعديل المسافة من الأعلى */
    left: 10px; /* القائمة من اليمين */
    width: 100px;
    line-height: 10px;
    z-index: 1;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* إمكانية التمرير إذا كانت القائمة طويلة */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
    font-family: 'Tajawal', Arial, sans-serif;
}

.dropdown-content.show {
    opacity: 1;
    visibility: visible;
    display: block;
}

.dropdown-content a {
    color: #fff;
    padding: 8px 16px; /* تعديل الحشو */
    text-decoration: none;
    display: block;
    transition: background 0.3s ease;
    font-size: 14px; /* تصغير حجم الخط */
}

.dropdown-content a:hover {
    background-color: #611927;
}

/* زر القائمة */
.menu-icon {
    position: absolute;
    top: 18px;
    left: 3px;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    z-index: 2; /* لجعل الزر فوق البنر */
}

.horizontal-menu {
    display: flex;
    justify-content: flex-start; /* المحاذاة من اليمين */
    background: linear-gradient(to right, #f7f7f7, #e0e0e0);
    padding: 5px 5px; /* تحسين المسافات الداخلية */
    font-size: 15px;
    border-radius: 10px;
    margin: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    direction: rtl;
    font-family: Arial, Tajawal, sans-serif;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid #ddd; /* إضافة إطار خفيف */
    font-family: 'Tajawal', Arial, sans-serif;
}

.horizontal-menu a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 3px; /* توازن أفضل للحجم */
    transition: all 0.3s ease-in-out;
    border-radius: 6px;
    margin: 0 4px; /* تقليل الفراغات بين العناصر */
    background: rgba(255, 255, 255, 0.7);
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
}

/* تأثير جميل عند تمرير الماوس */
.horizontal-menu a:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}


/* إزالة المسافة قبل أول عنصر */
.horizontal-menu a:first-child {
    margin-right: 0;
}

.horizontal-menu a:hover {
    background: #888;
    color: #FFF;
    transform: scale(1.05);
}


.horizontal-menu a:hover {
    background: #888;
    color: #FFF;
    transform: scale(1.05);
}


/* الأخبار المتحركة */
.news-scroll {
    position: relative;
    margin: 10px 0;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.news-scroll .slides {
    display: flex;
    transition: transform 0.5s ease;
     direction: rtl;
}

.news-scroll .slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
}

.news-scroll .slide img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.news-scroll .controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.news-scroll .controls button {
    background-color: #A80000;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.news-scroll .controls button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* العنوان البارز */
.highlight {
    background-color: #611927;
    padding: 10px;
    text-align: center;
    margin: 1px 3px;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
    
}

.highlight h2 {
    margin: 0;
    font-size: 18px;
font-family: 'Tajawal', Arial, sans-serif;
}

/* قائمة الأخبار */
.news-list {
    margin: 10px 0;
}

.news-item2 {
    background-color: #fff;
    margin-top: 2px;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  
}

.news-item2 h2 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #2c3e50;
      font-family: 'Tajawal', Arial, sans-serif;
      
}

.news-item2 small {
    display: block;
    color: #7f8c8d;
    font-size: 11px;
}

/* ترقيم الصفحات */
.pagination {
    display: flex;
    justify-content: center;
    background-color: #611927;
  
         height: 35px;
           padding: 15px  5px;
             padding-bottom: 5px;
    border-radius: 5px;
    margin: 5px 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    direction: rtl;
}

.pagination a {
    color: #fff;
    padding: 4px 6px;
    text-decoration: none;
     border: 1px solid #ddd;
    transition: background 0.3s ease;
    border-radius: 5px;
}

.pagination a:hover {
    background-color: #611927;
      padding-bottom: 5px;
}

.pagination a.active {
    background-color: #611927;
     padding-bottom: 5px;
}

.chevron-right::before {
    font-family: "Font Awesome 6 Free"; 
    content: "\f054"; 
    font-weight: 900; /* 900 للـ Solid */
}
.chevron-left::before {
    font-family: "Font Awesome 6 Free"; 
    content: "\f053"; /* أيقونة السهم لليسار */
    font-weight: 900;
}
/* التدرج اللوني من البني الداكن */
body {
    background: linear-gradient(to bottom, #fff, #f9f9f9);
}

/* مساحة إعلانية */
.ad-space {
    width: 100%;
    height: 250px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ad-space span {
    font-size: 18px;
    color: #333;
}


      /* تنسيق السلايدر */
        .slider-container {
            width: 98%;
             margin: 5px 5px;
            overflow: hidden;
            position: relative;
            direction: rtl; /* اتجاه من اليمين لليسار */

        }

        .slider {
            display: flex;
            transition: transform 0.5s ease;
        }

        .news-item1 {
            min-width: 100%;
            box-sizing: border-box;
            padding: 5px;
            text-align: right;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            position: relative; /* لجعل الدوائر داخل العنصر */
             height: 130px;
        }

        /* تنسيق العنوان */
        .news-item1 h2 {
            margin: 0;
            font-size: 18px;
            color: #333;
         font-family: 'Tajawal', Arial, sans-serif;
        }
.news-item1 h2 a {
    color: #333 !important;
    text-decoration: none !important;
}

.news-item1 h2 a:hover {
    color: #333 !important;
    text-decoration: none !important;
}
        /* تنسيق تفاصيل الخبر (التاريخ وعدد القراءات) */
        .news-details {
            font-size: 12px;
            margin: 5px 0;
        }
      .news-details .date {
            color: #0000FF; /* لون أحمر للتاريخ */
        }

        .news-details .views {
            color: blue; /* لون أزرق لعدد القراءات */
        }

        /* تنسيق أيقونات المشاركة */
        .social-icons {
            display: flex;
            justify-content: left;
            margin-top: 0px;
        }

        .social-icons a {
            color: #fff;
            background-color: #611927;
            padding: 5px;
            border-radius: 50%;
            margin: 0 5px;
            text-decoration: none;
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 10px;
            height: 10px;
        }

        .social-icons a:hover {
            background-color: #A80000;
        }

        .social-icons i {
            font-size: 12px;
        }

        /* تنسيق الدوائر داخل مربع الأخبار */
        .slider-dots {
            position: absolute;
            bottom: 10px; /* وضع الدوائر في الأسفل */
            left: 50%; /* توسيط الدوائر أفقيًا */
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px; /* إضافة مسافة بين الدوائر والأزرار */
        }

        .dot {
            display: inline-block;
            width: 10px; /* تصغير حجم الدوائر */
            height: 10px; /* تصغير حجم الدوائر */
            background-color: #bbb;
            border-radius: 50%;
            margin: 0 3px; /* تقليل المسافة بين الدوائر */
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .dot.active {
            background-color: #611927; /* لون الدائرة النشطة */
        }

        /* تنسيق أزرار التحكم */
        .slider-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            bottom: 3px; /* إنزال الأزرار إلى الأسفل */
            left: 50%; /* توسيط الأزرار أفقيًا */
            transform: translateX(-50%);
            width: 100%; /* لجعل الأزرار تمتد على عرض السلايدر */
            max-width: 150px; /* تحديد عرض أقصى للأزرار */
        }

        .slider-controls button {
            background-color: #611927;
            color: white;
            border: none;
            padding: 5px 5px; /* تصغير حجم الأزرار */
            margin: 0 5px; /* تقليل المسافة بين الأزرار */
            cursor: pointer;
            border-radius: 50%; /* جعل الأزرار دائرية */
            width: 20px; /* تحديد عرض ثابت للأزرار */
            height: 20px; /* تحديد ارتفاع ثابت للأزرار */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px; /* تصغير حجم النص داخل الأزرار */
        }

        .slider-controls button:hover {
            background-color: #A80000;
        }
a {
    color: inherit !important;
    text-decoration: none !important;
}

a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

.social-icons a {
    color: #fff !important;
    text-decoration: none !important;
}

.social-icons a:hover {
    background-color: #A80000 !important;
}


        /* تنسيق الـ Footer */
        footer {
            background-color: #333; /* لون خلفية داكن */
            color: #fff; /* لون النص أبيض */
            text-align: center;
            padding: 5px 10px;
            font-size: 12px;
            border-top: 4px solid #611927; /* لون حدود أعلى Footer */
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* إضافة ظل */
        }

        footer p {
            margin: 0;
            font-weight: bold;
            font-family: 'Tajawal', Arial, sans-serif;
        }

        footer a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        footer a:hover {
            color: #611927; /* تغيير لون الروابط عند التحويم */
        }

        /* تأثيرات إضافية */
        footer::before {
            content: "";
            display: block;
            width: 50px;
            height: 3px;
            background-color: #611927;
            margin: 0 auto 10px auto;
        }

        footer::after {
            content: "مصادر نت";
            display: block;
            font-size: 13px;
            color: #bbb;
            margin-top: 10px;
            font-family: 'Tajawal', Arial, sans-serif;
        }
        
               .pagination a {
    color: white;
} 
        .pagination a i {
    color: white;
}