/* 1. تصفير الحاوية الأساسية للثيم */
.main-wrapper {
    padding-top: 0 !important;
}

/* 2. جعل الهيدر يطفو فوق البنر تماماً بدون حجز مساحة */
header.main-header {
    position: fixed !important; /* تثبيت الهيدر في الأعلى */
    top: 0 !important;
    width: 100% !important;
    background: transparent !important; /* شفافية كاملة */
    z-index: 1000 !important;
    border: none !important;
    transition: background 0.3s ease;
}

/* 3. إجبار البنر على الالتصاق بأول بكسل في الشاشة */
#overlap-banner-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    display: block !important;
}

/* 4. ضبط الصورة لتملأ الفراغ خلف الهيدر */
.banner-box img {
    width: 100% !important;
    height: auto;
    min-height: 500px; /* ارتفاع يغطي الهيدر */
    object-fit: cover;
    display: block !important;
}

/* 5. ضبط الدوائر (الخلفية البيضاء) لتبرز فوق البنر */
.floating-categories {
    position: relative !important;
    z-index: 1001 !important;
    margin-top: -100px !important; /* رفع الدوائر فوق الصورة */
    display: flex;
    justify-content: center;
}

/* 6. حل مشكلة اختفاء الهيدر عند التمرير (اختياري) */
.scrolled header.main-header {
    background: rgba(255, 255, 255, 0.9) !important; /* خلفية بيضاء خفيفة عند النزول */
}