/* ========================================
   HEADER CUSTOMIZATION CONFIG
   ======================================== 
   
   قم بتعديل هذه القيم لتخصيص الهيدر حسب احتياجاتك
*/

:root {
    /* ===== إعدادات الهيدر ===== */
    --header-height: 100px;              /* ارتفاع الهيدر العادي */
    --header-scrolled-height: 80px;      /* ارتفاع الهيدر عند السكرول */
    
    /* ===== إعدادات اللوجو ===== */
    --logo-max-height: 150px;             /* أقصى ارتفاع للوجو */
    --logo-scrolled-height: 60px;        /* ارتفاع اللوجو عند السكرول */
    --logo-max-width: 200px;             /* أقصى عرض للوجو */
    --logo-padding: 10px;                /* المسافة حول اللوجو */
    
    /* ===== الألوان الأساسية ===== */
    --primary-blue: #0066FF;
    --primary-blue-dark: #0052CC;
    --secondary-blue: #00B8FF;
    --accent-blue: #6B8CFF;
    --electric-blue: #00D4FF;
    --dark-navy: #001F3F;
    
    /* ===== الألوان المحايدة ===== */
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-600: #4B5563;
    --gray-900: #111827;
    
    /* ===== إعدادات التأثيرات ===== */
    --transition-speed: 0.4s;
    --border-radius: 12px;
    --border-radius-large: 20px;
    --box-shadow: 0 4px 20px rgba(0, 102, 255, 0.08);
    --box-shadow-hover: 0 8px 32px rgba(0, 102, 255, 0.15);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Desktop Large (1200px+) */
@media (min-width: 1200px) {
    :root {
        --header-height: 120px;
        --logo-max-height: 106px;
    }
}

/* Desktop (992px - 1199px) */
@media (max-width: 1199px) {
    :root {
        --header-height: 90px;
        --header-scrolled-height: 75px;
        --logo-max-height: 65px;
        --logo-scrolled-height: 55px;
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    :root {
        --header-height: 75px;
        --header-scrolled-height: 70px;
        --logo-max-height: 55px;
        --logo-scrolled-height: 50px;
        --logo-max-width: 160px;
    }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767px) {
    :root {
        --header-height: 70px;
        --header-scrolled-height: 65px;
        --logo-max-height: 50px;
        --logo-scrolled-height: 45px;
        --logo-max-width: 140px;
    }
}

/* Mobile (up to 575px) */
@media (max-width: 575px) {
    :root {
        --header-height: 65px;
        --header-scrolled-height: 60px;
        --logo-max-height: 45px;
        --logo-scrolled-height: 40px;
        --logo-max-width: 120px;
        --logo-padding: 8px;
    }
}

/* ========================================
   LOGO ADJUSTMENT EXAMPLES
   ======================================== 
   
   استخدم أحد هذه الأمثلة أو عدّلها حسب حاجتك:
*/

/* مثال 1: لوجو كبير */
/*
:root {
    --header-height: 120px;
    --logo-max-height: 90px;
    --logo-scrolled-height: 70px;
}
*/

/* مثال 2: لوجو صغير */
/*
:root {
    --header-height: 80px;
    --logo-max-height: 55px;
    --logo-scrolled-height: 45px;
}
*/

/* مثال 3: لوجو عريض (للوجو أفقي) */
/*
.logo-image {
    max-width: 250px;
    max-height: 60px;
}
*/

/* مثال 4: لوجو مربع */
/*
.logo-image {
    width: 70px;
    height: 70px;
}
*/

/* ========================================
   COLOR SCHEMES - اختر لون مناسب
   ======================================== */

/* Blue Scheme (Default) - أزرق */
/* Already set above */

/* Green Scheme - أخضر */
/*
:root {
    --primary-blue: #00AA55;
    --primary-blue-dark: #008844;
    --secondary-blue: #00CC66;
    --accent-blue: #66DD99;
    --electric-blue: #00FFAA;
}
*/

/* Red Scheme - أحمر */
/*
:root {
    --primary-blue: #FF3366;
    --primary-blue-dark: #CC2952;
    --secondary-blue: #FF5577;
    --accent-blue: #FF88AA;
    --electric-blue: #FF99BB;
}
*/

/* Purple Scheme - بنفسجي */
/*
:root {
    --primary-blue: #7C3AED;
    --primary-blue-dark: #6D28D9;
    --secondary-blue: #A78BFA;
    --accent-blue: #C4B5FD;
    --electric-blue: #DDD6FE;
}
*/

/* Orange Scheme - برتقالي */
/*
:root {
    --primary-blue: #FF8800;
    --primary-blue-dark: #CC6600;
    --secondary-blue: #FFAA33;
    --accent-blue: #FFBB55;
    --electric-blue: #FFCC77;
}
*/