/* General site styles */
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #afabb533; /* Light background */
        }

        /* Header styles */
        header {
            background-color: #0056b3;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            position: relative; /* Position for the button inside header */
        }
        
        
        .logo img {
    max-width: 100%; /* تأكد من أن الصورة تتناسب مع حجم الحاوية */
    height: auto; /* الحفاظ على نسبة الطول إلى العرض */
}

     

                /* Social media icons container */
        .social-icons {
            display: inline-flex;
        }

        .social-icons a {
            color: white;
            font-size: 24px;
            margin-left: 10px;
            text-decoration: none;
        }

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

            /* Common styles for both menus */
    .nav-menu {
        display: none; /* Hide the menu by default */
        position: absolute;
        background-color: white; /* Menu background */
        border-radius: 5px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 1000; /* Display the menu above other elements */
    }

 /* Left menu position */
.left-menu {
    left: 20px; /* Position from the left */
    top: 50px; /* Space from the top of the header */
}

/* Styles for category links */
.category-links {
    display: flex; /* Use flexbox to align items */
    flex-direction: row; /* Align items in a row */
    gap: 10px; /* Space between links */
}

.category-links a {
    text-decoration: none; /* Remove underline */
    padding: 10px 15px; /* Add padding */
    background-color: #007bff; /* Background color */
    
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth background change */
}

.category-links a:hover {
    background-color: #0056b3; /* Change background color on hover */
}

   
    
    
    /* Center menu position */
.right-menu {
    position: fixed; /* ثابتة عند التمرير */
    top: 50px; /* المسافة من أعلى الصفحة */
    left: 50%; /* التمركز في المنتصف أفقيًا */
    transform: translateX(-50%); /* لضبط التمركز في المنتصف */
    z-index: 1000; /* ضمان ظهور القائمة فوق العناصر الأخرى */
}

    

    .nav-menu a {
        display: block;
        padding: 10px;
        color: #ffffff; /* Text color */
        text-decoration: none;
    }

   

    /* Menu toggle button styles */
    .menu-toggle {
        position: absolute;
        top: 15px; /* Space from the top */
        background-color: transparent; /* Remove background */
        border: none; /* Remove border */
        color: white; /* Change text color to white */
        font-size: 24px; /* Font size for better visibility */
        cursor: pointer;
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
    }

    .left-toggle {
        left: 20px; /* Space from the left */
    }

    .right-toggle {
        right: 20px; /* Space from the right */
    }


/* Search bar styles */
.search-bar {
    text-align: center;
    padding: 20px;
}

.search-bar input[type="text"] {
    padding: 10px;
    width: 40%; /* Search bar width */
    border: 5px solid #0056b3;
    border-radius: 5px;
    font-size: 16px;
}

#message {
    margin-top: 10px; /* مسافة بين شريط البحث والرسالة */
    font-size: 18px; /* حجم الخط */
    color: #918f8f; /* لون الرسالة الجديد */
    text-align: center; /* محاذاة النص في المركز */
    display: none; /* إخفاء الرسالة افتراضيًا */
}




/* Game section styles */
.container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap into multiple rows */
    justify-content: center; /* Center the items in the container */
    padding: 10px; /* Reduce padding for better fit */
    margin: 0 auto; /* Center the container */
    max-width: 1200px; /* Set a maximum width for the container */
}

.game-card {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 50px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    text-align: center; /* Center text */
    margin: 5px; /* Space between cards */
    flex: 1 0 calc(33.33% - 10px); /* Three cards per row on larger screens */
    max-width: 120px; /* Reduce max width for smaller cards */
}

.game-card:hover {
    transform: scale(1.05);
}

.game-card img {
    width: 100%;
    height: auto; /* Adjust height to auto for better aspect ratio */
    max-height: 110px; /* Set max height for images */
}

/* Media Query for Tablet and Mobile */
@media (max-width: 900px) {
    .game-card {
        flex: 0 0 calc(50% - 10px); /* Two cards per row on tablet */
    }
}

@media (max-width: 600px) {
    .game-card {
        flex: 0 0 calc(100% - 10px); /* One card per row on mobile */
    }
}




        /* Footer styles */
        footer {
            background-color: #000000;
            color: white;
            text-align: center;
            padding: 20px 0;
        }

       footer a:hover {
    text-decoration: underline;
}


        /* Media Query for mobile responsiveness */
        @media (max-width: 480px) {
            .game-card {
                flex: 0 0 calc(50% - 10px); /* Two cards per row for small devices */
            }
        }

        @media (max-width: 320px) {
            .game-card {
                flex: 0 0 calc(100% - 10px); /* One card on very small screens */
            }
        }
        
        .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


.header-container {
    display: flex; /* جعل الحاوية مرنة */
    justify-content: space-between; /* توزيع المحتويات */
    align-items: center; /* توسيط العناصر عموديًا */
    padding: 20px; /* حشوة داخلية للرأس */
    background-color: #f8f9fa; /* لون خلفية الرأس */
}



/* تنسيق زر المشاركة */
.share-button {
    background-color: #007bff; /* لون الخلفية */
    color: white; /* لون النص */
    border: none; /* إزالة الحدود */
    padding: 10px 15px; /* حشوة داخلية */
    border-radius: 5px; /* زوايا مستديرة */
    cursor: pointer; /* تغيير المؤشر إلى يد عند التحويم */
    transition: background-color 0.3s; /* تأثير الانتقال */
}

.share-button:hover {
    background-color: #0056b3; /* لون الخلفية عند التحويم */
}




.game-card {
    background-color: #0056b3;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.9);
    transition: transform 0.3s ease;
    text-align: center; /* مركز النص */
    margin: 5px; /* فراغ بين البطاقات */
    flex: 0 0 calc(33.33% - 10px); /* ثلاث بطاقات في الصف */
}

.game-card img {
    width: 100%;
    height: 200px; /* ارتفاع ثابت للصورة */
    object-fit: cover; /* تغطية الصورة */
}

.game-card a {
    display: block; /* يجعل الرابط يغطي الصورة بالكامل */
}







.logo {
    text-align: center; /* توسيط الشعار */
}

.logo-text {
    font-size: 36px; /* حجم الخط */
    font-weight: bold; /* جعل النص غامق */
    color: #ffffff; /* لون النص */
    text-decoration: none; /* إزالة خط التسطير */
    letter-spacing: 2px; /* تباعد الحروف */
    font-family: 'Arial', sans-serif; /* نوع الخط */
    transition: color 0.1s; /* تأثير التغيير اللوني */
}




/* Menu centered styles */
.nav-menu {
    display: none; /* إخفاء القائمة في البداية */
    position: fixed;
    top: 50%; /* في منتصف الشاشة عموديًا */
    left: 50%; /* في منتصف الشاشة أفقيًا */
    transform: translate(-50%, -50%); /* تحريك القائمة لتكون في المنتصف تمامًا */
    z-index: 1000; /* ضمان ظهور القائمة فوق العناصر الأخرى */
    flex-direction: column; /* جعل العناصر في عمود */
    align-items: center; /* محاذاة إلى المركز */
    background-color: #0056b3; /* خلفية القائمة */
    padding: 20px; /* مسافة داخلية */
    border-radius: 10px; /* زوايا مستديرة */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* ظل خفيف */
}

.nav-menu.active {
    display: flex; /* عرض القائمة عند التفعيل */
}





.share-button {
    background-color: #007BFF; /* لون الخلفية */
    color: white; /* لون النص */
    border: none; /* بدون حدود */
    border-radius: 5px; /* زوايا دائرية */
    padding: 10px 15px; /* حشوة */
    cursor: pointer; /* شكل المؤشر عند المرور */
    margin-bottom: 10px; /* مسافة بين الزر والأيقونات */
    font-size: 16px; /* حجم الخط */
    transition: background-color 0.3s; /* تأثير عند التحويم */
}

.share-button:hover {
    background-color: #0056b3; /* تغيير لون الخلفية عند التحويم */
}

.social-icons {
    display: flex; /* استخدام flexbox لترتيب الأيقونات */
    gap: 15px; /* مسافة بين الأيقونات */
}

.social-icons a {
    display: inline-block; /* لضمان تماسك الأيقونات */
}

.social-icons img {
    width: 40px; /* عرض الأيقونات */
    height: auto; /* ارتفاع تلقائي للحفاظ على النسبة */
    transition: transform 0.3s; /* تأثير التحويم */
}

.social-icons img:hover {
    transform: scale(1.1); /* تكبير الأيقونات عند التحويم */
}


.copy-link {
    background-color: #007bff; /* لون خلفية الزر */
    color: white; /* لون النص */
    border: none; /* إزالة الحدود */
    border-radius: 5px; /* زوايا دائرية للزر */
    padding: 10px 15px; /* حشوة داخلية للزر */
    cursor: pointer; /* تغيير المؤشر عند التحويم */
    margin-top: 15px; /* مسافة فوق الزر */
    transition: background-color 0.3s; /* تأثير عند تغيير اللون */
}

.copy-link:hover {
    background-color: #0056b3; /* لون خلفية الزر عند التحويم */
}



.footer-links {
    text-align: center; /* محاذاة النص إلى الوسط */
    font-size: 13px; /* حجم الخط */
}

.footer-links a {
    color: #ffffff; /* لون النص */
    margin: 0 8px; /* مسافة بين الروابط */
    text-decoration: none; /* إزالة الخط السفلي */
}

.footer-links a:hover {
    text-decoration: underline; /* إضافة خط سفلي عند التحويم */
}



.social-icons {
    display: flex; /* استخدام flexbox لترتيب الأيقونات */
    justify-content: center; /* محاذاة الأيقونات إلى الوسط */
    gap: 15px; /* مسافة بين الأيقونات */
    padding: 10px 0; /* حشوة فوق وتحت الأيقونات */
}

.social-icons a {
    color: #ffffff; /* لون الأيقونات */
    font-size: 24px; /* حجم الأيقونات */
    transition: color 0.3s; /* تأثير عند التحويم */
}

.social-icons a:hover {
    color: #007bff; /* تغيير لون الأيقونات عند التحويم */
}


.footer-text {
    color: #ffffff; /* لون النص */
    text-align: center; /* محاذاة النص إلى الوسط */
    padding: 10px 0; /* حشوة فوق وتحت */
    font-size: 14px; /* حجم الخط */
}

.footer-link {
    color: #ffffff; /* لون الرابط */
    text-decoration: none; /* إزالة خط تحت الرابط */
    transition: color 0.3s; /* تأثير عند التحويم */
}

.footer-link:hover {
    color: #007bff; /* تغيير لون الرابط عند التحويم */
}




.scroll-to-top {
    position: fixed;
    bottom: 20px; /* مسافة من الأسفل */
    right: 20px; /* مسافة من اليمين */
    background-color: #007bff; /* لون الخلفية */
    color: white; /* لون الأيقونة */
    border: none; /* بدون حدود */
    border-radius: 5px; /* زوايا دائرية */
    padding: 15px; /* حشوة أكبر */
    cursor: pointer; /* شكل المؤشر عند المرور */
    display: flex; /* استخدام flex لتوسيط الأيقونة */
    align-items: center; /* محاذاة الأيقونة في الوسط */
    justify-content: center; /* محاذاة الأيقونة في الوسط */
    transition: opacity 0.3s; /* تأثير الشفافية */
    opacity: 0.7; /* شفافية أولية */
    font-size: 24px; /* حجم الأيقونة */
}

.scroll-to-top:hover {
    opacity: 1; /* زيادة الشفافية عند التحويم */
}

/* Menu centered styles */
.nav-menu {
    display: none; /* إخفاء القائمة في البداية */
    position: fixed;
    top: 50%; /* في منتصف الشاشة عموديًا */
    left: 50%; /* في منتصف الشاشة أفقيًا */
    transform: translate(-50%, -50%); /* تحريك القائمة لتكون في المنتصف تمامًا */
    z-index: 1000; /* ضمان ظهور القائمة فوق العناصر الأخرى */
    flex-direction: column; /* جعل العناصر في عمود */
    align-items: center; /* محاذاة إلى المركز */
    background-color: #0056b3; /* خلفية القائمة */
    padding: 20px; /* مسافة داخلية */
    border-radius: 10px; /* زوايا مستديرة */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* ظل خفيف */
}

.nav-menu.active {
    display: flex; /* عرض القائمة عند التفعيل */
}

/* تصميم الزر Close */
.close-btn {
    position: absolute; /* يسمح بتحريك الزر خارج المحتوى */
    top: -13px; /* تحريك الزر إلى الأعلى */
    right: -10px; /* تحريك الزر إلى اليمين */
    background-color: #FF4D4D; /* لون خلفية الزر */
    border: none; /* إزالة الحدود */
    color: white; /* لون النص */
    font-size: 20px; /* حجم الخط */
    cursor: pointer; /* تغيير المؤشر عند المرور */
    border-radius: 50%; /* شكل دائري للزر */
    width: 30px; /* عرض الزر */
    height: 30px; /* ارتفاع الزر */
    display: flex; /* مركز الزر */
    align-items: center; /* محاذاة رأسياً */
    justify-content: center; /* محاذاة أفقياً */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ظل خفيف للزر */
}

/* تصميم روابط الفئات */
.category-links a {
    color: white; /* لون النص */
    text-decoration: none; /* إزالة الخط السفلي */
    margin: 10px 0; /* مسافة بين الروابط */
    font-size: 18px; /* حجم الخط */
}







.backdrop {
    display: none; /* إخفاء الخلفية في البداية */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* لون خلفية خفيف */
    backdrop-filter: blur(5px); /* تأثير الضبابية */
    z-index: 999; /* التأكد من ظهورها فوق العناصر الأخرى */
}

.nav-menu {
    display: none; /* إخفاء القائمة في البداية */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* ظهور القائمة فوق الخلفية */
    flex-direction: column;
    align-items: center;
    background-color: #0056b3;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}




.pages {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.pages a, .pages b {
    background: #0056B3;
    display: inline-block;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 5px;
    margin: 0 6px;
}

.pages a:hover {
    background: #f60;
}

.pages b {
    background: #5dc12b;
    display: inline-block;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 5px;
    margin: 0 6px;
}