body {
    background-color: #f8f9fa; /* لون الخلفية */
    font-family: 'Roboto', sans-serif; /* نوع الخط */
    display: block;
    justify-content: center;
    align-items: center;
    height: 100vh; /* جعل المحتوى في وسط الصفحة عموديًا */
    margin: 0; /* إزالة المسافات الافتراضية */
}
.container {
    text-align: center; /* محاذاة النص إلى المركز */
}

header{
    margin: 0;
    background-color: #343a40;
}

header h1 {
    color: #e0a800;
    margin: 0;
}

footer p {
    margin: 0;
}
.custom-size {
    display: inline-block;
    color: #e0a800;
    width: 250px; /* تعيين العرض */
    height: 50px; /* تعيين الطول */
    font-size: 16px; /* تعيين حجم الخط داخل الزر */
   /* border-radius: 20PX,20PX,20PX,20PX;*/
}
.button-active {
    background-color: #2c2036; /* لون الزر عند الضغط */
    color: white; /* لون النص عند الضغط */
}
.button-hover {
    color: #e0a800;
    transition: transform 0.8s, background-color 0.5s;
    padding: 15px 30px;  /* زيادة حجم الزر */
    font-size: 18px; /* زيادة حجم الخط */
    border-radius: 15px; /* زوايا دائرية */
    border: none; /* إزالة الحدود */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* إضافة ظل */
}

.button-hover:hover {
    transform: scale(1.5); /* تكبير الزر عند المرور */
}

.button-hover.btn-success {
    background-color: #4aa0c0; /* لون زر النجاح */
    color: rgb(188, 151, 151); /* لون النص */
}

.button-hover.btn-success:hover {
    background-color: #218838; /* لون عند المرور على زر 1 */
}

.button-hover.btn-danger {
    background-color: #dc3545; /* لون زر الخطر */
    color: white; /* لون النص */
}

.button-hover.btn-danger:hover {
    background-color: #c82333; /* لون عند المرور على زر 2 */
}


.btn-primary {
    background-color: #091057; /* لون الزر الرئيسي */
    font-family: sans-serif;
    font-size: 16px;
    color: #f4f8fa;
}
.btn1-primary1 {
    background-color: #091057; /* لون الزر الرئيسي */
    font-family: sans-serif;
    font-size: 16px;
    color: #e4ebee;
}
.btn-secondary {
    background-color: #6c757d; /* لون الزر الثانوي */
    color: white;
}

.btn-success {
    background-color: #28a745; /* لون زر النجاح */
    color: white;
}

.btn-danger {
    background-color: #dc3545; /* لون زر الخطر */
    color: white;
}

.btn-warning {
    background-color: #ffc107; /* لون زر التحذير */
    color: white;
}

.btn-info {
    background-color: #17a2b8; /* لون زر المعلومات */
    color: white;
}

.btn-light {
    background-color: #f8f9fa; /* لون الزر الفاتح */
    color: black;
}

.btn-dark {
    background-color: #343a40; /* لون الزر الداكن */
    color: white;
}

/* تأثيرات المرور */
.button-hover:hover {
    transform: scale(1.3); /* تكبير الزر عند المرور */
}

/* تغيير لون الأزرار عند المرور */
.btn-primary:hover {
    background-color: #3a4564;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-success:hover {
    background-color: #218838;
}

.btn-danger:hover {
    background-color: #c82333;
}

.btn-warning:hover {
    background-color: #e0a800;
}

.btn-info:hover {
    background-color: #138496;
}

.btn-light:hover {
    background-color: #e2e6ea;
}

.btn-dark:hover {
    background-color: #5174a9;
}

h1 {
     font-family: sans-serif;
    font-size: 25px; /* حجم الخط */
    color: #130303; /* لون النص */
    margin-bottom: 5px; /* مسافة أسفل العنوان */
}
.button-container {
    display: flex; /* استخدام الفليكس لجعل الأزرار في صف */
    flex-wrap: wrap; /* العوامل السلبية على الصف */
    justify-content: center; /* محاذاة الأزرار في الوسط */
}
.nav {
   background-color: #343a40;;
    display: flex; /* استخدام Flexbox لترتيب الأزرار */
}

.nav-link {

    margin-left: 5px; /* مسافة بين الأزرار */
    text-decoration: none; /* إزالة تحت السطر */
    color: #ffffff; /* لون النص */
    font-weight: 500; /* سمك الخط */
}

.nav-link:hover {
    text-decoration: underline; /* تفعل تحت السطر عند التحويم */
    color: #cccccc; /* لون مختلف عند التحويم */
}
.Box-Downlod {
 
   /* width: 70%;
    height: 106%;*/
    background-color: #4a9b9b;
    border-style: solid;
    border-radius: 15px;
}
.Downlod {
 
    /* width: 70%;
     height: 106%;*/
     background-color: #4a9b9b;
     border-style: solid;
     border-radius: 15px;
 }