:root {
            --primary-green: #008743; /* Kelly Green */
            --secondary-green: #00A652; /* درجة أفتح للـ hover */
            --black: #1A1A1A;
            --white: #FFFFFF;
            --light-gray: #e8e8e8;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: 'Tajawal', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #ced4da;
            color: #212529;
            line-height: 1.6;
            direction: {{ $dir }};
            min-font-size: 16px; /* ضمان حجم نص أدنى للوصول */
        }
        /* Top Bar */
        .topbar {
            background-color: var(--light-gray);
            color: #333;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 25px;
            padding: 0 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            font-size: 13px;
        }
        .topbar a {
            color: #333;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: color 0.3s ease;
        }
        .topbar a:hover, .topbar a:focus {
            color: var(--primary-green);
            outline: 2px solid var(--secondary-green); /* تحسين التركيز */
            box-shadow: 0 0 0 3px rgba(0, 167, 82, 0.3);
        }
        .topbar i {
            font-size: 14px;
            color: var(--primary-green);
            transition: color 0.3s ease;
        }
        .topbar a:hover i, .topbar a:focus i {
            color: var(--secondary-green);
        }
        @media (max-width: 600px) {
            .topbar {
                height: 32px;
                font-size: 12px; /* زيادة طفيفة لحجم النص */
                gap: 12px;
                padding: 0 10px;
            }
            .topbar i {
                font-size: 12px;
            }
        }
        /* Navbar */
        .navbar {
            background-color: var(--primary-green);
            padding: 8px 0;
            box-shadow: var(--shadow);
            position: sticky;
            top: 35px;
            z-index: 999;
        }
        .navbar-brand img {
            height: 30px;
            transition: transform 0.3s ease;
        }
        .navbar-brand:hover img, .navbar-brand:focus img {
            transform: scale(1.05);
        }
        .navbar-nav .nav-link {
            color: var(--white) !important;
            font-weight: 500;
            font-size: 0.9rem;
            margin: 0 10px;
            padding: 0.3rem 0.5rem;
            position: relative;
            transition: color 0.3s ease;
        }
        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active,
        .navbar-nav .nav-link:focus {
            color: var(--secondary-green) !important;
            outline: 2px solid var(--secondary-green); /* تحسين التركيز */
            box-shadow: 0 0 0 3px rgba(0, 167, 82, 0.3);
        }
        .nav-scroll::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--secondary-green);
            transition: width 0.3s ease;
        }
        .nav-scroll:hover::after,
        .nav-scroll.active::after,
        .nav-scroll:focus::after {
            width: 100%;
        }
        .nav-scroll.loading {
            color: var(--secondary-green) !important;
            animation: none;
        }
        .dropdown-menu {
            background-color: var(--black);
            border: none;
            box-shadow: var(--shadow);
            font-size: 0.8rem;
        }
        .dropdown-item {
            color: var(--white);
            padding: 6px 12px;
        }
        .dropdown-item:hover,
        .dropdown-item:focus {
            background-color: var(--primary-green);
            color: var(--white);
            outline: 2px solid var(--secondary-green); /* تحسين التركيز */
        }
        .flag-icon {
            width: 14px;
            margin-{{ $lang == 'ar' ? 'left' : 'right' }}: 4px;
            vertical-align: middle;
        }
        /* Footer */
        .footer-section {
            background-color: var(--black);
            color: var(--white);
            padding: 30px 0 10px;
        }
        .footer-logo img {
            max-height: 40px;
            margin-bottom: 10px;
            transition: transform 0.3s ease;
        }
        .footer-logo img:hover,
        .footer-logo img:focus {
            transform: scale(1.1);
        }
        .footer-block {
            background-color: transparent;
            border: none;
            padding: 10px;
        }
        .footer-block h4 {
            color: var(--secondary-green);
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 10px;
        }
        .footer-block a {
            color: var(--white);
            text-decoration: none;
            transition: color 0.3s ease;
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 0.85rem;
        }
        .footer-block a:hover,
        .footer-block a:focus {
            color: var(--primary-green);
            outline: 2px solid var(--secondary-green); /* تحسين التركيز */
        }
        .footer-block i {
            font-size: 1.1rem;
            margin-{{ $lang == 'ar' ? 'left' : 'right' }}: 6px;
            color: var(--secondary-green);
            transition: color 0.3s ease;
            aria-hidden="true"; /* إخفاء الأيقونات الزخرفية */
        }
        .footer-block a:hover i,
        .footer-block a:focus i {
            color: var(--primary-green);
        }
        .footer-copyright {
            background-color: var(--primary-green);
            padding: 8px 0;
            font-size: 0.75rem;
            border-top: none;
        }
        .footer-copyright span {
            color: var(--white);
        }
        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            {{ $lang == 'ar' ? 'left' : 'right' }}: 30px;
            background-color: var(--primary-green);
            color: var(--white);
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            text-decoration: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, transform 0.3s ease;
            z-index: 1000;
        }
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }
        .back-to-top:hover,
        .back-to-top:focus {
            background-color: var(--secondary-green);
            transform: translateY(-5px);
            outline: 2px solid var(--secondary-green); /* تحسين التركيز */
            box-shadow: 0 0 0 3px rgba(0, 167, 82, 0.3);
        }
        /* Override conflicting styles */
        .navbar-nav .nav-link {
            color: var(--white) !important;
        }
        .nav-link:hover, .nav-link.active, .nav-link:focus {
            color: var(--secondary-green) !important;
        }
        .footer-block .fab {
            color: var(--secondary-green);
        }
        .footer-block .fab:hover,
        .footer-block .fab:focus {
            color: var(--primary-green);
        }
        /* تحسين الاستجابة لشاشات الموبايل */
        @media (max-width: 768px) {
            .topbar {
                padding: 0 12px;
            }
            .navbar {
                padding: 6px 0;
            }
            .navbar-brand img {
                height: 28px;
            }
            .nav-link {
                font-size: 0.9rem; /* زيادة حجم النص للوصول */
                padding: 0.3rem 0.4rem;
            }
        }
        @media (max-width: 600px) {
            .navbar {
                top: 32px;
            }
        }
        @media (max-width: 576px) {
            .topbar {
                padding: 0 8px;
            }
            .navbar-brand img {
                height: 25px;
            }
            .nav-link {
                font-size: 0.9rem; /* زيادة حجم النص للوصول */
            }
        }
        .whatsapp-float {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }
        .whatsapp-icon {
            width: 50px;
            height: 50px;
        }