/* تخصيص الألوان الأساسية (علم مصر) */
:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-red: #ce1126;
    --color-gold: #ffc107;
--color-purple: #8a2be2; 
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 76px; /* تعويض ارتفاع الشريط الثابت */
    background-color: #f8f9fa;
    line-height: 1.8;
}
/* شريط التنقل */
.navbar {
    background-color: rgba(0, 0, 0, 0.9) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* قسم البطل */
.hero-section {
    background: linear-gradient(135deg, var(--color-black) 0%, #333 100%);
    color: white;
    padding: 120px 0;
    text-align: center;
    border-bottom: 5px solid var(--color-red);
}
/* بطاقات */
.about-card {
    background: linear-gradient(to bottom right, #fff, #f8f9fa);
    border-right: 5px solid var(--color-gold);
}
.mission-item .icon-wrapper {
    width: 40px;
    height: 40px;
    background-color: #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.project-card {
    transition: transform 0.3s ease;
    border-top: 4px solid transparent;
}
.project-card:hover {
    transform: translateY(-10px);
}
.project-card:nth-child(1) { border-top-color: var(--color-red); }
.project-card:nth-child(2) { border-top-color: #28a745; } /* أخضر */
.project-card:nth-child(3) { border-top-color: var(--color-black); }
.project-card:nth-child(4) { border-top-color: #8a2be2; }
.icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
}
.support-card {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.social-icon {
    color: #555;
    transition: color 0.3s;
}
.social-icon:hover {
    color: var(--color-red);
}
/* تذييل الصفحة */
footer {
    background-color: var(--color-black);
    color: white;
}