@media(max-width:767px){.elementor-7793 .elementor-element.elementor-element-56f77f9{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for html, class: .elementor-element-56f77f9 */.custom-header {
  border-radius: 22px;
  box-shadow: 0 6px 32px rgba(0,150,136,0.22), 0 2px 16px rgba(0,0,0,0.11);
}
.menu-icon {
  left: -24px;
}

/* =========================================== */
/* ضبط اللوجو في الهيدر - إعدادات أساسية */
/* =========================================== */

/* استهداف اللوجو الرئيسي في الهيدر */
.site-header .custom-logo,
.header-logo img,
.site-logo img,
.header .logo img,
.custom-logo-link img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 180px !important; /* الحجم الافتراضي للديسكتوب */
    height: auto !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    object-fit: contain !important;
}

/* مركزة العنصر الحاوي للوجو */
.site-branding,
.header-logo,
.logo-wrapper,
.custom-logo-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 15px 0 !important;
}

/* =========================================== */
/* شاشات الديسكتوب الكبيرة (1200px فما فوق) */
/* =========================================== */
@media (min-width: 1200px) {
    .site-header .custom-logo,
    .header-logo img,
    .site-logo img,
    .header .logo img,
    .custom-logo-link img {
        max-width: 220px !important;
        height: auto !important;
        max-height: 80px !important; /* تحديد أقصى ارتفاع */
    }
    
    /* تأثير عند التمرير */
    .scrolled .custom-logo-link img {
        max-width: 160px !important;
        max-height: 60px !important;
    }
}

/* =========================================== */
• شاشات الديسكتوب المتوسطة (992px - 1199px) */
/* =========================================== */
@media (min-width: 992px) and (max-width: 1199px) {
    .site-header .custom-logo,
    .header-logo img,
    .site-logo img,
    .header .logo img,
    .custom-logo-link img {
        max-width: 200px !important;
        max-height: 70px !important;
    }
}

/* =========================================== */
• شاشات التابلت (768px - 991px) */
/* =========================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .site-header .custom-logo,
    .header-logo img,
    .site-logo img,
    .header .logo img,
    .custom-logo-link img {
        max-width: 160px !important;
        max-height: 60px !important;
        padding: 10px 0 !important;
    }
    
    .site-branding,
    .header-logo,
    .logo-wrapper {
        padding: 10px 0 !important;
        min-height: 80px !important;
    }
}

/* =========================================== */
• شاشات الموبايل الكبيرة (576px - 767px) */
/* =========================================== */
@media (max-width: 767px) and (min-width: 576px) {
    .site-header .custom-logo,
    .header-logo img,
    .site-logo img,
    .header .logo img,
    .custom-logo-link img {
        max-width: 140px !important;
        max-height: 50px !important;
        padding: 8px 0 !important;
    }
    
    .site-branding,
    .header-logo,
    .logo-wrapper {
        padding: 8px 0 !important;
        min-height: 70px !important;
    }
}

/* =========================================== */
• شاشات الموبايل الصغيرة (أقل من 576px) */
/* =========================================== */
@media (max-width: 575px) {
    .site-header .custom-logo,
    .header-logo img,
    .site-logo img,
    .header .logo img,
    .custom-logo-link img {
        max-width: 120px !important;
        max-height: 45px !important;
        padding: 5px 0 !important;
    }
    
    .site-branding,
    .header-logo,
    .logo-wrapper {
        padding: 5px 0 !important;
        min-height: 60px !important;
    }
}

/* =========================================== */
• شاشات صغيرة جداً (أقل من 400px) */
/* =========================================== */
@media (max-width: 399px) {
    .site-header .custom-logo,
    .header-logo img,
    .site-logo img,
    .header .logo img,
    .custom-logo-link img {
        max-width: 100px !important;
        max-height: 40px !important;
    }
}

/* =========================================== */
• إعدادات إضافية لتحسين الأداء */
/* =========================================== */

/* منع التشوه عند التكبير */
.custom-logo-link img {
    width: auto !important;
    object-position: center !important;
}

/* تحسين المسافات في الهيدر */
.site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* إذا كان الهيدر يحتوي على عناصر أخرى */
.header-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* إذا كان اللوجو في المنتصف مع عناصر أخرى */
.header-middle {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
}

/* تأثيرات تفاعلية */
.custom-logo-link img:hover {
    transform: scale(1.05) !important;
    opacity: 0.9 !important;
}

/* =========================================== */
• حلول لمشاكل شائعة */
/* =========================================== */

/* إذا كان اللوجو غير مرئي */
.site-header img[src*="logo"]:not([src]) {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="50" viewBox="0 0 150 50"><rect width="150" height="50" fill="%23f0f0f0"/><text x="50%" y="50%" font-family="Arial" font-size="14" fill="%23666" text-anchor="middle" dy=".3em">LOGO</text></svg>') !important;
}

/* إذا كان هناك مساحة زائدة */
.site-header .custom-logo {
    line-height: 0 !important;
    font-size: 0 !important;
}

/* لضمان الظهور فوق العناصر الأخرى */
.site-branding {
    z-index: 100 !important;
    position: relative !important;
}

/* =========================================== */
• إعدادات للطباعة */
/* =========================================== */
@media print {
    .site-header .custom-logo,
    .header-logo img {
        max-width: 100px !important;
        filter: grayscale(100%) !important;
    }
}/* End custom CSS */