/* ===== Website Design Configuration - Dynamic CSS ===== */
        /* Generated from: Website > Configuration > Design Settings */
        
        
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');
        
        
        :root {
            --o-font-family-sans-serif: 'Inter', sans-serif;
            --o-font-family-headings: 'Inter', sans-serif;
            --font-english: 'Inter', sans-serif;
            --font-arabic: 'Cairo', sans-serif;
        }
        
        body {
            font-family: 'Inter', sans-serif !important;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Inter', sans-serif;
        }
        
        /* Arabic / RTL Overrides */
        [lang^="ar"], [dir="rtl"], .o_rtl {
            font-family: 'Cairo', sans-serif !important;
        }
        
        [lang^="ar"] h1, [lang^="ar"] h2, [lang^="ar"] h3, [lang^="ar"] h4, [lang^="ar"] h5, [lang^="ar"] h6,
        [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
            font-family: 'Cairo', sans-serif !important;
        }
        
        
        
        /* Tooltip CSS Variables - these override the JS defaults */
        :root {
            --tooltip-bg: #16a34a !important;
            --tooltip-text: #ffffff !important;
            --tooltip-border-radius: 8px !important;
            --tooltip-font-size: 12px !important;
            --tooltip-max-width: 280px !important;
        }
        
        /* CATCH-ALL: Any element with data-tooltip attribute */
        [data-tooltip]::after {
            background: #16a34a !important;
            color: #ffffff !important;
            font-size: 12px !important;
            border-radius: 8px !important;
            max-width: 280px !important;
        }
        
        [data-tooltip]::before {
            border-right-color: #16a34a !important;
        }
        
        html[dir="rtl"] [data-tooltip]::before {
            border-left-color: #16a34a !important;
            border-right-color: transparent !important;
        }
        
        /* Direct class overrides for maximum specificity */
        .sabeeli-tooltip::after,
        .sabeeli-menu-tooltip::after,
        .dropdown-menu .sabeeli-menu-tooltip::after,
        .o_mega_menu .sabeeli-menu-tooltip::after,
        nav .dropdown-menu a.sabeeli-menu-tooltip::after,
        .navbar .dropdown-menu .sabeeli-menu-tooltip::after,
        header .dropdown-menu a[data-tooltip]::after,
        .top_menu .dropdown a[data-tooltip]::after,
        #top_menu .dropdown a[data-tooltip]::after {
            background: #16a34a !important;
            color: #ffffff !important;
            font-size: 12px !important;
            border-radius: 8px !important;
            max-width: 280px !important;
        }
        
        /* Arrow colors - all variations */
        .sabeeli-menu-tooltip::before,
        .dropdown-menu .sabeeli-menu-tooltip::before,
        .o_mega_menu .sabeeli-menu-tooltip::before,
        nav .dropdown-menu a.sabeeli-menu-tooltip::before,
        header .dropdown-menu a[data-tooltip]::before,
        .top_menu .dropdown a[data-tooltip]::before,
        #top_menu .dropdown a[data-tooltip]::before {
            border-right-color: #16a34a !important;
        }
        
        /* RTL arrow colors - all variations */
        html[dir="rtl"] .sabeeli-menu-tooltip::before,
        html[dir="rtl"] .dropdown-menu .sabeeli-menu-tooltip::before,
        html[dir="rtl"] .o_mega_menu .sabeeli-menu-tooltip::before,
        html[dir="rtl"] header .dropdown-menu a[data-tooltip]::before {
            border-left-color: #16a34a !important;
            border-right-color: transparent !important;
        }
        
        
        /* Footer Background - ultra-specific selectors */
        footer,
        body footer,
        .o_footer,
        body .o_footer,
        section.o_footer,
        footer.o_footer,
        #wrap footer,
        body #wrap footer,
        html body footer,
        html body .o_footer {
            background: #131313 !important;
            background-color: #131313 !important;
            color: #a1a1aa !important;
        }
        
        /* Footer headings */
        footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
        .o_footer h1, .o_footer h2, .o_footer h3, .o_footer h4, .o_footer h5, .o_footer h6,
        body footer h1, body footer h2, body footer h3, body footer h4,
        html body footer h1, html body footer h2, html body footer h3 {
            color: #ffffff !important;
        }
        
        /* Footer links */
        footer a,
        .o_footer a,
        body footer a,
        html body footer a {
            color: #d4d4d8 !important;
        }
        
        /* Footer link hover */
        footer a:hover,
        .o_footer a:hover,
        body footer a:hover,
        html body footer a:hover {
            color: #16a34a !important;
        }
        
        /* Footer text */
        footer p, footer span, footer div,
        .o_footer p, .o_footer span, .o_footer div {
            color: #a1a1aa !important;
        }
        
        
        .s_page_hero, .hero-section {
            background: #16a34a !important;
            color: #ffffff !important;
        }
        
        
        /* Brand Colors */
        :root {
            --btn-primary: #16a34a;
            --btn-primary-hover: #15803d;
            --btn-secondary: #1e3a5f;
        }