body {
    background: rgba(106, 17, 203, 0.7); /* لون بنفسجي زجاجي */
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: linear-gradient(to right, #6a11cb, #2575fc);
    color: #333;
}

* {
    box-sizing: inherit;
}

.navbar {
    background: rgba(106, 17, 203, 0.7); /* بنفسجي زجاجي */
    backdrop-filter: blur(10px); /* تأثير ضبابي */
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 1000;
}

.navbar h1 {
    margin: 0;
    font-size: 24px;
    flex-grow: 1;
    text-align: center;
}

.navbar .menu {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.navbar .menu a {
    color: white;
    margin-left: 15px;
    text-decoration: none;
    font-size: 20px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s, color 0.3s;
    background: transparent;
}

.navbar .menu a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #f1c40f;
}

.navbar .dropdown {
    position: relative; /* يحدد الموضع النسبي للسقيفة بالنسبة للعناصر الأخرى */
    margin-left: auto; /* يدفع السقيفة إلى أقصى اليمين */
}

.navbar .dropbtn {
    background-color: rgba(0, 0, 0, 0.7); /* لون أسود زجاجي مع شفافية */
    color: white; /* يحدد لون النص داخل الزر */
    padding: 10px 15px; /* يضيف مسافة داخل الزر */
    border: none; /* يزيل أي حدود حول الزر */
    border-radius: 5px; /* زوايا مستديرة للزر */
    cursor: pointer; /* يغير شكل المؤشر عند التحويم فوق الزر */
    font-size: 10px; /* يحدد حجم الخط للنص داخل الزر */
    transition: background 0.3s; /* يضيف تأثير انتقال عند تغيير لون الخلفية */
}

.navbar .dropbtn:hover {
    background-color: rgba(148, 0, 211, 0.8); /* لون أغمق عند التحويم، يتناسب مع البنفسجي */
}

.navbar .dropdown-content {
    display: none; /* يخفي محتوى السقيفة بشكل افتراضي */
    position: absolute; /* يتيح وضع المحتوى في موقع محدد بالنسبة للعنصر الأب */
    background-color: rgba(255, 255, 255, 0.9); /* يحدد لون الخلفية مع الشفافية */
    min-width: 160px; /* يحدد الحد الأدنى لعرض قائمة السقيفة */
    z-index: 1; /* يحدد ترتيب طبقات العناصر، ليظهر المحتوى فوق العناصر الأخرى */
    border-radius: 5px; /* زوايا مستديرة للقائمة */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* يضيف ظلًا للقائمة */
    right: 0; /* يحدد موقع المحتوى من الجانب الأيمن */
    max-height: 200px; /* يحدد الحد الأقصى لارتفاع القائمة */
    overflow-y: auto; /* يسمح بإضافة شريط تمرير عمودي إذا كان المحتوى يتجاوز الارتفاع المحدد */
}

.navbar .dropdown:hover .dropdown-content {
    display: block; /* يظهر محتوى السقيفة عندما يتم التحويم على العنصر الأب */
}

.navbar .dropdown-content a {
    color: black; /* يحدد لون النص للرابط */
    padding: 10px 15px; /* يضيف مسافة داخلية للرابط */
    text-decoration: none; /* يزيل أي خط تحت الرابط */
    display: flex; /* يستخدم Flexbox لمحاذاة المحتوى داخل الرابط */
    align-items: center; /* يضمن محاذاة العناصر في المركز عموديًا */
    justify-content: center; /* يضمن محاذاة العناصر في المركز أفقيًا */
    background: #f1f1f1; /* يحدد لون الخلفية للرابط */
    border-radius: 5px; /* يمنح زوايا مستديرة للرابط */
    margin: 5px 0; /* يضيف مسافة بين الروابط */
    transition: background 0.3s; /* يضيف تأثير انتقال عند تغيير لون الخلفية */
    height: 40px; /* يحدد ارتفاع الرابط لضمان اتساق المحاذاة */
}

.navbar .dropdown-content a:hover {
    background: rgba(0, 0, 0, 0.1); /* يغير لون الخلفية عند التحويم فوق الرابط */
}




.main {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-direction: column;
    margin-top: 130px;
}

.wrap {
    background: rgba(255, 255, 255, 0.9);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.info {
    margin: 10px 0;
    color: #555;
}

label {
    display: block;
    margin: 15px 0;
}

input[type="text"],
input[type="password"],
input[type="submit"] {
    width: 100%;
    padding: 12px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: border-color 0.3s;
    text-align: center;
}

input[type="submit"] {
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
    padding: 12px;
    border-radius: 5px;
}

input[type="submit"]:hover {
    background: #0056b3;
}

.ad-card,
.barcode-card {
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.ad-card img {
    max-width: 80%; /* تغيير الحجم هنا */
    width: auto;
    border-radius: 10px;
}


.barcode-card img {
    max-width: 100%;
    border-radius: 10px;
}

.barcode-card button {
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s;
    margin-top: 10px;
}

.barcode-card button:hover {
    background: #0056b3;
}

.footer {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
    padding: 10px 0;
    position: relative;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .navbar h1 {
        font-size: 20px;
    }

    .navbar .menu a {
        font-size: 18px; /* حجم الخط للروابط */

    }

    .wrap {
        padding: 30px;
    }

    input[type="text"],
    input[type="password"],
    input[type="submit"] {
        padding: 10px;
    }
}
.card {

    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(250, 247, 247, 0.8);
    display: inline-block; /* تأكد من أن البطاقة تظهر كعنصر فيلا */
}
.card a {
    color: black; /* تغيير لون النص داخل البطاقة إلى الأسود */
}

/* Existing styles... */

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white; /* خلفية صلبة وغير شفافة */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2000;
}

.loading-content h1 {
    font-size: 36px;
    color: rgba(106, 17, 203, 0.8) !important; /* بنفسجي زجاجي */
    margin-bottom: 20px;
}

.progress-bar {
    width: 100%;
    max-width: 70%; /* تحديد الحد الأقصى إلى 70% */
    background: #ddd;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar .filler {
    height: 10px;
    background: rgba(35, 30, 190, 0.5); /* لون الشريط إلى الأحمر */
    width: 0; /* ابدأ من 0 */
    transition: width 1s ease; /* انتقال الشريط */
}








body {
    direction: rtl; /* اتجاه الكتابة من اليمين لليسار */
}

.navbar {
    background: rgba(106, 17, 203, 0.7);
    backdrop-filter: blur(5px);
    font-size: 4px; /* تقليل حجم الخط أكثر */
    padding: 2px 5px; /* تقليل الـ padding أكثر */
    box-shadow: 0 2px 10px rgba(3, 0, 3, 0.7);
    transition: background 0.3s;
}
.menu a {
    transition: color 0.3s; /* تأثير الانتقال على النص */
}

.menu a:hover {
    color: #f1c40f; /* تغيير لون النص عند التمرير */
}

.menu a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.modal {
    display: none; /* مخفية افتراضيًا */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color:  rgba(3, 0, 3, 0.7); /* لون خلفية عند التمرير */
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* يمكن أن يكون أكثر أو أقل حسب حجم الشاشة */
    border-radius: 10px;
    max-height: 80%; /* أقصى ارتفاع */
    overflow-y: auto; /* التمرير العمودي عند الحاجة */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color:  rgba(221, 0, 255, 0.7); /* لون خلفية عند التمرير */
    text-decoration: none;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
    direction: rtl; /* اتجاه الكتابة في الجدول */
}

table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    white-space: nowrap; /* منع التكسير */
}

.sidebar {
    position: fixed;
    left: -300px; /* يبدأ من خارج الشاشة */
    top: 0;
    width: 300px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* شفافة قليلاً */
    color: #181818;
    transition: left 0.3s ease;
    z-index: 1000; /* ليكون فوق العناصر الأخرى */
    padding: 20px;
    box-shadow: 2px 0 10px rgba(3, 0, 3, 0.7); /* لون خلفية عند التمرير */
    backdrop-filter: blur(10px); /* تأثير ضبابي للخلفية */
}

#sidebar-more {
    background-color: rgba(50, 50, 100, 0.9); /* لون خلفية القائمة المنسدلة */
    color: #fff; /* لون النص */
}

#sidebar-more h2 {
    color: #f1c40f; /* لون عنوان القائمة */
}

#sidebar-more a {
    color: #fff; /* لون الروابط */
    background-color: rgba(100, 50, 150, 0.7); /* لون خلفية الروابط */
}

#sidebar-more a:hover {
    background-color: rgba(221, 0, 255, 0.7); /* لون خلفية الروابط عند التمرير */
    color: #fff; /* لون النص عند التمرير */
}

.close {
    color: #f1c40f; /* لون زر الإغلاق */
}



.sidebar.open {
    left: 0; /* تظهر في الشاشة */
}

.sidebar h2 {
    text-align: right; /* توسيط العنوان لليمين */
    margin-bottom: 20px;
}

.sidebar ul {
    list-style-type: none; /* إزالة النقاط من القائمة */
    padding: 0;
}

.sidebar li {
    margin: 10px 0; /* مسافة بين العناصر */
}

.sidebar a {
    display: block; /* يجعل الرابط يغطي كامل المساحة */
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8); /* لون الخلفية مع شفافية */
    border-radius: 5px; /* زوايا دائرية */
    text-align: right; /* محاذاة النص لليمين */
    text-decoration: none; /* إزالة الخط من الروابط */
    transition: background-color 0.3s, transform 0.3s; /* تأثيرات الانتقال */
}

.sidebar a:hover {
    background-color: rgba(221, 0, 255, 0.7); /* لون خلفية عند التمرير */
    transform: scale(1.05); /* تكبير عند التمرير */
}

.close {
    cursor: pointer;
    font-size: 20px;
    float: right;
}

.dropdown .dropbtn {
    background-color: rgba(0, 0, 0, 0.2); /* لون أسود زجاجي مع شفافية */
    color: white; /* لون النص أبيض */
    padding: 10px 10px; /* زيادة الارتفاع والعرض */
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px; /* تكبير حجم الخط */
    transition: background 1s;
    margin-left: 0px; /* دفع الزر إلى اليسار */
}

.dropdown .dropbtn:hover {
    background-color: rgba(86, 9, 155, 0.8); /* لون أغمق عند التمرير */
}



.ticker {
    background: rgba(255, 255, 255, 0.9); /* زيادة التعتيم */
    padding: 5px;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(250, 247, 247, 0.8);
    border-radius: 4px;
    transition: top 0.3s; /* تأثير الانتقال لمكان الشريط */
}

.ticker-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 5px 10px; /* قلل الـ padding */
    white-space: normal;
    transition: opacity 1s ease-in-out;
    font-size: 17px; /* قلل حجم الخط */
    box-shadow: 0 4px 20px rgba(250, 247, 247, 0.8);

}
.hidden {
    opacity: 0;
}


.container {
    max-width: 90%;
    margin: 0 auto;
}

.header {
    background-color: rgba(0, 128, 128, 0.9);
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

.month-year-select {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.month-year-select select {
    background-color: rgba(0, 128, 128, 0.8);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    font-size: 1em;
    width: 100%;
    max-width: 150px;
    transition: background-color 0.3s;
}

.month-year-select select:hover {
    background-color: rgba(0, 158, 148, 0.9);
}

.prayer-times {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.prayer-times table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.1); /* خلفية زجاجية */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.prayer-times table th {
    background-color: rgba(75, 0, 130, 0.8); /* بنفسجي شفاف */
    color: #fff; /* لون النص أبيض */
    padding: 12px;
    text-align: center;
    box-shadow: inset 0 -3px 5px rgba(255, 255, 255, 0.2);
}

.prayer-times table td {
    background-color: rgba(255, 255, 255, 0.7); /* لون مشابه لجوجل */
    color: #333; /* لون النص للخلايا */
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3); /* حدود خفيفة */
    transition: background-color 0.3s, transform 0.3s;
}

.prayer-times table td:hover {
    background-color: rgba(255, 255, 255, 0.9); /* لون أفتح عند التمرير */
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.error-message {
    color: #d32f2f;
    font-size: 1.2em;
    margin: 15px 0;
}

.info-card, .reminder-card, .hijri-date-card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.combined-card {
    display: flex;
    flex-direction: column;
    gap: 0; /* إزالة الفجوات بين الكروت */
}

.info-card, .reminder-card, .hijri-date-card {
    border: 1px solid rgba(0, 128, 128, 0.3);
    border-radius: 0; /* إزالة الزوايا المنحنية */
    margin: 0; /* إزالة الهامش */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 20px;
    background-color: rgba(0, 128, 128, 0.7);
    transition: transform 0.3s, box-shadow 0.3s;
}

.info-card {
    background-color: rgba(0, 128, 128, 0.8);
    color: #fff;
}

.hijri-date-card {
    background-color: rgba(50, 130, 180, 0.8);
    color: #fff;
}

.reminder-card {
    background-color: rgb(18, 100, 192);
    color: #f8f7f7;
}

.info-card:hover, .reminder-card:hover, .hijri-date-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.moon-symbol {
    font-size: 2em;
    margin-right: 20px;
}

@media (max-width: 600px) {
    .header h1 {
        font-size: 1.5em;
    }
    .prayer-times table th, .prayer-times table td {
        font-size: 0.9em;
        padding: 8px;
    }
    .prayer-times table {
        display: block;
        overflow-x: auto;
    }
}



.remaining-time-card {
    border: 1px solid rgba(0, 128, 128, 0.3);
    border-radius: 10px; /* حواف منحنية */
    padding: 20px;
    background-color: rgba(0, 128, 128, 0.7);
    color: #fff;
    text-align: center;
    margin-bottom: 15px; /* لإضافة فراغ بين البطاقة والبطاقات الأخرى */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}



/* تنسيق الخلفية */
/* تنسيق الخلفية */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* خلفية زجاجية */
    display: none; /* إخفاء الخلفية الافتراضية */
    z-index: 1000; /* لجعلها فوق كل العناصر الأخرى */
}

/* تنسيق النافذة المنبثقة */
#credentialsModal {
    background-color: rgba(255, 255, 255, 0.9); /* خلفية بيضاء شفافة */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    width: 99%; /* عرض النافذة 90% */
    height: 99%; /* ارتفاع النافذة 90% */
    overflow: hidden; /* إخفاء الفائض */
    position: fixed; /* جعلها ثابتة في منتصف الشاشة */
    top: 50%; /* مركز عمودي */
    left: 50%; /* مركز أفقي */
    transform: translate(-50%, -50%); /* نقل النافذة إلى المركز */
    z-index: 1001; /* فوق الخلفية */
}

.table-container {
    height: calc(90% - 60px); /* ارتفاع الجدول مع ترك مساحة للزر */
    overflow-y: auto; /* تمكين التمرير */
}

table {
    width: 100%; /* عرض الجدول 100% */
    border-collapse: collapse;
    margin-top: 0px; /* مسافة من الأعلى */
}

th, td {
    padding: 12px; /* تباعد داخل الخلايا */
    text-align: center; /* محاذاة النص إلى اليسار */
    border-bottom: 1px solid rgba(128, 0, 128, 0.3); /* خط تحت الخلايا بلون بنفسجي فاتح */
}

th {
    background-color: rgba(128, 0, 128, 0.7); /* لون خلفية رأس الجدول بنفسجي */
    color: #fff; /* لون النص أبيض */
    font-weight: bold; /* نص غامق */
}

tr:hover {
    background-color: rgba(128, 0, 128, 0.2); /* تغيير لون الصف عند التمرير فوقه */
}

button {
    margin-top: 15px; /* مسافة من الجدول */
    padding: 10px 15px; /* تباعد داخلي للزر */
    border: none; /* إزالة الحدود */
    border-radius: 5px; /* زوايا دائرية */
    background-color: rgba(128, 0, 128, 0.8); /* لون زر بنفسجي */
    color: #fff; /* لون النص */
    cursor: pointer; /* شكل المؤشر */
    transition: background-color 0.3s ease; /* تأثير التحول للزر */
}

button:hover {
    background-color: rgba(128, 0, 128, 1); /* لون الزر عند التمرير فوقه */
}

.close-button {
    background-color: transparent; /* خلفية شفافة */
    border: none; /* إزالة الحدود */
    color: #800080; /* لون بنفسجي */
    font-size: 20px; /* حجم الخط */
    cursor: pointer; /* شكل المؤشر */
    float: right; /* محاذاة إلى اليمين */
}



.modal-agent {
    display: none; /* مخفية افتراضيًا */
    position: fixed;
    z-index: 1000;
    left: 50%; /* تحريك اليسار إلى منتصف الشاشة */
    top: 50%; /* تحريك الأعلى إلى منتصف الشاشة */
    width: 90%; /* عرض 90% */
    height: 90%; /* ارتفاع 90% */
    transform: translate(-50%, -50%); /* لتحريك النافذة إلى المركز */
    overflow: auto;
    background-color: rgba(3, 0, 3, 0.7); /* لون خلفية */
}

.modal-content-agent {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #888;
    width: 100%; /* عرض كامل للنافذة */
    height: 100%; /* ارتفاع كامل للنافذة */
    border-radius: 10px;
    max-height: 100%; /* أقصى ارتفاع */
    overflow-y: auto; /* التمرير العمودي عند الحاجة */
    text-align: right; /* محاذاة النص إلى اليمين */
}

.modal-content-agent table {
    width: 100%; /* عرض الجدول كامل */
    direction: rtl; /* اتجاه الكتابة من اليمين لليسار */
}

.modal-content-agent td {
    text-align: right; /* محاذاة النص في الخلايا لليمين */
}



.close-agent {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-agent:hover,
.close-agent:focus {
    color: rgba(221, 0, 255, 0.7);
    text-decoration: none;
}




.notification {
    background-color: red; /* لون الخلفية */
    color: white; /* لون النص */
    padding: 5px 5px; /* مسافة حول النص */
    border-radius: 5px; /* زوايا مستديرة */
    display: inline; /* يمكن تغييره إلى inline-block إذا لزم الأمر */
    font-size: 11px; /* حجم الخط */
    font-weight: bold; /* جعل النص عريض */
    margin-left: 0px; /* مسافة بين الرابط والنقطة */

    /* التحكم في الموقع */
    position: relative; /* أو absolute حسب الحاجة */
    top: -37px; /* تحريك العنصر للأعلى بمقدار 10px */
    left: -200px; /* تحريك العنصر لليسار بمقدار 20px */
}




.eclipse-reminder-card {
    display: none;
    background-color: #2c2c2c; /* لون خلفية داكن */
    color: #ffffff; /* لون نص أبيض */
    border: 2px solid #ffcc00; /* إطار بلون ذهبي */
    padding: 20px;
    border-radius: 10px;
    margin: 15px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* ظل */
    display: flex; /* استخدام flexbox */
    flex-direction: column; /* ترتيب العناصر عمودياً */
    align-items: center; /* محاذاة العناصر في المنتصف */
    text-align: right; /* محاذاة النص لليمين */
    direction: rtl; /* اتجاه النص من اليمين إلى اليسار */
}

.eclipse-reminder-card img {
    margin-bottom: 10px; /* تباعد بين الصورة والنص */
    width: 150px; /* عرض الصورة */
    height: auto; /* ارتفاع تلقائي */
}

.eclipse-reminder-card span {
    font-size: 16px; /* حجم الخط */
    margin-top: 10px; /* ضبط المسافة من أعلى */
}

.countdown {
    font-size: 14px; /* حجم خط العد التنازلي */
    color: #ffcc00; /* لون العد التنازلي */
    margin-top: 10px; /* تباعد بين العد التنازلي والنص */
}


.app-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    border-radius: 12px;
    width: auto%; /* عرض البطاقة 90% من الشاشة */
    max-width: 600px; /* أقصى عرض للبطاقة */
    margin: 20px auto;
    box-shadow: 0 4px 20px rgba(250, 247, 247, 0.8);
    background-color: rgba(255, 255, 255, 0.8); /* خلفية غير شفافة للمربع الخارجي */
}
.app {
    background-color: transparent; /* خلفية شفافة للمربع الخاص بالبرنامج */
    border-radius: 12px;
    padding: 10px;
    margin: 10px;
    text-align: center;
    width: 70px; /* عرض البطاقة */
    transition: transform 0.3s;
    position: relative;
}
.app:hover {
    animation: pulse 0.5s ease;
}
.app img {
    width: 60px; /* حجم الأيقونة */
    height: 60px; /* حجم الأيقونة */
    margin-bottom: 5px;
    transition: transform 0.3s;
}
.app:hover img {
    transform: scale(1.1); /* تضخيم الأيقونة عند التحويم */
}
.app-label {
    font-size: 12px;
    color: #333;
    margin-top: 5px;
    display: block; /* جعل التسميات تظهر ككتل */
    white-space: nowrap;
    text-align: center; /* توسيط النص */
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@media (min-width: 320px) {
    .app {
        width: 80px; /* عرض البطاقة */
    }
}
@media (min-width: 480px) {
    .app {
        width: 90px; /* عرض البطاقة */
    }
}
@media (min-width: 768px) {
    .app {
        width: 100px; /* عرض البطاقة */
    }
}