/* للهيدر عندما يكون مثبتًا في الأعلى */
#header.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 1;
}

/* للهيدر عندما يكون مثبتًا في الأسفل */
#header.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.3);
    transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 1;
    display: flex; /* استخدم Flexbox */
    justify-content: center; /* توسيط العناصر أفقيًا */
    align-items: center; /* توسيط العناصر عموديًا */
}

#header.fixed-bottom .logo {
    display: none; /* إخفاء اللوغو عند ظهور الهيدر في الأسفل */
}


/* عند التبديل بين الموضعين، تضيف تأثير شفافية لإخفاء أو إظهار الهيدر */
#header.hidden {
    opacity: 0;
    transition: opacity 0.5s ease; /* تأثير الانتقال عند الإخفاء */
}





/* تكبير خط القائمة */
#header .navbar ul li a {
    font-size: 1rem; /* الحجم الافتراضي */
    transition: font-size 0.3s ease; /* تأثير الانتقال */
}