/* Add custom CSS styles below */
/* تحسين الخطوط والنصوص */
body {
    font-family: 'Tajawal', sans-serif;
    line-height: 1.8;
    letter-spacing: 0.5px;
    transition: all 0.3s ease-in-out;
}

/* تحسين العناوين والفقرات */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    text-transform: capitalize;
}

p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* تحسين الروابط */
a {
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

a:hover {
    opacity: 0.8;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* تحسين الأزرار */
button, .btn {
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

button:hover, .btn:hover {
    transform: scale(1.05);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
}

/* تحسين الأقسام */
section {
    padding: 50px 0;
    transition: all 0.3s ease-in-out;
}

/* تحسين البطاقات */
.card {
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.card:hover {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

/* تأثير التحميل المتدرج */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* إضافة تأثير الظهور التدريجي */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}