body {
    background-color: #f9f9f9;
    font-family: 'cario', sans-serif;
    font-style: italic;
}

/* تلوين العنوان الرئيسي */
h1 {
    color: white;
    text-align: center;
    font-size: 24px;
    background-color: black;
}

/* تلوين العنوان الفرعي */
.main {
    color: black;
    text-align: center;
    font-size: 24px;
    background-color: #DDD
}
p {
  font-size: 16px;
}
h3 {
    color: black;
    text-align: center;
    font-size: 24px;
}
ul {
    text-align: center;    /* لـتوسيط النص */
    list-style-position: inside; /* هذا التعديل سينقل النقطة لتصبح بجانب الكلمة في السنتر */
    direction: ltr;
}
/* افترضنا أنك وضعت القائمة داخل div وعطيته كلاس اسمه card */
.my-card {
    background-color: lightgoldenrodyellow;
    border-radius: 10px;
    padding: 20px;
    margin: 20px auto;
    width: 80%;
    border: 2px solid #000000;
}
/* تنسيق الروابط لتصبح كأزرار أنيقة */
.social-btn {
    display: inline-block;
    background-color: #333;      /* لون خلفية غامق */
    color: white;                /* لون النص أبيض */
    padding: 8px 15px;           /* مسافة داخلية */
    margin: 5px;                 /* مسافة بين الأزرار */
    text-decoration: none;       /* إزالة الخط السفلي الافتراضي للرابط */
    border-radius: 5px;          /* انحناء الحواف */
    font-size: 14px;
}

/* تنسيق الزر التفاعلي الكبير */
.action-btn {
    background-color: #238636;   /* لون أخضر جذاب */
    color: white;
    padding: 12px 25px;
    border: none;                /* إزالة الإطار الافتراضي البشع للزر */
    border-radius: 20px;         /* حواف دائرية كاملة */
    cursor: pointer;             /* تغيير شكل الماوس ليد عند الوقوف عليه */
    font-weight: bold;
    margin-top: 20px;
    display: block;              /* لجعله في سطر منفصل */
    width: 100%;                 /* يأخذ عرض البطاقة بالكامل */
}