PageSourceSearch

https://alfac.edu.sa/login

html alfac.edu.sa collected 2026-10-07 00:00:21 UTC 111,456 bytes, 3,056 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ar">
3
4
5<head>
6    <meta charset="utf-8">
7<!-- CSRF Token -->
8<meta name="csrf-token" content="FfGJ4SYsegEaMTBCuTd4VyHJGqPbkvn4IKfB5A8C">
9<meta name="google-site-verification" content="MavK-BVjuskESReOp8bQ1iLLQwhvtBBev9xF6RNOynQ" />
10<meta http-equiv="X-UA-Compatible" content="IE=edge">
11<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
12
13<meta name='robots' content="index, follow, all">
14<input type="hidden" name="_token" value="FfGJ4SYsegEaMTBCuTd4VyHJGqPbkvn4IKfB5A8C">
15
16
17<meta name="title" content="Login">
18<meta name="description" content="Login Page Description">
19<meta name="keywords" content="أكاديمية الفيصل, التدريب, التعليم الإلكتروني, دورات تدريبية, السعودية, Al Faisal Academy, Training, E-Learning, Courses, Saudi Arabia">
20<meta name="author" content="Al Faisal Academy">
21
22    <meta property="og:description" content="Login Page Description">
23    <meta name='twitter:description' content='Login Page Description'>
24
25<link rel='shortcut icon' type='image/png' href="https://alfac.edu.sa/images/logo.png">
26<link rel="manifest" href="/mix-manifest.json?v=4">
27<meta name="theme-color" content="#FFF">
28<!-- Windows Phone -->
29<meta name="msapplication-starturl" content="/">
30<meta name="msapplication-TileColor" content="#FFF">
31<meta name="msapplication-TileImage" content="/images/logo.png">
32<!-- iOS Safari -->
33<meta name="apple-mobile-web-app-title"
34    content="اكاديمية الفيصل العالمية">
35<link rel="apple-touch-icon" href="https://alfac.edu.sa/images/logo.png">
36<meta name="apple-mobile-web-app-capable" content="yes">
37<meta name="apple-mobile-web-app-status-bar-style" content="default">
38<!-- Android -->
39<link rel='icon' type='image/png' href='https://alfac.edu.sa/images/logo.png'>
40<meta name="application-name"
41    content="اكاديمية الفيصل العالمية">
42<meta name="mobile-web-app-capable" content="yes">
43<!-- Other -->
44<meta name="layoutmode" content="fitscreen/standard">
45<link rel="home" href="https://alfac.edu.sa">
46
47<!-- Open Graph -->
48<meta property='og:title' content='Login'>
49<meta property='og:url' content='https://alfac.edu.sa/login'>
50<meta property='og:site_name'
51    content='اكاديمية الفيصل العالمية'>
52<meta property='og:type' content='website'>
53<meta property='og:locale' content='ar_SA'>
54<meta property='og:locale:alternate' content='en_US'>
55
56
57<meta property='og:image' content='/images/logo.png'>
58<meta property='og:image:width' content='1200'>
59<meta property='og:image:height' content='630'>
60<meta property='og:image:alt'
61    content='اكاديمية الفيصل العالمية'>
62
63<!-- Twitter Card -->
64<meta name='twitter:card' content='summary_large_image'>
65<meta name='twitter:title' content='Login'>
66<meta name='twitter:image' content='https://alfac.edu.sa/images/logo.png'>
67<meta name='twitter:site' content='@alfacacademy'>
68<meta name='twitter:creator' content='@alfacacademy'>
69<!-- Google Tag Manager -->
70<script>
vendor: 498 bytes, lines 70-84
70
71    (function(w, d, s, l, i) {
72        w[l] = w[l] || [];
73        w[l].push({
74            'gtm.start': new Date().getTime(),
75            event: 'gtm.js'
76        });
77        var f = d.getElementsByTagName(s)[0],
78            j = d.createElement(s),
79            dl = l != 'dataLayer' ? '&l=' + l : '';
80        j.async = true;
81        j.src =
82            'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
83        f.parentNode.insertBefore(j, f);
84    })(window, document, 'script', 'dataLayer', '
84GTM-TWWCLBH
vendor: 4 bytes, line 84
84');
85</script>
85
86<!-- End Google Tag Manager -->
87<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 87-88
87
88<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
88GTM-TWWCLBH
vendor: 91 bytes, lines 88-89
88" height="0" width="0"
89        style="display:none;visibility:hidden"></iframe></noscript>
90<!-- End Google Tag Manager (noscript) -->
91
92
93
94
95<script type='text/javascript'>
96(function(e,t,n){if(e.snaptr)return;var a=e.snaptr=function()
97{a.handleRequest?a.handleRequest.apply(a,arguments):a.queue.push(arguments)};
98a.queue=[];var s='script';r=t.createElement(s);r.async=!0;
99r.src=n;var u=t.getElementsByTagName(s)[0];
100u.parentNode.insertBefore(r,u);})(window,document,
101'https://sc-static.net/scevent.min.js');
102
103// 1. Initialize the Pixel
104snaptr('init', '778eb8a1-0e6a-4063-b840-c504a3425586', {
105  'user_email': ''
106});
107
108// 2. Fire Page View on every page load
109snaptr('track', 'PAGE_VIEW');
110
111// 3. URL-Based Tracking Logic
112document.addEventListener("DOMContentLoaded", function() {
113  var currentUrl = window.location.href;
114
115  // VIEW CONTENT: Triggers on single course/product pages
116  if (currentUrl.indexOf('/course/') !== -1) {
117    snaptr('track', 'VIEW_CONTENT');
118  }
119
120  // ADD TO CART: Triggers when they land on the main cart page
121  if (currentUrl.indexOf('/cart') !== -1 && currentUrl.indexOf('/payment/') === -1) {
122    snaptr('track', 'ADD_CART');
123  }
124
125  // PAY / PURCHASE: Triggers when they hit the payment confirmation/order step
126  if (currentUrl.indexOf('/cart/payment/') !== -1) {
127    snaptr('track', 'PURCHASE', {
128      'currency': 'SAR', // Set to Saudi Riyal based on your domain
129      'price': 0.00      
130    });
131  }
132
133  // LOGIN: (Optional) Triggers if the URL contains dashboard or account
134  if (currentUrl.indexOf('/dashboard') !== -1 || currentUrl.indexOf('/profile') !== -1) {
135    snaptr('track', 'LOGIN');
136  }
137
138});
139</script>
139
140    <title>
141        Login | اكاديمية الفيصل العالمية
142    </title>
143
144    <!-- Google Fonts - Optimized -->
145    <link rel="preconnect" href="https://fonts.googleapis.com">
146    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
147    <link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700&display=swap" rel="stylesheet">
148
149    <!-- General CSS File -->
150    <link rel="stylesheet" href="/assets/default/vendors/sweetalert2/dist/sweetalert2.min.css">
151    <link rel="stylesheet" href="/assets/default/vendors/toast/jquery.toast.min.css">
152    <link rel="stylesheet" href="/assets/default/vendors/simplebar/simplebar.css">
153    <link rel="stylesheet" href="/assets/default/css/app.css">
154    <link rel="stylesheet" href="/assets/default/css/mobile-cart-notifications.css">
155
156    
157    <link rel="stylesheet" href="/assets/default/css/modern-ui.css">
158    <link rel="stylesheet" href="/assets/default/css/performance-boost.css">
159    <link rel="stylesheet" href="/assets/default/css/navbar-fixes.css">
160    <link rel="stylesheet" href="/assets/default/css/af-cards.css">
161
162    
163            <link rel="stylesheet" href="/assets/default/css/rtl-app.css">
164    
165        <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
166    
167    <style>
168         @font-face {
169                      font-family: 'main-font-family';
170                      font-style: normal;
171                      font-weight: 400;
172                      font-display: swap;
173                      src: url(/store/1/fonts/kufi/NotoKufiArabic-Regular.woff2) format('woff2');
174                    }@font-face {
175                      font-family: 'main-font-family';
176                      font-style: normal;
177                      font-weight: bold;
178                      font-display: swap;
179                      src: url(/store/1/fonts/kufi/NotoKufiArabic-Bold.woff2) format('woff2');
180                    }@font-face {
181                      font-family: 'main-font-family';
182                      font-style: normal;
183                      font-weight: 500;
184                      font-display: swap;
185                      src: url(/store/1/fonts/kufi/NotoKufiArabic-Regular.woff2) format('woff2');
186                    }@font-face {
187                      font-family: 'rtl-font-family';
188                      font-style: normal;
189                      font-weight: 400;
190                      font-display: swap;
191                      src: url(/store/1/fonts/kufi/NotoKufiArabic-Regular.woff2) format('woff2');
192                    }@font-face {
193                      font-family: 'rtl-font-family';
194                      font-style: normal;
195                      font-weight: bold;
196                      font-display: swap;
197                      src: url(/store/1/fonts/kufi/NotoKufiArabic-Bold.woff2) format('woff2');
198                    }@font-face {
199                      font-family: 'rtl-font-family';
200                      font-style: normal;
201                      font-weight: 500;
202                      font-display: swap;
203                      src: url(/store/1/fonts/kufi/NotoKufiArabic-Regular.woff2) format('woff2');
204                    } :root{
205--primary:#112569;
206--primary-border:#7d8496;
207}
208
209
210        /* Modern Login Modal Styles */
211        .modern-login-modal {
212            border: none;
213            border-radius: 20px;
214            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
215            overflow: hidden;
216            position: relative;
217            backdrop-filter: blur(10px);
218        }
219
220        .modal-bg-pattern {
221            position: absolute;
222            top: 0;
223            left: 0;
224            right: 0;
225            height: 120px;
226            background: linear-gradient(135deg, #1E3A8A 0%, #1E293B 50%, #05b17d 100%);
227            opacity: 0.1;
228            z-index: 1;
229        }
230
231        .modal-bg-pattern::before {
232            content: '';
233            position: absolute;
234            top: 0;
235            left: 0;
236            right: 0;
237            bottom: 0;
238            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
239        }
240
241        .modern-header {
242            background: linear-gradient(135deg, #1E3A8A 0%, #1E293B 100%);
243            color: white;
244            text-align: center;
245            padding: 2rem 2rem 1.5rem;
246            border: none;
247            position: relative;
248            z-index: 2;
249        }
250
251        .login-icon {
252            width: 60px;
253            height: 60px;
254            background: rgba(255, 255, 255, 0.2);
255            border-radius: 50%;
256            display: flex;
257            align-items: center;
258            justify-content: center;
259            margin: 0 auto 1rem;
260            font-size: 1.5rem;
261            backdrop-filter: blur(10px);
262        }
263
264        .modern-header .modal-title {
265            font-size: 1.5rem;
266            font-weight: 700;
267            margin: 0 0 0.5rem;
268            color: white;
269        }
270
271        .modal-subtitle {
272            font-size: 0.9rem;
273            opacity: 0.9;
274            margin: 0;
275            font-weight: 400;
276        }
277
278        .modern-close {
279            position: absolute;
280            top: 15px;
281            left: 15px;
282            background: rgba(255, 255, 255, 0.2);
283            border-radius: 50%;
284            width: 35px;
285            height: 35px;
286            display: flex;
287            align-items: center;
288            justify-content: center;
289            backdrop-filter: blur(10px);
290            transition: all 0.3s ease;
291        }
292
293        .modern-close:hover {
294            background: rgba(255, 255, 255, 0.3);
295            transform: rotate(90deg);
296        }
297
298        .modern-body {
299            padding: 2rem;
300            background: white;
301            position: relative;
302            z-index: 2;
303        }
304
305        .social-login-section {
306            margin-bottom: 2rem;
307        }
308
309        .google-login-btn {
310            display: flex;
311            align-items: center;
312            justify-content: center;
313            gap: 12px;
314            width: 100%;
315            padding: 12px 20px;
316            background: #fff;
317            border: 2px solid #e0e0e0;
318            border-radius: 12px;
319            text-decoration: none;
320            color: #333;
321            font-weight: 600;
322            transition: all 0.3s ease;
323            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
324        }
325
326        .google-login-btn:hover {
327            border-color: #4285f4;
328            box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
329            transform: translateY(-2px);
330            color: #333;
331            text-decoration: none;
332        }
333
334        .google-icon {
335            display: flex;
336            align-items: center;
337            justify-content: center;
338        }
339
340        .divider-section {
341            display: flex;
342            align-items: center;
343            margin: 2rem 0;
344            gap: 15px;
345        }
346
347        .divider-line {
348            flex: 1;
349            height: 1px;
350            background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
351        }
352
353        .divider-text {
354            font-size: 0.85rem;
355            color: #666;
356            white-space: nowrap;
357        }
358
359        .login-form,
360        .otp-form {
361            position: relative;
362        }
363
364        .form-group {
365            margin-bottom: 1.5rem;
366        }
367
368        .form-label {
369            display: flex;
370            align-items: center;
371            gap: 8px;
372            font-weight: 600;
373            margin-bottom: 0.5rem;
374            color: #333;
375            font-size: 0.9rem;
376        }
377
378        .form-icon {
379            color: #1E3A8A;
380            font-size: 0.9rem;
381        }
382
383        .modern-input,
384        .otp-input {
385            width: 100%;
386            padding: 12px 16px;
387            border: 2px solid #e8e8e8;
388            border-radius: 12px;
389            font-size: 1rem;
390            transition: all 0.3s ease;
391            background: #fafafa;
392        }
393
394        .modern-input:focus,
395        .otp-input:focus {
396            border-color: #1E3A8A;
397            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
398            background: white;
399            outline: none;
400        }
401
402        .otp-input {
403            text-align: center;
404            font-weight: 700;
405            font-size: 1.2rem;
406            letter-spacing: 0.3em;
407            background: #f8f9ff;
408        }
409
410        .modern-submit-btn {
411            width: 100%;
412            padding: 14px 20px;
413            border: none;
414            border-radius: 12px;
415            background: linear-gradient(135deg, #1E3A8A 0%, #1E293B 100%);
416            color: white;
417            font-weight: 600;
418            font-size: 1rem;
419            cursor: pointer;
420            position: relative;
421            overflow: hidden;
422            transition: all 0.3s ease;
423            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
424        }
425
426        .modern-submit-btn:hover {
427            transform: translateY(-2px);
428            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
429        }
430
431        .modern-submit-btn:disabled {
432            opacity: 0.7;
433            cursor: not-allowed;
434            transform: none;
435        }
436
437        .btn-content {
438            display: flex;
439            align-items: center;
440            justify-content: center;
441            gap: 8px;
442            transition: opacity 0.3s ease;
443        }
444
445        .btn-loader {
446            position: absolute;
447            top: 50%;
448            left: 50%;
449            transform: translate(-50%, -50%);
450            opacity: 0;
451            transition: opacity 0.3s ease;
452        }
453
454        .modern-submit-btn.loading .btn-content {
455            opacity: 0;
456        }
457
458        .modern-submit-btn.loading .btn-loader {
459            opacity: 1;
460        }
461
462        .loader-spinner {
463            width: 20px;
464            height: 20px;
465            border: 2px solid rgba(255, 255, 255, 0.3);
466            border-radius: 50%;
467            border-top: 2px solid white;
468            animation: spin 1s linear infinite;
469        }
470
471        @keyframes spin {
472            0% {
473                transform: rotate(0deg);
474            }
475
476            100% {
477                transform: rotate(360deg);
478            }
479        }
480
481        .verify-btn {
482            background: linear-gradient(135deg, #05b17d 0%, #0ac593 100%);
483            box-shadow: 0 4px 15px rgba(5, 177, 125, 0.3);
484        }
485
486        .verify-btn:hover {
487            box-shadow: 0 6px 20px rgba(5, 177, 125, 0.4);
488        }
489
490        .otp-timer {
491            display: flex;
492            align-items: center;
493            justify-content: center;
494            gap: 8px;
495            margin-bottom: 1.5rem;
496            padding: 12px;
497            background: linear-gradient(135deg, #fff3cd, #ffeaa7);
498            border-radius: 10px;
499            color: #856404;
500            font-size: 0.9rem;
501        }
502
503        .timer-icon {
504            color: #f39c12;
505        }
506
507        .countdown-timer {
508            font-weight: 700;
509            font-family: 'Courier New', monospace;
510        }
511
512        .resend-section {
513            text-align: center;
514            margin-top: 1.5rem;
515        }
516
517        .resend-btn {
518            background: none;
519            border: none;
520            color: #1E3A8A;
521            font-weight: 600;
522            cursor: pointer;
523            padding: 8px 16px;
524            border-radius: 8px;
525            transition: all 0.3s ease;
526            font-size: 0.9rem;
527        }
528
529        .resend-btn:hover {
530            background: rgba(102, 126, 234, 0.1);
531            transform: translateY(-1px);
532        }
533
534        .message-box {
535            margin: 1rem 0;
536            padding: 12px 16px;
537            border-radius: 10px;
538            text-align: center;
539            font-weight: 600;
540            opacity: 0;
541            transform: translateY(10px);
542            transition: all 0.3s ease;
543        }
544
545        .message-box.show {
546            opacity: 1;
547            transform: translateY(0);
548        }
549
550        .message-box.success {
551            background: linear-gradient(135deg, #d4edda, #c3e6cb);
552            color: #155724;
553            border: 1px solid #c3e6cb;
554        }
555
556        .message-box.error {
557            background: linear-gradient(135deg, #f8d7da, #f5c6cb);
558            color: #721c24;
559            border: 1px solid #f5c6cb;
560        }
561
562        .register-section {
563            text-align: center;
564            margin-top: 2rem;
565            padding-top: 1.5rem;
566            border-top: 1px solid #e8e8e8;
567        }
568
569        .register-text {
570            margin: 0;
571            color: #666;
572            font-size: 0.9rem;
573        }
574
575        .register-link {
576            color: #1E3A8A;
577            text-decoration: none;
578            font-weight: 600;
579            transition: all 0.3s ease;
580        }
581
582        .register-link:hover {
583            color: #1E293B;
584            text-decoration: underline;
585        }
586
587        /* Mobile Responsive */
588        @media (max-width: 576px) {
589            .modern-login-modal {
590                margin: 1rem;
591            }
592
593            .modern-header {
594                padding: 1.5rem 1rem 1rem;
595            }
596
597            .modern-body {
598                padding: 1.5rem;
599            }
600
601            .login-icon {
602                width: 50px;
603                height: 50px;
604                font-size: 1.2rem;
605            }
606
607            .modern-header .modal-title {
608                font-size: 1.3rem;
609            }
610        }
611
612        /* Animation for modal entrance */
613        .modal.fade .modal-dialog {
614            transform: scale(0.8) translateY(-50px);
615            transition: all 0.3s ease;
616        }
617
618        .modal.show .modal-dialog {
619            transform: scale(1) translateY(0);
620        }
621    </style>
622
623
624    
625    
626
627    <!-- Google Tag Manager -->
628    
628<script>
vendor: 343 bytes, lines 628-632
628(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
629    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
630    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
631    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
632    })(window,document,'script','dataLayer','
632GTM-T9RCNNXK
vendor: 3 bytes, line 632
632');
632</script>
632
633    <!-- End Google Tag Manager -->
634
635    <!-- LinkedIn Insight Tag Start -->
636    
636<script type="text/javascript">
637    _linkedin_partner_id = "10068121";
638    window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
639    window._linkedin_data_partner_ids.push(_linkedin_partner_id);
640    </script>
640
641    
641<script type="text/javascript">
642    (function(l) {
643    if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
644    window.lintrk.q=[]}
645    var s = document.getElementsByTagName("script")[0];
646    var b = document.createElement("script");
647    b.type = "text/javascript";b.async = true;
648    b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
649    s.parentNode.insertBefore(b, s);})(window.lintrk);
650    </script>
650
651    <noscript>
652    <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=10068121&fmt=gif" />
653    </noscript>
654    <!-- LinkedIn Insight Tag End -->
655
656    <!-- TikTok Pixel Code Start -->
657    
657<script>
658    !function (w, d, t) {
659      w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(
660    var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js",o=n&&n.partner;ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script")
661    ;n.type="text/javascript",n.async=!0,n.src=r+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};
662
663      ttq.load('D7PGNJJC77U2TFGF22I0');
664      ttq.page();
665    }(window, document, 'ttq');
666    </script>
666
667    <!-- TikTok Pixel Code End -->
668</head>
669
670<body class=" rtl ">
671<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 671-672
671
672<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
672GTM-T9RCNNXK
vendor: 83 bytes, lines 672-673
672"
673height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
674<!-- End Google Tag Manager (noscript) -->
675
676    <div id="app"
677        class="">
678        
679                    <!-- ═══════════════════════════════════════════════════════════
680     ✨ MODERN CLEAN TOP NAVBAR - FAISAL ACADEMY
681     ═══════════════════════════════════════════════════════════ -->
682<div class="faisal-top-nav">
683    <div class="container-fluid">
684        <div class="top-nav-container">
685
686            
687            <div class="top-nav-section left-section">
688                
689                
690                            </div>
691
692            
693            <div class="top-nav-section center-section">
694
695                
696                <form action="/search" method="get" class="top-search-bar">
697                    <div class="search-input-wrapper-large">
698                        <svg class="search-icon" width="20" height="20" fill="none" stroke="currentColor"
699                            viewBox="0 0 24 24">
700                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
701                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
702                        </svg>
703                        <input type="text" name="search" placeholder="ابحث عن الدورات والمدربين..."
704                            class="search-field-large" autocomplete="off">
705                    </div>
706                </form>
707
708            </div>
709
710            
711            <div class="top-nav-section left-section-actions">
712
713                
714                <!-- Shopping Cart - Click to go to cart page -->
715<div class="dropdown">
716    <a href="/cart" class="btn btn-transparent cart-btn" title="عرض سلة التسوق">
717        <i data-feather="shopping-cart" width="20" height="20" class="mr-10"></i>
718
719            </a>
720
721    <div class="dropdown-menu" aria-labelledby="navbarShopingCart" style="display: none;">
722        <div class="d-md-none border-bottom mb-20 pb-10 text-right">
723            <i class="close-dropdown" data-feather="x" width="32" height="32" class="mr-10"></i>
724        </div>
725        <div class="h-100">
726            <div class="navbar-shopping-cart h-100" data-simplebar>
727                                    <div class="d-flex align-items-center text-center py-50">
728                        <i data-feather="shopping-cart" width="20" height="20" class="mr-10"></i>
729                        <span class="">عربتك فارغة</span>
730                    </div>
731                            </div>
732        </div>
733    </div>
734</div>
735
736<style>
737    /* Simple Shopping Cart Button */
738    .cart-btn {
739        position: relative;
740        min-width: 44px;
741        min-height: 44px;
742        display: flex;
743        align-items: center;
744        justify-content: center;
745        border-radius: 12px;
746        transition: all 0.3s ease;
747    }
748
749    .cart-btn:hover {
750        background: #f0f9f6 !important;
751        transform: translateY(-2px);
752        text-decoration: none;
753    }
754
755    .cart-btn .badge {
756        position: absolute;
757        top: -5px;
758        right: -5px;
759        min-width: 20px;
760        height: 20px;
761        font-size: 11px;
762        font-weight: 700;
763    }
764
765    /* Touch-friendly on mobile */
766    @media (hover: none) and (pointer: coarse) {
767        .cart-btn {
768            -webkit-tap-highlight-color: transparent;
769        }
770
771        .cart-btn:active {
772            transform: scale(0.95);
773        }
774    }
775</style>
776
777                
778                
779
780                
781                <div class="d-flex align-items-center ml-md-50">
782        <a href="/login" class="py-5 px-10 mr-10 text-dark-blue font-14">تسجيل الدخول</a>
783        
784    </div>
785
786                
787                                    <a href="/login" class="primary-cta-btn">
788                        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
789                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
790                                d="M13 10V3L4 14h7v7l9-11h-7z" />
791                        </svg>
792                        <span class="btn-text">إبدء التعلم </span>
793                    </a>
794                
795            </div>
796
797            
798            <div class="top-nav-section right-section-minimal">
799
800                
801                
802                
803
804            </div>
805
806        </div>
807    </div>
808</div>
809
810<style>
811    /* ═══════════════════════════════════════════════════════════
812   🎨 MODERN TOP NAVBAR STYLES - FAISAL ACADEMY
813   ═══════════════════════════════════════════════════════════ */
814
815    :root {
816        --top-nav-bg: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
817        --top-nav-border: #e8e8e8;
818        --primary-color: #05b17d;
819        --primary-hover: #048a66;
820        --text-primary: #2c3e50;
821        --text-secondary: #5a6c7d;
822        --text-muted: #a0aec0;
823        --white: #ffffff;
824        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
825    }
826
827    /* ═══ Main Container ═══ */
828    .faisal-top-nav {
829        background: var(--top-nav-bg);
830        border-bottom: 1px solid var(--top-nav-border);
831        padding: 12px 0;
832        font-family: 'Noto Kufi Arabic', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
833        position: sticky;
834        top: 0;
835        /* No z-index here on purpose: with position:sticky + z-index:auto this
836           bar does NOT create its own stacking context, so the account
837           dropdown below (which sets a very high z-index) can still escape
838           above .faisal-navbar (z-index: 999999) instead of being capped by
839           a local context here. */
840    }
841
842    /* The user account dropdown overflows below this bar into the main
843       navbar row underneath it. Force it above that row (z-index: 999999)
844       without changing the stacking of the bar itself, so the sticky
845       scroll-stacking behavior between the two bars is unaffected. */
846    .navbar-auth-user-dropdown .custom-dropdown-body {
847        z-index: 1000001 !important;
848    }
849
850    /* When scrolled, make it more prominent */
851    body.scrolled .faisal-top-nav {
852        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
853        padding: 8px 0;
854    }
855
856    .faisal-top-nav .container-fluid {
857        max-width: 1400px;
858        margin: 0 auto;
859        padding: 0 2rem;
860    }
861
862    .top-nav-container {
863        display: grid;
864        grid-template-columns: minmax(180px, 0.8fr) minmax(400px, 2.5fr) minmax(200px, 1fr);
865        align-items: center;
866        gap: 1.5rem;
867    }
868
869    /* ═══ Section Layouts ═══ */
870    .top-nav-section {
871        display: flex;
872        align-items: center;
873        gap: 1rem;
874    }
875
876    .left-section {
877        justify-content: flex-start;
878    }
879
880    .center-section {
881        justify-content: center;
882        gap: 1.5rem;
883    }
884
885    .left-section-actions {
886        justify-content: flex-start;
887        gap: 0.75rem;
888    }
889
890    .right-section-minimal {
891        justify-content: flex-end;
892        gap: 0.75rem;
893    }
894
895    /* ═══════════════════════════════════════════════════════════
896   📞 CONTACT INFORMATION
897   ═══════════════════════════════════════════════════════════ */
898
899    .contact-info-group {
900        display: flex;
901        align-items: center;
902        gap: 0.75rem;
903    }
904
905    .contact-info-item {
906        display: flex;
907        align-items: center;
908        gap: 0.5rem;
909        padding: 7px 14px;
910        background: var(--white);
911        border: 1px solid #e8e8e8;
912        border-radius: 10px;
913        color: var(--text-secondary);
914        text-decoration: none;
915        font-size: 13px;
916        font-weight: 500;
917        transition: var(--transition);
918    }
919
920    .contact-info-item:hover {
921        background: #f0f9f6;
922        border-color: var(--primary-color);
923        color: var(--primary-color);
924        transform: translateY(-2px);
925        box-shadow: 0 4px 12px rgba(5, 177, 125, 0.15);
926    }
927
928    .contact-info-item .icon {
929        flex-shrink: 0;
930    }
931
932    .contact-text {
933        white-space: nowrap;
934    }
935
936    /* Social Links */
937    .social-links-group {
938        display: flex;
939        align-items: center;
940        gap: 0.5rem;
941    }
942
943    .social-link {
944        display: flex;
945        align-items: center;
946        justify-content: center;
947        width: 32px;
948        height: 32px;
949        background: var(--white);
950        border: 1px solid #e8e8e8;
951        border-radius: 8px;
952        color: var(--text-secondary);
953        text-decoration: none;
954        font-size: 14px;
955        transition: var(--transition);
956    }
957
958    .social-link:hover {
959        background: var(--primary-color);
960        border-color: var(--primary-color);
961        color: var(--white);
962        transform: translateY(-2px);
963    }
964
965    /* ═══════════════════════════════════════════════════════════
966   🔍 SEARCH BAR (LARGER, NO GREEN BUTTON)
967   ═══════════════════════════════════════════════════════════ */
968
969    .top-search-bar {
970        width: 100%;
971        max-width: 600px;
972        flex: 1;
973    }
974
975    .search-input-wrapper-large {
976        display: flex;
977        align-items: center;
978        background: var(--white);
979        border: 2px solid #e8e8e8;
980        border-radius: 16px;
981        overflow: hidden;
982        transition: var(--transition);
983        height: 52px;
984    }
985
986    .search-input-wrapper-large:focus-within {
987        border-color: var(--primary-color);
988        box-shadow: 0 0 0 4px rgba(5, 177, 125, 0.1);
989    }
990
991    .search-icon {
992        margin: 0 15px;
993        color: var(--text-muted);
994        flex-shrink: 0;
995    }
996
997    .search-field-large {
998        flex: 1;
999        border: none;
1000        padding: 0 15px;
1001        font-size: 15px;
1002        font-weight: 500;
1003        color: var(--text-primary);
1004        background: transparent;
1005        outline: none;
1006    }
1007
1008    .search-field-large::placeholder {
1009        color: var(--text-muted);
1010        font-weight: 400;
1011    }
1012
1013    /* ═══════════════════════════════════════════════════════════
1014   🌐 LANGUAGE & CURRENCY
1015   ═══════════════════════════════════════════════════════════ */
1016
1017    .language-switcher-wrapper {
1018        position: relative;
1019    }
1020
1021    .language-switcher-form {
1022        display: flex;
1023        align-items: center;
1024    }
1025
1026    .language-dropdown {
1027        background: var(--white);
1028        border: 1px solid #e8e8e8;
1029        border-radius: 10px;
1030        padding: 6px 12px;
1031        transition: var(--transition);
1032        cursor: pointer;
1033    }
1034
1035    .language-dropdown:hover {
1036        border-color: var(--primary-color);
1037        box-shadow: 0 2px 8px rgba(5, 177, 125, 0.1);
1038    }
1039
1040    /* ═══════════════════════════════════════════════════════════
1041   🎯 PRIMARY CTA BUTTON
1042   ═══════════════════════════════════════════════════════════ */
1043
1044    .primary-cta-btn {
1045        display: inline-flex;
1046        align-items: center;
1047        justify-content: center;
1048        gap: 0.5rem;
1049        background: linear-gradient(135deg, var(--primary-color) 0%, #0ac593 100%);
1050        color: var(--white) !important;
1051        padding: 11px 24px;
1052        border-radius: 12px;
1053        font-size: 14px;
1054        font-weight: 700;
1055        text-decoration: none;
1056        text-align: center;
1057        transition: var(--transition);
1058        box-shadow: 0 4px 12px rgba(5, 177, 125, 0.25);
1059        white-space: nowrap;
1060        position: relative;
1061        overflow: hidden;
1062    }
1063
1064    .primary-cta-btn::before {
1065        content: '';
1066        position: absolute;
1067        top: 0;
1068        left: -100%;
1069        width: 100%;
1070        height: 100%;
1071        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
1072        transition: left 0.5s;
1073    }
1074
1075    .primary-cta-btn:hover::before {
1076        left: 100%;
1077    }
1078
1079    .primary-cta-btn:hover {
1080        transform: translateY(-3px);
1081        box-shadow: 0 6px 20px rgba(5, 177, 125, 0.35);
1082    }
1083
1084    .primary-cta-btn svg {
1085        flex-shrink: 0;
1086        animation: pulseIcon 2s ease-in-out infinite;
1087    }
1088
1089    @keyframes pulseIcon {
1090
1091        0%,
1092        100% {
1093            transform: scale(1);
1094        }
1095
1096        50% {
1097            transform: scale(1.1);
1098        }
1099    }
1100
1101    /* ═══════════════════════════════════════════════════════════
1102   📱 RESPONSIVE DESIGN
1103   ═══════════════════════════════════════════════════════════ */
1104
1105    /* Large Desktop */
1106    @media (max-width: 1400px) {
1107        .top-nav-container {
1108            gap: 1rem;
1109        }
1110    }
1111
1112    /* Desktop */
1113    @media (max-width: 1200px) {
1114        .top-nav-container {
1115            grid-template-columns: minmax(150px, 1fr) minmax(250px, 2fr) minmax(150px, 1fr);
1116        }
1117
1118        .contact-text {
1119            display: none;
1120        }
1121
1122        .btn-text {
1123            display: none;
1124        }
1125
1126        .top-search-bar {
1127            max-width: 400px;
1128        }
1129    }
1130
1131    /* Tablet */
1132    @media (max-width: 991px) {
1133        .faisal-top-nav {
1134            padding: 10px 0;
1135        }
1136
1137        .faisal-top-nav .container-fluid {
1138            padding: 0 1rem;
1139        }
1140
1141        .top-nav-container {
1142            grid-template-columns: auto 1fr auto;
1143            gap: 0.75rem;
1144        }
1145
1146        .left-section {
1147            order: 1;
1148        }
1149
1150        .center-section {
1151            order: 3;
1152            grid-column: 1 / -1;
1153        }
1154
1155        .right-section {
1156            order: 2;
1157        }
1158
1159        .social-links-group {
1160            display: none;
1161        }
1162
1163        .top-search-bar {
1164            max-width: 100%;
1165        }
1166
1167        .search-input-wrapper {
1168            height: 42px;
1169        }
1170    }
1171
1172    /* Mobile */
1173    @media (max-width: 768px) {
1174        .faisal-top-nav .container-fluid {
1175            padding: 0 0.75rem;
1176        }
1177
1178        .contact-info-group {
1179            display: none;
1180        }
1181
1182        .language-switcher-wrapper {
1183            display: none;
1184        }
1185
1186        .search-submit-btn {
1187            padding: 0 16px;
1188            font-size: 13px;
1189        }
1190
1191        .primary-cta-btn {
1192            padding: 10px 16px;
1193            font-size: 13px;
1194        }
1195    }
1196
1197    /* Small Mobile */
1198    @media (max-width: 576px) {
1199        .faisal-top-nav {
1200            padding: 8px 0;
1201        }
1202
1203        .top-nav-container {
1204            gap: 0.5rem;
1205        }
1206
1207        .search-input-wrapper {
1208            height: 38px;
1209        }
1210
1211        .search-field {
1212            font-size: 13px;
1213        }
1214
1215        .search-submit-btn {
1216            padding: 0 12px;
1217            font-size: 12px;
1218        }
1219
1220        .primary-cta-btn {
1221            padding: 8px 12px;
1222        }
1223    }
1224
1225    /* ═══════════════════════════════════════════════════════════
1226   ✨ ANIMATIONS & EFFECTS
1227   ═══════════════════════════════════════════════════════════ */
1228
1229    /* Smooth scroll */
1230    html {
1231        scroll-behavior: smooth;
1232    }
1233
1234    /* Remove tap highlight on mobile */
1235    * {
1236        -webkit-tap-highlight-color: transparent;
1237    }
1238
1239    /* Fade in animation */
1240    .faisal-top-nav {
1241        animation: fadeInDown 0.5s ease-out;
1242    }
1243
1244    @keyframes fadeInDown {
1245        from {
1246            opacity: 0;
1247            transform: translateY(-10px);
1248        }
1249
1250        to {
1251            opacity: 1;
1252            transform: translateY(0);
1253        }
1254    }
1255
1256    /* Loading state */
1257    .search-field:disabled {
1258        opacity: 0.6;
1259        cursor: not-allowed;
1260    }
1261
1262    /* Focus visible for accessibility */
1263    *:focus-visible {
1264        outline: 2px solid var(--primary-color);
1265        outline-offset: 2px;
1266    }
1267
1268    /* Print styles */
1269    @media print {
1270        .faisal-top-nav {
1271            display: none;
1272        }
1273    }
1274</style>
1275
1276            <div id="navbarVacuum"></div>
1277
1278<!-- ✨ MODERN CLEAN NAVBAR ✨ -->
1279<nav id="navbar" class="faisal-navbar">
1280    <!-- Main Menu with Logo -->
1281    <div class="navbar-main-level">
1282        <div class="container-fluid">
1283            <div class="navbar-wrapper">
1284
1285                <!-- Logo Section -->
1286                <div class="navbar-brand-section">
1287                    <a href="/" class="brand-link">
1288                        <img src="/images/short_logo.png" class="brand-logo" alt="ALFAC">
1289                    </a>
1290
1291                </div>
1292
1293                <!-- Desktop Menu (Centered) -->
1294            <div class="navbar-menu-desktop">
1295                <ul class="nav-links">
1296                                                                        
1297                                                            <!-- Regular Item -->
1298                                <li class="nav-item">
1299                                    <a href="/"
1300                                        class="nav-link">الصفحة الرئيسية</a>
1301                                </li>
1302                                                                                
1303                                                            <!-- Custom Dropdown Item -->
1304                                <li class="nav-item has-dropdown">
1305                                    <a href="/classes?sort=newest" class="nav-link">
1306                                        الدورات
1307                                        <svg class="dropdown-icon" width="16" height="16" fill="none"
1308                                            stroke="currentColor" viewBox="0 0 24 24">
1309                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
1310                                                d="M19 9l-7 7-7-7" />
1311                                        </svg>
1312                                    </a>
1313                                    <ul class="dropdown-menu">
1314                                                                                    <li><a href="/classes?sort=english"
1315                                                    class="dropdown-link">اللغة الإنجليزية</a></li>
1316                                                                                    <li><a href="/classes?sort=comp"
1317                                                    class="dropdown-link">الحاسب الآلي</a></li>
1318                                                                                    <li><a href="/classes?sort=pmp"
1319                                                    class="dropdown-link">التدريب الإداري</a></li>
1320                                                                            </ul>
1321                                </li>
1322                                                                                
1323                                                            <!-- Regular Item -->
1324                                <li class="nav-item">
1325                                    <a href="categories/الشهادات-المهنية-الاحترافية"
1326                                        class="nav-link">الشهادات الاحترافية</a>
1327                                </li>
1328                                                                                
1329                                                            <!-- Custom Dropdown Item -->
1330                                <li class="nav-item has-dropdown">
1331                                    <a href="categories/برنامج-الدبلوم" class="nav-link">
1332                                        الدبلومات
1333                                        <svg class="dropdown-icon" width="16" height="16" fill="none"
1334                                            stroke="currentColor" viewBox="0 0 24 24">
1335                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
1336                                                d="M19 9l-7 7-7-7" />
1337                                        </svg>
1338                                    </a>
1339                                    <ul class="dropdown-menu">
1340                                                                                    <li><a href="/classes?sort=dip_it"
1341                                                    class="dropdown-link">دبلومات اللغة الانجليزية </a></li>
1342                                                                                    <li><a href="/classes?sort=dip_it"
1343                                                    class="dropdown-link">دبلومات تقنية </a></li>
1344                                                                                    <li><a href="/classes?sort=dip_it"
1345                                                    class="dropdown-link">دبلومات ادارية </a></li>
1346                                                                            </ul>
1347                                </li>
1348                                                                                
1349                                                            <!-- Regular Item -->
1350                                <li class="nav-item">
1351                                    <a href="classes?sort=exams"
1352                                        class="nav-link">الاختبارات  الدولية</a>
1353                                </li>
1354                                                                                
1355                                                            <!-- Regular Item -->
1356                                <li class="nav-item">
1357                                    <a href="/about"
1358                                        class="nav-link">عن الأكاديمية</a>
1359                                </li>
1360                                                                                        </ul>
1361            </div>
1362
1363            <!-- Mobile Menu Toggle -->
1364            <button class="mobile-menu-btn" id="mobileMenuToggle" aria-label="Toggle menu">
1365                <span class="hamburger-line"></span>
1366                <span class="hamburger-line"></span>
1367                <span class="hamburger-line"></span>
1368            </button>
1369
1370            </div>
1371        </div>
1372    </div>
1373</nav>
1374
1375<!-- Mobile Menu Overlay -->
1376<div class="mobile-menu-overlay" id="mobileOverlay"></div>
1377
1378<!-- Mobile Menu Drawer -->
1379<div class="mobile-menu-drawer" id="mobileDrawer">
1380    <div class="mobile-drawer-header">
1381        <div class="mobile-logo-section">
1382                            <img src="/store/1/alfac/alfacLOGO.png" class="mobile-logo" alt="Logo">
1383                    </div>
1384        <button class="mobile-close-btn" id="mobileCloseBtn" aria-label="Close menu">
1385            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1386                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
1387            </svg>
1388        </button>
1389    </div>
1390
1391    <nav class="mobile-nav">
1392        <ul class="mobile-nav-list">
1393                                                
1394                                            <!-- Mobile Regular Item -->
1395                        <li class="mobile-nav-item">
1396                            <a href="/"
1397                                class="mobile-nav-link">الصفحة الرئيسية</a>
1398                        </li>
1399                                                        
1400                                            <!-- Mobile Custom Dropdown -->
1401                        <li class="mobile-nav-item has-children">
1402                            <div class="mobile-nav-parent">
1403                                <a href="/classes?sort=newest"
1404                                    class="mobile-nav-link">الدورات</a>
1405                                <button class="mobile-dropdown-toggle" aria-label="Toggle submenu">
1406                                    <svg width="20" height="20" fill="none" stroke="currentColor"
1407                                        viewBox="0 0 24 24">
1408                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
1409                                            d="M19 9l-7 7-7-7" />
1410                                    </svg>
1411                                </button>
1412                            </div>
1413                            <ul class="mobile-submenu">
1414                                                                    <li><a href="/classes?sort=english"
1415                                            class="mobile-submenu-link">اللغة الإنجليزية</a></li>
1416                                                                    <li><a href="/classes?sort=comp"
1417                                            class="mobile-submenu-link">الحاسب الآلي</a></li>
1418                                                                    <li><a href="/classes?sort=pmp"
1419                                            class="mobile-submenu-link">التدريب الإداري</a></li>
1420                                                            </ul>
1421                        </li>
1422                                                        
1423                                            <!-- Mobile Regular Item -->
1424                        <li class="mobile-nav-item">
1425                            <a href="categories/الشهادات-المهنية-الاحترافية"
1426                                class="mobile-nav-link">الشهادات الاحترافية</a>
1427                        </li>
1428                                                        
1429                                            <!-- Mobile Custom Dropdown -->
1430                        <li class="mobile-nav-item has-children">
1431                            <div class="mobile-nav-parent">
1432                                <a href="categories/برنامج-الدبلوم"
1433                                    class="mobile-nav-link">الدبلومات</a>
1434                                <button class="mobile-dropdown-toggle" aria-label="Toggle submenu">
1435                                    <svg width="20" height="20" fill="none" stroke="currentColor"
1436                                        viewBox="0 0 24 24">
1437                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
1438                                            d="M19 9l-7 7-7-7" />
1439                                    </svg>
1440                                </button>
1441                            </div>
1442                            <ul class="mobile-submenu">
1443                                                                    <li><a href="/classes?sort=dip_it"
1444                                            class="mobile-submenu-link">الدبلومات التقنية</a></li>
1445                                                            </ul>
1446                        </li>
1447                                                        
1448                                            <!-- Mobile Regular Item -->
1449                        <li class="mobile-nav-item">
1450                            <a href="classes?sort=exams"
1451                                class="mobile-nav-link">الاختبارات  الدولية</a>
1452                        </li>
1453                                                        
1454                                            <!-- Mobile Regular Item -->
1455                        <li class="mobile-nav-item">
1456                            <a href="/about"
1457                                class="mobile-nav-link">عن الأكاديمية</a>
1458                        </li>
1459                                                        </ul>
1460    </nav>
1461</div>
1462
1463<style>
1464    /* ═══════════════════════════════════════════════════════════
1465   💎 PREMIUM NAVBAR - WORLD-CLASS DESIGN
1466   ═══════════════════════════════════════════════════════════ */
1467
1468    /* Main Navbar */
1469    .faisal-navbar {
1470        background: rgba(255, 255, 255, 0.98);
1471        backdrop-filter: blur(20px);
1472        box-shadow:
1473            0 4px 6px -1px rgba(0, 0, 0, 0.05),
1474            0 2px 4px -1px rgba(0, 0, 0, 0.03),
1475            0 0 0 1px rgba(0, 102, 255, 0.05);
1476        padding: 0;
1477        position: sticky;
1478        top: 0;
1479        z-index: 999999;
1480        font-family: 'Cairo', 'Inter', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
1481        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
1482    }
1483
1484    .faisal-navbar::after {
1485        content: '';
1486        position: absolute;
1487        bottom: 0;
1488        left: 0;
1489        right: 0;
1490        height: 2px;
1491        background: linear-gradient(90deg, transparent, #0066FF, transparent);
1492        opacity: 0;
1493        transition: opacity 0.3s ease;
1494    }
1495
1496    .faisal-navbar:hover::after {
1497        opacity: 1;
1498    }
1499
1500    .faisal-navbar .container-fluid {
1501        max-width: 1400px;
1502        margin: 0 auto;
1503        padding: 0 2rem;
1504    }
1505
1506    .navbar-wrapper {
1507        display: flex;
1508        align-items: center;
1509        justify-content: space-between;
1510        height: 75px;
1511        gap: 2rem;
1512    }
1513
1514    /* ═══ Brand Section ═══ */
1515    .navbar-brand-section {
1516        display: flex;
1517        align-items: center;
1518        gap: 1rem;
1519        flex-shrink: 0;
1520    }
1521
1522    .brand-link {
1523        display: flex;
1524        align-items: center;
1525        text-decoration: none;
1526        transition: transform 0.3s ease;
1527    }
1528
1529    .brand-link:hover {
1530        transform: scale(1.05);
1531    }
1532
1533    .brand-logo {
1534        height: 50px;
1535        width: auto;
1536        object-fit: contain;
1537    }
1538
1539    .beta-tag {
1540        background: linear-gradient(135deg, #0066FF 0%, #3B82F6 100%);
1541        color: #fff;
1542        font-size: 0.75rem;
1543        font-weight: 700;
1544        padding: 0.5rem 1rem;
1545        border-radius: 9999px;
1546        white-space: nowrap;
1547        box-shadow:
1548            0 4px 12px rgba(0, 102, 255, 0.3),
1549            inset 0 1px 0 rgba(255, 255, 255, 0.2);
1550        letter-spacing: -0.01em;
1551        animation: pulse 2s ease-in-out infinite;
1552    }
1553
1554    @keyframes pulse {
1555
1556        0%,
1557        100% {
1558            box-shadow:
1559                0 4px 12px rgba(0, 102, 255, 0.3),
1560                inset 0 1px 0 rgba(255, 255, 255, 0.2);
1561        }
1562
1563        50% {
1564            box-shadow:
1565                0 6px 16px rgba(0, 102, 255, 0.4),
1566                inset 0 1px 0 rgba(255, 255, 255, 0.3);
1567        }
1568    }
1569
1570    /* ═══ Desktop Menu ═══ */
1571    .navbar-menu-desktop {
1572        flex: 1;
1573        display: flex;
1574        justify-content: center;
1575    }
1576
1577    .nav-links {
1578        display: flex;
1579        align-items: center;
1580        gap: 0.5rem;
1581        list-style: none;
1582        margin: 0;
1583        padding: 0;
1584    }
1585
1586    .nav-item {
1587        position: relative;
1588    }
1589
1590    /* Extend the hoverable area to bridge the visual gap above the dropdown
1591       menu (margin-top: 0.75rem), otherwise the mouse leaves the hover zone
1592       while moving toward the menu and it closes before it can be reached. */
1593    .nav-item.has-dropdown {
1594        padding-bottom: 0.75rem;
1595        margin-bottom: -0.75rem;
1596    }
1597
1598    .nav-link {
1599        display: flex;
1600        align-items: center;
1601        gap: 0.5rem;
1602        padding: 0.75rem 1.25rem;
1603        color: #374151;
1604        text-decoration: none;
1605        font-weight: 600;
1606        font-size: 0.9375rem;
1607        border-radius: 12px;
1608        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1609        white-space: nowrap;
1610        cursor: pointer;
1611        position: relative;
1612        letter-spacing: -0.01em;
1613    }
1614
1615    .nav-link::before {
1616        content: '';
1617        position: absolute;
1618        inset: 0;
1619        border-radius: 12px;
1620        background: linear-gradient(135deg, rgba(0, 102, 255, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
1621        opacity: 0;
1622        transition: opacity 0.3s ease;
1623    }
1624
1625    .nav-link:hover {
1626        background: linear-gradient(135deg, rgba(0, 102, 255, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
1627        color: #0066FF;
1628        transform: translateY(-2px);
1629        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15);
1630    }
1631
1632    .nav-link:hover::before {
1633        opacity: 1;
1634    }
1635
1636    .has-dropdown:hover>.nav-link {
1637        background: linear-gradient(135deg, rgba(0, 102, 255, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
1638        color: #0066FF;
1639    }
1640
1641    .dropdown-icon {
1642        transition: transform 0.3s ease;
1643    }
1644
1645    .has-dropdown:hover .dropdown-icon {
1646        transform: rotate(180deg);
1647    }
1648
1649    /* ═══ Premium Dropdown Menu Design ═══ */
1650    .faisal-navbar .nav-item.has-dropdown .dropdown-menu {
1651        position: absolute !important;
1652        top: 100% !important;
1653        right: 0 !important;
1654        left: auto !important;
1655        background: rgba(255, 255, 255, 0.98) !important;
1656        backdrop-filter: blur(20px) !important;
1657        border-radius: 16px !important;
1658        box-shadow:
1659            0 20px 40px rgba(0, 0, 0, 0.12) !important,
1660            0 10px 20px rgba(0, 102, 255, 0.08) !important,
1661            0 0 0 1px rgba(0, 102, 255, 0.1) !important;
1662        padding: 0.75rem !important;
1663        min-width: 240px !important;
1664        width: auto !important;
1665        opacity: 0 !important;
1666        visibility: hidden !important;
1667        transform: translateY(-15px) scale(0.95) !important;
1668        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
1669        list-style: none !important;
1670        margin: 0 !important;
1671        border: none !important;
1672        z-index: 9999999 !important;
1673        pointer-events: none !important;
1674        display: block !important;
1675    }
1676
1677    /* Show dropdown on hover */
1678    .faisal-navbar .nav-item.has-dropdown:hover .dropdown-menu {
1679        opacity: 1 !important;
1680        visibility: visible !important;
1681        transform: translateY(0) scale(1) !important;
1682        pointer-events: auto !important;
1683        display: block !important;
1684    }
1685
1686    /* Keep dropdown visible when hovering over it */
1687    .faisal-navbar .dropdown-menu:hover {
1688        opacity: 1 !important;
1689        visibility: visible !important;
1690        transform: translateY(0) scale(1) !important;
1691        pointer-events: auto !important;
1692        display: block !important;
1693    }
1694
1695    .faisal-navbar .dropdown-menu li {
1696        list-style: none !important;
1697        margin: 0 !important;
1698        padding: 0 !important;
1699    }
1700
1701    .faisal-navbar .dropdown-link {
1702        display: flex !important;
1703        align-items: center !important;
1704        gap: 0.75rem !important;
1705        padding: 0.875rem 1.125rem !important;
1706        color: #374151 !important;
1707        text-decoration: none !important;
1708        border-radius: 12px !important;
1709        font-size: 0.9375rem !important;
1710        font-weight: 600 !important;
1711        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
1712        white-space: nowrap !important;
1713        position: relative !important;
1714        letter-spacing: -0.01em !important;
1715    }
1716
1717    .faisal-navbar .dropdown-link::before {
1718        content: '' !important;
1719        position: absolute !important;
1720        right: 1rem !important;
1721        width: 4px !important;
1722        height: 4px !important;
1723        background: #0066FF !important;
1724        border-radius: 50% !important;
1725        opacity: 0 !important;
1726        transform: scale(0) !important;
1727        transition: all 0.3s ease !important;
1728    }
1729
1730    .faisal-navbar .dropdown-link:hover {
1731        background: linear-gradient(135deg, rgba(0, 102, 255, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
1732        color: #0066FF !important;
1733        padding-right: 1.5rem !important;
1734        transform: translateX(-4px) !important;
1735        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.1) !important;
1736    }
1737
1738    .faisal-navbar .dropdown-link:hover::before {
1739        opacity: 1 !important;
1740        transform: scale(1) !important;
1741    }
1742
1743    .faisal-navbar .dropdown-link:hover {
1744        background: #f0f9f6 !important;
1745        color: #05b17d !important;
1746        padding-right: 20px !important;
1747        transform: translateX(-4px) !important;
1748    }
1749
1750    /* ═══ Mobile Menu Button - Premium ═══ */
1751    .mobile-menu-btn {
1752        display: none;
1753        flex-direction: column;
1754        gap: 6px;
1755        background: linear-gradient(135deg, rgba(0, 102, 255, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
1756        border: none;
1757        cursor: pointer;
1758        padding: 0.75rem;
1759        z-index: 1001;
1760        border-radius: 12px;
1761        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1762        box-shadow: 0 2px 8px rgba(0, 102, 255, 0.1);
1763    }
1764
1765    .mobile-menu-btn:hover {
1766        background: linear-gradient(135deg, rgba(0, 102, 255, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
1767        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
1768        transform: scale(1.05);
1769    }
1770
1771    .hamburger-line {
1772        width: 26px;
1773        height: 3px;
1774        background: linear-gradient(90deg, #0066FF 0%, #3B82F6 100%);
1775        border-radius: 3px;
1776        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
1777    }
1778
1779    .mobile-menu-btn.active .hamburger-line:nth-child(1) {
1780        transform: rotate(45deg) translateY(9px);
1781        background: #0066FF;
1782    }
1783
1784    .mobile-menu-btn.active .hamburger-line:nth-child(2) {
1785        opacity: 0;
1786        transform: scale(0);
1787    }
1788
1789    .mobile-menu-btn.active .hamburger-line:nth-child(3) {
1790        transform: rotate(-45deg) translateY(-9px);
1791        background: #0066FF;
1792    }
1793
1794    /* ═══ Mobile Menu Overlay - Premium ═══ */
1795    .mobile-menu-overlay {
1796        display: none;
1797        position: fixed;
1798        inset: 0;
1799        background: rgba(15, 23, 42, 0.7);
1800        backdrop-filter: blur(8px);
1801        z-index: 10000;
1802        opacity: 0;
1803        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
1804    }
1805
1806    .mobile-menu-overlay.active {
1807        opacity: 1;
1808    }
1809
1810    /* ═══ Mobile Menu Drawer - Premium ═══ */
1811    .mobile-menu-drawer {
1812        display: none;
1813        position: fixed;
1814        top: 0;
1815        right: -100%;
1816        width: 90%;
1817        max-width: 420px;
1818        height: 100vh;
1819        background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
1820        z-index: 10001;
1821        transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
1822        overflow-y: auto;
1823        box-shadow:
1824            -10px 0 40px rgba(0, 0, 0, 0.15),
1825            -5px 0 20px rgba(0, 102, 255, 0.1);
1826    }
1827
1828    .mobile-menu-drawer.active {
1829        right: 0;
1830    }
1831
1832    .mobile-drawer-header {
1833        display: flex;
1834        align-items: center;
1835        justify-content: space-between;
1836        padding: 1.75rem 1.5rem;
1837        border-bottom: 2px solid rgba(0, 102, 255, 0.1);
1838        background: linear-gradient(135deg,
1839                rgba(0, 102, 255, 0.05) 0%,
1840                rgba(59, 130, 246, 0.02) 50%,
1841                rgba(255, 255, 255, 1) 100%);
1842        backdrop-filter: blur(10px);
1843    }
1844
1845    .mobile-logo-section {
1846        flex: 1;
1847    }
1848
1849    .mobile-logo {
1850        height: 40px;
1851        width: auto;
1852        object-fit: contain;
1853    }
1854
1855    .mobile-close-btn {
1856        background: linear-gradient(135deg, rgba(0, 102, 255, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
1857        border: 2px solid rgba(0, 102, 255, 0.2);
1858        width: 44px;
1859        height: 44px;
1860        border-radius: 50%;
1861        display: flex;
1862        align-items: center;
1863        justify-content: center;
1864        cursor: pointer;
1865        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
1866        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15);
1867    }
1868
1869    .mobile-close-btn:hover {
1870        background: linear-gradient(135deg, #0066FF 0%, #3B82F6 100%);
1871        transform: rotate(90deg) scale(1.1);
1872        box-shadow: 0 6px 16px rgba(0, 102, 255, 0.3);
1873    }
1874
1875    .mobile-close-btn svg {
1876        color: #0066FF;
1877        transition: color 0.3s ease;
1878    }
1879
1880    .mobile-close-btn:hover svg {
1881        color: #FFFFFF;
1882    }
1883
1884    /* Mobile Navigation */
1885    .mobile-nav {
1886        padding: 1rem 0;
1887    }
1888
1889    .mobile-nav-list {
1890        list-style: none;
1891        margin: 0;
1892        padding: 0;
1893    }
1894
1895    .mobile-nav-item {
1896        border-bottom: 1px solid rgba(0, 102, 255, 0.08);
1897        transition: all 0.3s ease;
1898    }
1899
1900    .mobile-nav-item:hover {
1901        background: rgba(0, 102, 255, 0.02);
1902    }
1903
1904    .mobile-nav-parent {
1905        display: flex;
1906        align-items: center;
1907        justify-content: space-between;
1908    }
1909
1910    .mobile-nav-link {
1911        display: block;
1912        padding: 1.125rem 1.5rem;
1913        color: #374151;
1914        text-decoration: none;
1915        font-weight: 600;
1916        font-size: 1rem;
1917        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1918        flex: 1;
1919        letter-spacing: -0.01em;
1920    }
1921
1922    .mobile-nav-link:hover {
1923        background: linear-gradient(90deg, rgba(0, 102, 255, 0.08) 0%, transparent 100%);
1924        color: #0066FF;
1925        padding-right: 2rem;
1926        border-right: 3px solid #0066FF;
1927    }
1928
1929    .mobile-dropdown-toggle {
1930        background: transparent;
1931        border: none;
1932        padding: 1rem 1.25rem;
1933        cursor: pointer;
1934        color: #6B7280;
1935        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
1936        border-radius: 8px;
1937    }
1938
1939    .mobile-dropdown-toggle:hover {
1940        background: rgba(0, 102, 255, 0.1);
1941        color: #0066FF;
1942    }
1943
1944    .mobile-dropdown-toggle svg {
1945        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
1946    }
1947
1948    .mobile-nav-item.active .mobile-dropdown-toggle svg {
1949        transform: rotate(180deg);
1950        color: #0066FF;
1951    }
1952
1953    .mobile-submenu {
1954        list-style: none;
1955        background: linear-gradient(135deg, rgba(0, 102, 255, 0.03) 0%, rgba(59, 130, 246, 0.02) 100%);
1956        max-height: 0;
1957        overflow: hidden;
1958        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
1959        border-left: 3px solid rgba(0, 102, 255, 0.2);
1960        margin: 0 0.75rem;
1961        border-radius: 0 12px 12px 0;
1962    }
1963
1964    .mobile-nav-item.active .mobile-submenu {
1965        max-height: 600px;
1966    }
1967
1968    .mobile-submenu-link {
1969        display: flex;
1970        align-items: center;
1971        gap: 0.75rem;
1972        padding: 1rem 1.25rem 1rem 2.5rem;
1973        color: #6B7280;
1974        text-decoration: none;
1975        font-size: 0.9375rem;
1976        font-weight: 500;
1977        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1978        border-right: 3px solid transparent;
1979        position: relative;
1980    }
1981
1982    .mobile-submenu-link::before {
1982
1983        content: '';
1984        position: absolute;
1985        left: 1.5rem;
1986        width: 6px;
1987        height: 6px;
1988        background: #0066FF;
1989        border-radius: 50%;
1990        opacity: 0;
1991        transform: scale(0);
1992        transition: all 0.3s ease;
1993    }
1994
1995    .mobile-submenu-link:hover {
1996        background: rgba(0, 102, 255, 0.08);
1997        color: #0066FF;
1998        border-right: 3px solid #0066FF;
1999        padding-left: 2.75rem;
2000    }
2001
2002    .mobile-submenu-link:hover::before {
2003        opacity: 1;
2004        transform: scale(1);
2005    }
2006
2007    /* ═══ PREMIUM RESPONSIVE DESIGN ═══ */
2008
2009    /* Desktop: Show desktop menu, hide mobile elements */
2010    @media (min-width: 992px) {
2011        .mobile-menu-btn {
2012            display: none !important;
2013        }
2014
2015        .mobile-menu-overlay {
2016            display: none !important;
2017        }
2018
2019        .mobile-menu-drawer {
2020            display: none !important;
2021        }
2022    }
2023
2024    /* Mobile/Tablet: Hide desktop menu, show mobile button */
2025    @media (max-width: 991px) {
2026        .navbar-menu-desktop {
2027            display: none !important;
2028        }
2029
2030        .mobile-menu-btn {
2031            display: flex !important;
2032        }
2033
2034        /* Only show overlay when active */
2035        .mobile-menu-overlay.active {
2036            display: block !important;
2037        }
2038
2039        .mobile-menu-drawer {
2040            display: block !important;
2041        }
2042
2043        .faisal-navbar .container-fluid {
2044            padding: 0 1rem;
2045        }
2046
2047        .navbar-wrapper {
2048            height: 70px;
2049        }
2050
2051        .brand-logo {
2052            height: 45px;
2053        }
2054
2055        .beta-tag {
2056            font-size: 0.6875rem;
2057            padding: 0.375rem 0.75rem;
2058        }
2059
2060        .beta-tag {
2061            font-size: 0.6875rem;
2062            padding: 0.375rem 0.75rem;
2063        }
2064    }
2065
2066    @media (max-width: 480px) {
2067        .faisal-navbar .container-fluid {
2068            padding: 0 0.875rem;
2069        }
2070
2071        .navbar-wrapper {
2072            height: 65px;
2073            gap: 0.875rem;
2074        }
2075
2076        .brand-logo {
2077            height: 38px;
2078        }
2079
2080        .beta-tag {
2081            font-size: 0.625rem;
2082            padding: 0.3125rem 0.625rem;
2083        }
2084
2085        .mobile-menu-drawer {
2086            width: 95%;
2087            max-width: 100%;
2088        }
2089    }
2090
2091    /* Premium Scroll Effects */
2092    .faisal-navbar.scrolled {
2093        box-shadow:
2094            0 8px 16px -4px rgba(0, 0, 0, 0.08),
2095            0 4px 8px -2px rgba(0, 0, 0, 0.04),
2096            0 0 0 1px rgba(0, 102, 255, 0.1);
2097    }
2098
2099    body.menu-open {
2100        overflow: hidden;
2101    }
2102
2103    html {
2104        scroll-behavior: smooth;
2105    }
2106
2107    .nav-link.active,
2108    .mobile-nav-link.active {
2109        background: linear-gradient(135deg, rgba(0, 102, 255, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
2110        color: #0066FF;
2111        font-weight: 700;
2112        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
2113    }
2114</style>
2115
2116<script>
2117    /* ═══════════════════════════════════════════════════════════
2118   🚀 PREMIUM NAVBAR JAVASCRIPT - 60 FPS OPTIMIZED
2119   ═══════════════════════════════════════════════════════════ */
2120
2121    document.addEventListener('DOMContentLoaded', function() {
2122        'use strict';
2123
2124        // Cache DOM elements
2125        const navbar = document.querySelector('.faisal-navbar');
2126        const mobileMenuBtn = document.getElementById('mobileMenuToggle');
2127        const mobileOverlay = document.getElementById('mobileOverlay');
2128        const mobileDrawer = document.getElementById('mobileDrawer');
2129        const mobileCloseBtn = document.getElementById('mobileCloseBtn');
2130        const body = document.body;
2131        const dropdownToggles = document.querySelectorAll('.mobile-dropdown-toggle');
2132
2133        // Premium scroll handler with RAF optimization
2134        let lastScrollY = window.scrollY;
2135        let ticking = false;
2136
2137        function updateNavbarOnScroll() {
2138            lastScrollY = window.scrollY;
2139
2140            if (lastScrollY > 50) {
2141                navbar?.classList.add('scrolled');
2142            } else {
2143                navbar?.classList.remove('scrolled');
2144            }
2145
2146            ticking = false;
2147        }
2148
2149        window.addEventListener('scroll', function() {
2150            if (!ticking) {
2151                window.requestAnimationFrame(updateNavbarOnScroll);
2152                ticking = true;
2153            }
2154        }, {
2155            passive: true
2156        });
2157
2158        // Premium mobile menu functions with smooth animations
2159        function openMobileMenu() {
2160            mobileMenuBtn?.classList.add('active');
2161
2162            requestAnimationFrame(() => {
2163                mobileOverlay?.classList.add('active');
2164                requestAnimationFrame(() => {
2165                    mobileDrawer?.classList.add('active');
2166                    body.classList.add('menu-open');
2167                });
2168            });
2169        }
2170
2171        function closeMobileMenu() {
2172            mobileDrawer?.classList.remove('active');
2173
2174            setTimeout(() => {
2175                mobileOverlay?.classList.remove('active');
2176                mobileMenuBtn?.classList.remove('active');
2177                body.classList.remove('menu-open');
2178            }, 300);
2179        }
2180
2181        // Event listeners with debouncing
2182        mobileMenuBtn?.addEventListener('click', openMobileMenu);
2183        mobileCloseBtn?.addEventListener('click', closeMobileMenu);
2184        mobileOverlay?.addEventListener('click', closeMobileMenu);
2185
2186        // ESC key handler
2187        document.addEventListener('keydown', function(e) {
2188            if (e.key === 'Escape' && mobileDrawer?.classList.contains('active')) {
2189                closeMobileMenu();
2190            }
2191        });
2192
2193        // Premium mobile dropdown with smooth accordion
2194        dropdownToggles.forEach(function(toggle) {
2195            toggle.addEventListener('click', function(e) {
2196                e.preventDefault();
2197                e.stopPropagation();
2198
2199                const parentItem = this.closest('.mobile-nav-item');
2200                const isActive = parentItem.classList.contains('active');
2201
2202                // Close other dropdowns with animation
2203                document.querySelectorAll('.mobile-nav-item.active').forEach(function(item) {
2204                    if (item !== parentItem) {
2205                        item.classList.remove('active');
2206                    }
2207                });
2208
2209                // Toggle current with smooth animation
2210                parentItem.classList.toggle('active');
2211            });
2212        });
2213
2214        // Responsive handler with debouncing
2215        let resizeTimer;
2216        window.addEventListener('resize', function() {
2217            clearTimeout(resizeTimer);
2218            resizeTimer = setTimeout(function() {
2219                if (window.innerWidth > 991 && mobileDrawer?.classList.contains('active')) {
2220                    closeMobileMenu();
2221                }
2222            }, 250);
2223        });
2224
2225        // Premium active link highlighting
2226        const currentPath = window.location.pathname;
2227        document.querySelectorAll('.nav-link, .mobile-nav-link').forEach(function(link) {
2228            if (link.getAttribute('href') === currentPath) {
2229                link.classList.add('active');
2230            }
2231        });
2232
2233    });
2234</script>
2234
2235        
2236        
2237            <div class="container">
2238        
2239        <div class="row login-container">
2240
2241            <div class="col-12 col-md-6 pl-0">
2242                <img src="/store/1/alfac/l.jpg" class="img-cover" alt="Login">
2243            </div>
2244            <div class="col-12 col-md-6">
2245                <div class="login-card">
2246                    <h1 class="font-20 font-weight-bold">قم بتسجيل الدخول إلى حسابك</h1>
2247
2248                    <form method="Post" action="/login" class="mt-35">
2249                        <input type="hidden" name="_token" value="FfGJ4SYsegEaMTBCuTd4VyHJGqPbkvn4IKfB5A8C">
2250
2251                        <div class="d-flex align-items-center wizard-custom-radio mb-20">
2252        <div class="wizard-custom-radio-item flex-grow-1">
2253            <input type="radio" name="type" value="email" id="emailType" class="" checked>
2254            <label class="font-12 cursor-pointer px-15 py-10" for="emailType">البريد الإلكتروني</label>
2255        </div>
2256
2257        <div class="wizard-custom-radio-item flex-grow-1">
2258            <input type="radio" name="type" value="mobile" id="mobileType" class="" >
2259            <label class="font-12 cursor-pointer px-15 py-10" for="mobileType">هاتف</label>
2260        </div>
2261    </div>
2262
2263    <div class="js-email-fields form-group ">
2264        <label class="input-label" for="email">البريد الإلكتروني:</label>
2265        <input name="email" type="email" class="form-control " id="email"
2266               value="" aria-describedby="emailHelp">
2267            </div>
2268
2269
2270    <div class="js-mobile-fields d-none">
2271        <div class="row">
2272    <div class="col-5">
2273        <div class="form-group">
2274            <label class="input-label" for="mobile">دولة:</label>
2275            <select name="country_code" class="form-control select2">
2276
2277                <option value="+966" selected>السعودية (+966)</option>
2278
2279            </select>
2280
2281                    </div>
2282    </div>
2283
2284    <div class="col-7">
2285        <div class="form-group">
2286            <label class="input-label" for="mobile">الجوال
2287                :</label>
2288            <input name="mobile" type="text" class="form-control "
2289                value="" placeholder="5xxxxxxxx"id="mobile" aria-describedby="mobileHelp">
2290
2291                    </div>
2292    </div>
2293</div>
2294    </div>
2295
2296
2297
2298                        <div class="form-group">
2299                            <label class="input-label" for="password">كلمة المرور:</label>
2300                            <input name="password" type="password"
2301                                class="form-control " id="password"
2302                                aria-describedby="passwordHelp">
2303
2304                                                    </div>
2305
2306                        
2307                        <button type="submit" class="btn btn-primary btn-block mt-20">تسجيل الدخول</button>
2308                    </form>
2309
2310                    
2311                    <div class="text-center mt-20">
2312                        <span
2313                            class="badge badge-circle-gray300 text-secondary d-inline-flex align-items-center justify-content-center">أو</span>
2314                    </div>
2315
2316                                            <a href="/google" target="_blank"
2317                            class="social-login mt-20 p-10 text-center d-flex align-items-center justify-content-center">
2318                            <img src="/assets/default/img/auth/google.svg" class="mr-auto" alt=" google svg" />
2319                            <span class="flex-grow-1">تسجيل الدخول بحساب Google</span>
2320                        </a>
2321                    
2322
2323
2324                    <div class="mt-30 text-center">
2325                        <a href="/forget-password" target="_blank">نسيت كلمة السر؟</a>
2326                    </div>
2327
2328                    <div class="mt-20 text-center">
2329                        <span>ليس لديك حساب؟</span>
2330                        <a href="/register" class="text-secondary font-weight-bold">اشتراك</a>
2331                    </div>
2332                </div>
2333            </div>
2334        </div>
2335    </div>
2336
2337                    <footer class="footer position-relative bg-dark">
2338    <br><br>
2339    <div class="container">
2340        <div class="row">
2341            <div class="col-6 col-md-3">
2342                
2343                                            <span
2344                            class="header d-block text-white font-weight-bold">معلومات عنا</span>
2345                    
2346                                            <div class="mt-20">
2347                            <p data-pm-slice="0 0 []"><font color="#ffffff">ALFAC LMS هو نظام إدارة تعلم كامل الميزات يساعدك على إدارة أعمالك التعليمية في عدة ساعات. تساعد هذه المنصة المعلمين على إنشاء مواد تعليمية احترافية وتساعد الطلاب على التعلم من أفضل المدربين.</font></p>
2348                        </div>
2349                                                </div>
2350
2351            <div class="col-6 col-md-3">
2352                
2353                                            <span
2354                            class="header d-block text-white font-weight-bold">شركائنا</span>
2355                    
2356                                            <div class="mt-20">
2357                            <p><img style="width: 100%;" src="/store/1/alfac/white__logo.svg"></p><p><img style="width: 100%;" src="/store/1/fonts/nelc-horizontal-white.png"><br><br></p><p><br></p>
2358                        </div>
2359                                                </div>
2360
2361            <div class="col-6 col-md-3">
2362                
2363                    
2364                                            <div class="mt-20">
2365                            <br>
2366                        </div>
2367                                                </div>
2368
2369            <div class="col-6 col-md-3">
2370                
2371                                            <span
2372                            class="header d-block text-white font-weight-bold">Alfac LMS</span>
2373                    
2374                                            <div class="mt-20">
2375                            <p><img src="/store/1/so/ALFAC.png" style="width: 80%;"><br></p>
2376                        </div>
2377                                                </div>
2378
2379        </div>
2380
2381        
2382        <div class="row mt-30">
2383            <div class="col-12">
2384                <span class="header d-block text-white font-weight-bold mb-15">السياسات</span>
2385                <div class="d-flex flex-wrap" style="gap: 8px 20px;">
2386                    <a href="/policies#privacy" class="text-white font-14" style="opacity:0.8;">
2387                        <i data-feather="lock" width="14" height="14" class="mr-5"></i>
2388                        سياسة الخصوصية
2389                    </a>
2390                    <a href="/policies#integrity" class="text-white font-14" style="opacity:0.8;">
2391                        <i data-feather="shield" width="14" height="14" class="mr-5"></i>
2392                        النزاهة الأكاديمية
2393                    </a>
2394                    <a href="/policies#attendance" class="text-white font-14" style="opacity:0.8;">
2395                        <i data-feather="user-check" width="14" height="14" class="mr-5"></i>
2396                        الحضور والاختبارات
2397                    </a>
2398                    <a href="/policies#communication" class="text-white font-14" style="opacity:0.8;">
2399                        <i data-feather="message-circle" width="14" height="14" class="mr-5"></i>
2400                        سياسة التواصل
2401                    </a>
2402                    <a href="/policies#instructor-guide" class="text-white font-14" style="opacity:0.8;">
2403                        <i data-feather="book-open" width="14" height="14" class="mr-5"></i>
2404                        دليل المدرب
2405                    </a>
2406                    <a href="/policies#student-guide" class="text-white font-14" style="opacity:0.8;">
2407                        <i data-feather="user" width="14" height="14" class="mr-5"></i>
2408                        دليل المتدرب
2409                    </a>
2410                    <a href="/policies#team-structure" class="text-white font-14" style="opacity:0.8;">
2411                        <i data-feather="users" width="14" height="14" class="mr-5"></i>
2412                        الهيكل التنظيمي
2413                    </a>
2414                </div>
2415            </div>
2416        </div>
2417
2418        <div class="mt-40 border-blue py-25">
2419
2420            
2421            <div class="d-flex align-items-center justify-content-between flex-wrap" style="gap:16px;">
2422                <div class="footer-logo">
2423                    <a href="/">
2424                        <img src="https://alfac.edu.sa/store/1/so/ALFAC.png" class="img-cover" alt="ALFAC logo">
2425                    </a>
2426                </div>
2427
2428                
2429                <div class="footer-payment d-flex align-items-center flex-wrap my-2" style="gap: 10px;">
2430                    <img src="https://alfac.edu.sa/assets/default/img/payment/visa.svg" alt="Visa"
2431                        style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;">
2432                    <img src="https://alfac.edu.sa/assets/default/img/payment/master.svg" alt="MasterCard"
2433                        style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;">
2434                    <img src="https://alfac.edu.sa/assets/default/img/payment/mada.svg" alt="Mada"
2435                        style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;">
2436                    <img src="https://alfac.edu.sa/assets/default/img/payment/tamara.svg" alt="Tamara"
2437                        style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;">
2438                    <img src="https://alfac.edu.sa/assets/default/img/payment/jeelpay.svg" alt="Jeel Pay"
2439                        style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;">
2440                    <img src="https://alfac.edu.sa/assets/default/img/payment/apple-pay.svg" alt="Apple Pay"
2441                        style="height: 28px; width: auto; background: white; padding: 4px 8px; border-radius: 4px;">
2442                </div>
2443
2444                <div class="footer-social">
2445                                                                        <a href="https://www.instagram.com/alfaisalac/?utm_source=ig_web_button_share_sheet&amp;igsh=ZDNlZDc0MzIxNw%3D%3D">
2446                                <img src="/store/1/default_images/social/instagram.svg" alt="Instagram" class="mr-15">
2447                            </a>
2448                                                    <a href="https://x.com/AlfaisalAC?s=20">
2449                                <img src="/store/1/so/icons8-x-50 (1).png" alt="X" class="mr-15">
2450                            </a>
2451                                                    <a href="https://www.linkedin.com/company/alfaisalacademy">
2452                                <img src="/store/1/so/icons8-in-50.png" alt="Linkedin" class="mr-15">
2453                            </a>
2454                                                    <a href="https://www.tiktok.com/@alfaisalac?is_from_webapp=1&amp;sender_device=pc">
2455                                <img src="/store/1/so/icons8-tiktok-50.png" alt="Tiktok" class="mr-15">
2456                            </a>
2457                                                            </div>
2458
2459            </div>
2460        </div>
2461    </div>
2462
2463    <div class="footer-copyright container d-flex align-items-center justify-content-between py-15 flex-wrap">
2464        <div class="font-14 text-white">© 2026 All Rights Reserved.</div>
2465
2466        
2467        <div class="d-flex align-items-center my-2">
2468            <iframe
2469                src="https://services.futurex.sa/entity-badge?code=c8iT1bAMaztRVXLY"
2470                width="250"
2471                height="60"
2472                referrerpolicy="unsafe-url"
2473                style="border: none;"
2474                title="NELC Verified Entity"
2475                loading="lazy"></iframe>
2476        </div>
2477
2478        <div class="font-14 text-white" style="user-select: text;" >
2479                            <a href="tel:920000840" class="text-white" style="text-decoration: none;" dir="ltr">
2480                    920000840
2481                </a>
2482                |
2483                <a href="tel:+966920000840" class="text-white" style="text-decoration: none;" dir="ltr">
2484                    +966 920000840
2485                </a>
2486                                        |
2487                                        <a href="mailto:[email protected]" class="text-white"
2488                    style="text-decoration: none;">
2489                    [email protected]
2490                </a>
2491                    </div>
2492    </div>
2493
2494</footer>
2495        
2496        <div class="d-none" id="advertisingModalSettings">
2497        <div class="d-flex align-items-center justify-content-between">
2498            <h3 class="section-title font-16 text-dark-blue mb-10">
2498لفترة محدودة</h3>
2499
2500            <button type="button" class="btn-close-advertising-modal close-swl btn-transparent d-flex">
2501                <i data-feather="x" width="25" height="25" class=""></i>
2502            </button>
2503        </div>
2504
2505        <div class="d-flex align-items-center justify-content-center">
2506            <img src="/store/1/مفهوم_اختبار_القدرات_العامة_GAT_(السعودية).jpg" class="img-fluid rounded-lg" alt="لفترة محدودة">
2507        </div>
2508
2509        <p class="font-14 text-gray mt-20">عرض خاص
2510اختبار تحديد المستوى 100% مجاني لفترة محدودة</p>
2511
2512        <div class="row align-items-center mt-20">
2513                            <div class="col-6">
2514                    <a href="https://alfac.edu.sa/level" class="btn btn-primary btn-sm btn-block">اغتنم الفرصة</a>
2515                </div>
2516            
2517                            <div class="col-6">
2518                    <a href="https://alfac.edu.sa/level" class="btn btn-outline-primary btn-sm btn-block">عرض الدورات</a>
2519                </div>
2520                    </div>
2521    </div>
2522
2523            </div>
2524    <!-- Template JS File -->
2525    
2525<script src="/assets/default/js/app.js"></script>
2525
2526    
2526<script src="/assets/default/vendors/feather-icons/dist/feather.min.js"></script>
2526
2527    
2527<script src="/assets/default/vendors/moment.min.js"></script>
2527
2528    
2528<script src="/assets/default/vendors/sweetalert2/dist/sweetalert2.min.js"></script>
2528
2529    
2529<script src="/assets/default/vendors/toast/jquery.toast.min.js"></script>
2529
2530    
2530<script type="text/javascript" src="/assets/default/vendors/simplebar/simplebar.min.js"></script>
2530
2531
2532    
2533
2534    
2534<script>
2535        var deleteAlertTitle = 'هل أنت واثق؟';
2536        var deleteAlertHint = 'لا يمكن التراجع عن هذا الإجراء!';
2537        var deleteAlertConfirm = 'حذف';
2538        var deleteAlertCancel = 'الغاء';
2539        var deleteAlertSuccess = 'النجاح';
2540        var deleteAlertFail = 'فشل';
2541        var deleteAlertFailHint = 'خطأ أثناء حذف العنصر!';
2542        var deleteAlertSuccessHint = 'تم حذف العنصر بنجاح.';
2543        var forbiddenRequestToastTitleLang = 'طلب&quot;ممنوع&quot; ';
2544        var forbiddenRequestToastMsgLang = 'غير مسموح لك بالولوج لهذا المحتوى';
2545    </script>
2545
2546
2547    
2548    
2549            
2549<script src="/assets/default/vendors/select2/select2.min.js"></script>
2549
2550    
2550<script src="/assets/default/js/parts/forgot_password.min.js"></script>
2550
2551    <link href="/assets/default/vendors/flagstrap/css/flags.css" rel="stylesheet">
2552    
2552<script src="/assets/default/vendors/flagstrap/js/jquery.flagstrap.min.js"></script>
2552
2553    
2553<script src="/assets/default/js/parts/top_nav_flags.min.js"></script>
2553
2554
2555    
2555<script>
2556        // Simple and fast search functionality
2557        document.addEventListener('DOMContentLoaded', function() {
2558            const searchForm = document.querySelector('.top-search-bar');
2559            const searchField = document.querySelector('.search-field-large');
2560
2561            if (searchForm && searchField) {
2562                searchForm.addEventListener('submit', function(e) {
2563                    if (searchField.value.trim() === '') {
2564                        e.preventDefault();
2565                        searchField.focus();
2566                    }
2567                });
2568            }
2569        });
2570    </script>
2570
2571
2572    
2572<script src="/assets/default/js/parts/main.min.js"></script>
2572
2573
2574    
2574<script>
2575        
2576        
2577    </script>
2577
2578
2579
2580    
2580<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
2580
2581
2582
2583    
2584    <!-- تسجيل الدخول عبر البريد والهاتف -->
2585    <div class="modal fade" id="otpLoginModal" tabindex="-1" aria-hidden="true">
2586        <div class="modal-dialog modal-dialog-centered">
2587            <div class="modal-content modern-login-modal">
2588
2589                <!-- Background Pattern -->
2590                <div class="modal-bg-pattern"></div>
2591
2592                <!-- Header -->
2593                <div class="modal-header modern-header">
2594                    <div class="login-icon">
2595                        <i class="fas fa-user-shield"></i>
2596                    </div>
2597                    <h5 class="modal-title">تسجيل الدخول</h5>
2598                    <p class="modal-subtitle">مرحباً بك في أكاديمية الفيصل العالمية</p>
2599                    <button type="button" class="btn-close modern-close" data-bs-dismiss="modal"></button>
2600                </div>
2601
2602                <div class="modal-body modern-body">
2603
2604                    <!-- Google Login -->
2605                    <div class="social-login-section">
2606                        <a href="/google" class="google-login-btn">
2607                            <div class="google-icon">
2608                                <img src="https://developers.google.com/identity/images/g-logo.png" alt="Google logo"
2609                                    width="20">
2610
2611                            </div>
2612                            <span>تسجيل الدخول بواسطة Google</span>
2613                        </a>
2614                    </div>
2615
2616                    <div class="divider-section">
2617                        <div class="divider-line"></div>
2618                        <span class="divider-text">أو الدخول باستخدام البريد ورقم الجوال</span>
2619                        <div class="divider-line"></div>
2620                    </div>
2621
2622                    <!-- Step 1: Email + Phone -->
2623                    <form id="otpLoginForm" class="login-form">
2624
2625                        <div class="form-group">
2626                            <label class="form-label">
2627                                <i class="fas fa-envelope form-icon"></i>
2628                                البريد الإلكتروني
2629                            </label>
2630                            <input type="email" class="form-control modern-input" name="email" required
2631                                placeholder="[email protected]">
2632                        </div>
2633
2634                        <div class="form-group">
2635                            <label class="form-label">
2636                                <i class="fas fa-mobile-alt form-icon"></i>
2637                                رقم الجوال
2638                            </label>
2639                            <input type="text" class="form-control modern-input" name="phone" required
2640                                placeholder="05XXXXXXXX">
2641                        </div>
2642
2643                        <button type="submit" class="modern-submit-btn">
2644                            <span class="btn-content">
2645                                <i class="fas fa-paper-plane btn-icon"></i>
2646                                <span class="btn-text">إرسال رمز التحقق</span>
2647                            </span>
2648                            <div class="btn-loader">
2649                                <div class="loader-spinner"></div>
2650                            </div>
2651                        </button>
2652                    </form>
2653
2654                    <!-- Step 2: OTP Verify -->
2655                    <form id="otpVerifyForm" class="d-none otp-form">
2656
2657                        <div class="otp-timer">
2658                            <i class="fas fa-clock timer-icon"></i>
2659                            <span>الرمز صالح لمدة <span id="otpCountdown" class="countdown-timer">02:00</span></span>
2660                        </div>
2661
2662                        <div class="form-group">
2663                            <label class="form-label">
2664                                <i class="fas fa-shield-alt form-icon"></i>
2665                                أدخل رمز التحقق
2666                            </label>
2667                            <input type="text" class="form-control otp-input" name="otp" maxlength="6"
2668                                required placeholder="••••••">
2669                        </div>
2670
2671                        <button type="submit" class="modern-submit-btn verify-btn">
2672                            <span class="btn-content">
2673                                <i class="fas fa-check-circle btn-icon"></i>
2674                                <span class="btn-text">تأكيد الدخول</span>
2675                            </span>
2676                            <div class="btn-loader">
2677                                <div class="loader-spinner"></div>
2678                            </div>
2679                        </button>
2680
2681                        <div class="resend-section">
2682                            <button type="button" id="resendOtpBtn" class="resend-btn">
2683                                <i class="fas fa-redo-alt"></i>
2684                                إعادة إرسال الرمز
2685                            </button>
2686                        </div>
2687                    </form>
2688
2689                    <!-- Message -->
2690                    <div id="otpMessage" class="message-box"></div>
2691
2692                    <!-- Register Link -->
2693                    <div class="register-section">
2694                        <p class="register-text">
2695                            ليس لديك حساب؟
2696                            <a href="/register" class="register-link">إنشاء حساب جديد</a>
2697                        </p>
2698                    </div>
2699
2700                </div>
2701            </div>
2702        </div>
2703    </div>
2704
2705
2706    <!-- JS -->
2707    
2707<script>
2708        document.addEventListener("DOMContentLoaded", function() {
2709            const otpLoginForm = document.getElementById("otpLoginForm");
2710            const otpVerifyForm = document.getElementById("otpVerifyForm");
2711            const otpMessage = document.getElementById("otpMessage");
2712            const otpCountdown = document.getElementById("otpCountdown");
2713            const resendBtn = document.getElementById("resendOtpBtn");
2714            let countdownInterval;
2715
2716            function startCountdown(minutes = 2) {
2717                let time = minutes * 60;
2718                clearInterval(countdownInterval);
2719
2720                countdownInterval = setInterval(() => {
2721                    let min = Math.floor(time / 60);
2722                    let sec = time % 60;
2723                    otpCountdown.textContent =
2724                        `${min.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`;
2725                    time--;
2726
2727                    if (time < 0) {
2728                        clearInterval(countdownInterval);
2729                        otpMessage.textContent = "انتهت صلاحية الرمز. يرجى إعادة الإرسال.";
2730                        otpMessage.className = "mb-3 text-center text-danger fw-bold";
2731                    }
2732                }, 1000);
2733            }
2734
2735            function showLoader(button, show = true) {
2736                if (show) {
2737                    button.classList.add("loading");
2738                    button.disabled = true;
2739                } else {
2740                    button.classList.remove("loading");
2741                    button.disabled = false;
2742                }
2743            }
2744
2745            function showMessage(message, type = 'success') {
2746                otpMessage.textContent = message;
2747                otpMessage.className = `message-box ${type} show`;
2748
2749                setTimeout(() => {
2750                    otpMessage.classList.remove('show');
2751                }, 5000);
2752            }
2753
2754            // إرسال OTP
2755            otpLoginForm.addEventListener("submit", function(e) {
2756                e.preventDefault();
2757                const submitBtn = otpLoginForm.querySelector("button[type='submit']");
2758                showLoader(submitBtn, true);
2759
2760                let formData = new FormData(otpLoginForm);
2761
2762                fetch("/send-otp", {
2763                        method: "POST",
2764                        headers: {
2765                            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
2766                        },
2767                        body: formData
2768                    })
2769                    .then(res => res.json())
2770                    .then(data => {
2771                        showLoader(submitBtn, false);
2772                        if (data.success) {
2773                            otpLoginForm.classList.add("d-none");
2774                            otpVerifyForm.classList.remove("d-none");
2775                            showMessage(data.message || "تم إرسال رمز التحقق بنجاح", 'success');
2776                            startCountdown(5);
2777                        } else {
2778                            showMessage(data.message, 'error');
2779                        }
2780                    })
2781                    .catch(error => {
2782                        showLoader(submitBtn, false);
2783                        showMessage("حدث خطأ أثناء إرسال الرمز", 'error');
2784                    });
2785            });
2786
2787            // تحقق OTP
2788            otpVerifyForm.addEventListener("submit", function(e) {
2789                e.preventDefault();
2790                const submitBtn = otpVerifyForm.querySelector("button[type='submit']");
2791                showLoader(submitBtn, true);
2792
2793                let formData = new FormData(otpVerifyForm);
2794
2795                fetch("/verify-otp", {
2796                        method: "POST",
2797                        headers: {
2798                            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
2799                        },
2800                        body: formData
2801                    })
2802                    .then(res => res.json())
2803                    .then(data => {
2804                        showLoader(submitBtn, false);
2805                        if (data.success) {
2806                            showMessage(data.message || "تم تسجيل الدخول بنجاح!", 'success');
2807                            setTimeout(() => window.location.reload(), 1500);
2808                        } else {
2809                            showMessage(data.message, 'error');
2810                        }
2811                    })
2812                    .catch(error => {
2813                        showLoader(submitBtn, false);
2814                        showMessage("حدث خطأ أثناء التحقق من الرمز", 'error');
2815                    });
2816            });
2817
2818            // إعادة إرسال OTP
2819            resendBtn.addEventListener("click", function() {
2820                otpVerifyForm.classList.add("d-none");
2821                otpLoginForm.classList.remove("d-none");
2822                otpMessage.classList.remove("show");
2823                clearInterval(countdownInterval);
2824            });
2825        });
2826    </script>
2826
2827
2828
2829    <!-- Bootstrap Icons -->
2830    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
2831
2832    <!-- Font Awesome for Icons -->
2833    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
2834
2835    
2836    
2836<script src="/assets/default/js/modern-ui.js" defer></script>
2836
2837
2838    
2839    
2839<script>
2840        (function() {
2841            'use strict';
2842
2843            // Create a single toast element
2844            var toast = document.createElement('div');
2845            toast.className = 'af-interest-toast';
2846            document.body.appendChild(toast);
2847
2848            var toastTimer = null;
2849
2850            function showToast(msg, isError) {
2851                toast.textContent = msg;
2852                toast.classList.toggle('af-interest-toast--error', !!isError);
2853                toast.classList.add('af-interest-toast--show');
2854                clearTimeout(toastTimer);
2855                toastTimer = setTimeout(function() {
2856                    toast.classList.remove('af-interest-toast--show');
2857                }, 3000);
2858            }
2859
2860            document.addEventListener('click', function(e) {
2861                var btn = e.target.closest('.af-card__heart, .af-card__interest-btn');
2862                if (!btn) return;
2863
2864                var url = btn.dataset.toggleUrl;
2865                var loginUrl = btn.dataset.loginUrl;
2866
2867                if (!url) {
2868                    window.location.href = loginUrl || '/login';
2869                    return;
2870                }
2871
2872                btn.disabled = true;
2873
2874                var csrfMeta = document.querySelector('meta[name="csrf-token"]');
2875                var csrf = csrfMeta ? csrfMeta.getAttribute('content') : '';
2876
2877                fetch(url, {
2878                        method: 'POST',
2879                        headers: {
2880                            'X-CSRF-TOKEN': csrf,
2881                            'Accept': 'application/json',
2882                            'Content-Type': 'application/json',
2883                        },
2884                    })
2885                    .then(function(res) {
2886                        return res.json().then(function(data) {
2887                            return {
2888                                ok: res.ok,
2889                                status: res.status,
2890                                data: data
2891                            };
2892                        });
2893                    })
2894                    .then(function(r) {
2895                        if (r.status === 401) {
2896                            showToast(r.data.message || 'يرجى تسجيل الدخول أولاً', true);
2897                            setTimeout(function() {
2898                                window.location.href = r.data.redirect || '/login';
2899                            }, 1500);
2900                            return;
2901                        }
2902                        var interested = r.data.interested;
2903                        var isHeartBtn = btn.classList.contains('af-card__heart');
2904                        if (isHeartBtn) {
2905                            var icon = btn.querySelector('svg');
2906                            btn.classList.toggle('af-card__heart--active', interested);
2907                            if (icon) {
2908                                icon.setAttribute('fill', interested ? '#e11d48' : 'none');
2909                                icon.setAttribute('stroke', interested ? '#e11d48' : 'currentColor');
2910                            }
2911                            btn.title = interested ? 'إلغاء الاهتمام' : 'أضف للاهتمامات';
2912                            btn.classList.remove('af-card__heart--pop');
2913                            void btn.offsetWidth;
2914                            btn.classList.add('af-card__heart--pop');
2915                        } else {
2916                            // .af-card__interest-btn
2917                            btn.classList.toggle('af-card__interest-btn--active', interested);
2918                            btn.textContent = interested ? 'إلغاء الاهتمام' : 'سجل اهتمامي';
2919                            btn.title = interested ? 'إلغاء الاهتمام' : 'سجل اهتمامي';
2920                        }
2921                        showToast(r.data.message || (interested ? 'تم تسجيل اهتمامك ✓' :
2922                            'تم إلغاء الاهتمام'), !r.ok);
2923                    })
2924                    .catch(function() {
2925                        showToast('حدث خطأ، حاول مجدداً', true);
2926                    })
2927                    .finally(function() {
2928                        btn.disabled = false;
2929                    });
2930            });
2931
2932            // ── Course Detail Page Interest Button (سجل اهتمامي CTA) ──
2933            document.addEventListener('click', function(e) {
2934                var btn = e.target.closest('#courseInterestBtn, #courseInterestBtnCta');
2935                if (!btn) return;
2936
2937                var url = btn.dataset.toggleUrl;
2938                var loginUrl = btn.dataset.loginUrl;
2939
2940                if (!url) {
2941                    window.location.href = loginUrl || '/login';
2942                    return;
2943                }
2944
2945                btn.disabled = true;
2946                var csrfMeta = document.querySelector('meta[name="csrf-token"]');
2947                var csrf = csrfMeta ? csrfMeta.getAttribute('content') : '';
2948
2949                fetch(url, {
2950                        method: 'POST',
2951                        headers: {
2952                            'X-CSRF-TOKEN': csrf,
2953                            'Accept': 'application/json',
2954                            'Content-Type': 'application/json',
2955                        },
2956                    })
2957                    .then(function(res) {
2958                        return res.json().then(function(data) {
2959                            return {
2960                                ok: res.ok,
2961                                status: res.status,
2962                                data: data
2963                            };
2964                        });
2965                    })
2966                    .then(function(r) {
2967                        if (r.status === 401) {
2968                            showToast(r.data.message || 'يرجى تسجيل الدخول أولاً', true);
2969                            setTimeout(function() {
2970                                window.location.href = r.data.redirect || '/login';
2971                            }, 1500);
2972                            return;
2973                        }
2974                        var interested = r.data.interested;
2975                        // sync sidebar icon button
2976                        var icon = document.getElementById('courseInterestIcon');
2977                        var label = document.getElementById('courseInterestLabel');
2978                        if (icon) {
2979                            icon.setAttribute('fill', interested ? '#e53e3e' : 'none');
2980                            icon.setAttribute('stroke', interested ? '#e53e3e' : 'currentColor');
2981                        }
2982                        if (label) label.textContent = interested ? 'اهتمامات' : 'أضف للاهتمامات';
2983                        // sync CTA button
2984                        var ctaBtn = document.getElementById('courseInterestBtnCta');
2985                        var ctaIcon = document.getElementById('courseInterestIconCta');
2986                        var ctaLabel = document.getElementById('courseInterestLabelCta');
2987                        if (ctaBtn) ctaBtn.classList.toggle('active', interested);
2988                        if (ctaIcon) {
2989                            ctaIcon.setAttribute('fill', interested ? '#e53e3e' : 'none');
2990                            ctaIcon.setAttribute('stroke', interested ? '#e53e3e' : 'currentColor');
2991                        }
2992                        if (ctaLabel) ctaLabel.textContent = interested ? 'إلغاء الاهتمام' : 'سجل اهتمامي';
2993                        // update titles
2994                        btn.title = interested ? 'إلغاء الاهتمام' : 'أضف للاهتمامات';
2995                        if (ctaBtn && ctaBtn !== btn) ctaBtn.title = btn.title;
2996                        showToast(r.data.message || (interested ? 'تم تسجيل اهتمامك ✓' :
2997                            'تم إلغاء الاهتمام'), !r.ok);
2998                    })
2999                    .catch(function() {
3000                        showToast('حدث خطأ، حاول مجدداً', true);
3001                    })
3002                    .finally(function() {
3003                        btn.disabled = false;
3004                    });
3005            });
3006        })();
3007    </script>
3007
3008
3009    <!-- TikTok Pixel — AddToCart event -->
3010    
3010<script>
3011    document.addEventListener('click', function (e) {
3012        if (typeof ttq === 'undefined') return;
3013
3014        // Course "Add to Cart" button
3015        var addToCartBtn = e.target.closest('.js-course-add-to-cart-btn');
3016        if (addToCartBtn) {
3017            var cid = addToCartBtn.dataset.id || '';
3018            var ctitle = addToCartBtn.dataset.title || document.title;
3019            var cprice = parseFloat(addToCartBtn.dataset.price || 0);
3020            ttq.track('AddToCart', {
3021                content_type: 'product',
3022                currency: 'SAR',
3023                value: cprice,
3024                contents: [{
3025                    content_id: cid,
3026                    content_name: ctitle,
3027                    price: cprice,
3028                    quantity: 1
3029                }]
3030            });
3031        }
3032
3033        // Product "Add to Cart" button
3034        var addProductBtn = e.target.closest('.btn-add-product-to-cart');
3035        if (addProductBtn) {
3036            var pid = addProductBtn.dataset.id || '';
3037            var pname = addProductBtn.dataset.title || '';
3038            var pprice = parseFloat(addProductBtn.dataset.price || 0);
3039            ttq.track('AddToCart', {
3040                content_type: 'product',
3041                currency: 'SAR',
3042                value: pprice,
3043                contents: [{
3044                    content_id: pid,
3045                    content_name: pname,
3046                    price: pprice,
3047                    quantity: 1
3048                }]
3049            });
3050        }
3051    }, true);
3052    </script>
3052
3053
3054</body>
3055
3056</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.