{"id":15,"date":"2026-05-19T12:12:28","date_gmt":"2026-05-19T12:12:28","guid":{"rendered":"https:\/\/lis.sa\/?page_id=15"},"modified":"2026-06-02T14:35:57","modified_gmt":"2026-06-02T14:35:57","slug":"%d8%a7%d9%84%d8%b1%d8%a6%d9%8a%d8%b3%d9%8a%d8%a9","status":"publish","type":"page","link":"https:\/\/lis.sa\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15\" class=\"elementor elementor-15\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c70322 e-con-full e-flex e-con e-parent\" data-id=\"7c70322\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d5f339 elementor-widget elementor-widget-html\" data-id=\"4d5f339\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n.lis-hero-epic {\r\n    --lis-dark: #00163F;\r\n    --lis-light: #FFFFFF;\r\n    --lis-accent: #4da6ff; \r\n    \r\n    --lis-title-size: 3rem;\r\n    --lis-subtitle-size: 0.95rem;\r\n    --lis-title-mobile: 1.8rem;\r\n    --lis-subtitle-mobile: 0.85rem;\r\n    \r\n    --lis-btn-padding: 12px 32px;\r\n    --lis-btn-radius: 50px;\r\n    --lis-btn-font: 0.85rem;\r\n    \r\n    --lis-font: 'Almarai', sans-serif;\r\n}\r\n\r\n.lis-hero-epic {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    font-family: var(--lis-font);\r\n    background-color: var(--lis-dark);\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.lis-epic-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: url('https:\/\/lis.sa\/wp-content\/uploads\/2026\/05\/\u0647\u064a\u0631\u0648-scaled.webp');\r\n    background-size: cover;\r\n    background-position: center left;\r\n    z-index: 1;\r\n    clip-path: inset(0 100% 0 0);\r\n    animation: lis-epic-reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;\r\n    transition: transform 0.3s ease-out; \r\n}\r\n\r\n.lis-epic-gradient {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(270deg, \r\n        rgba(0, 22, 63, 0.98) 0%, \r\n        rgba(0, 22, 63, 0.9) 35%, \r\n        rgba(0, 22, 63, 0.4) 60%, \r\n        rgba(0, 22, 63, 0.05) 100%);\r\n    z-index: 2;\r\n}\r\n\r\n.lis-epic-scanner {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 2px;\r\n    background: linear-gradient(to right, transparent, rgba(255,255,255,0.5), transparent);\r\n    box-shadow: 0 0 15px rgba(255,255,255,0.3);\r\n    z-index: 3;\r\n    opacity: 0;\r\n    animation: lis-scan-down 3s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.5s;\r\n}\r\n\r\n.lis-crosshair {\r\n    position: absolute;\r\n    width: 20px;\r\n    height: 20px;\r\n    z-index: 3;\r\n    opacity: 0;\r\n    animation: lis-fade-in 1s ease forwards 2s;\r\n}\r\n.lis-crosshair::before, .lis-crosshair::after {\r\n    content: '';\r\n    position: absolute;\r\n    background: rgba(255, 255, 255, 0.3);\r\n}\r\n.lis-crosshair::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }\r\n.lis-crosshair::after { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }\r\n.lis-crosshair-1 { top: 15%; left: 10%; animation-name: lis-fade-in, lis-spin-slow; animation-duration: 1s, 20s; animation-iteration-count: 1, infinite; animation-timing-function: ease, linear; }\r\n.lis-crosshair-2 { bottom: 20%; left: 25%; animation-name: lis-fade-in, lis-spin-slow; animation-duration: 1s, 15s; animation-iteration-count: 1, infinite; animation-direction: reverse; animation-timing-function: ease, linear; }\r\n\r\n.lis-epic-content {\r\n    position: relative;\r\n    z-index: 10;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 5%;\r\n    display: flex;\r\n    justify-content: flex-start;\r\n}\r\n\r\n.lis-epic-text-block {\r\n    max-width: 600px;\r\n    transition: transform 0.3s ease-out; \r\n}\r\n\r\n.lis-epic-tag {\r\n    display: inline-block;\r\n    color: var(--lis-accent);\r\n    font-size: 0.7rem;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    margin-bottom: 20px;\r\n    padding: 5px 12px;\r\n    border: 1px solid rgba(77, 166, 255, 0.3);\r\n    border-radius: 4px;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    animation: lis-slide-up-fade 0.8s ease forwards 1s;\r\n}\r\n\r\n\/* \u062a\u0639\u062f\u064a\u0644\u0627\u062a \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0644\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0627\u0644\u062c\u062f\u064a\u062f (\u0628\u062f\u0648\u0646 \u062a\u0642\u0637\u064a\u0639 \u0627\u0644\u062d\u0631\u0648\u0641) *\/\r\n.lis-epic-title {\r\n    color: var(--lis-light);\r\n    font-size: var(--lis-title-size);\r\n    font-weight: 800;\r\n    line-height: 1.3;\r\n    margin: 0 0 10px 0;\r\n    position: relative;\r\n    padding-bottom: 10px;\r\n}\r\n\r\n\/* \u0643\u0644\u0627\u0633 \u0643\u0634\u0641 \u0627\u0644\u0646\u0635 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 (\u0628\u062f\u064a\u0644 \u0644\u062a\u0642\u0637\u064a\u0639 \u0627\u0644\u062d\u0631\u0648\u0641) *\/\r\n.lis-reveal-line {\r\n    display: block;\r\n    overflow: hidden; \/* \u0636\u0631\u0648\u0631\u064a \u0644\u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u0643\u0634\u0641 *\/\r\n    position: relative;\r\n}\r\n\r\n.lis-reveal-line-inner {\r\n    display: inline-block;\r\n    transform: translateY(110%);\r\n    opacity: 0;\r\n    filter: blur(8px);\r\n    animation: lis-smooth-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n}\r\n\r\n.lis-delay-1 { animation-delay: 1.2s; }\r\n.lis-delay-2 { animation-delay: 1.5s; color: rgba(255, 255, 255, 0.7); font-weight: 300; }\r\n\r\n\/* \u062a\u0623\u062b\u064a\u0631 \u0644\u0645\u0639\u0629 \u0627\u0644\u0645\u0633\u062d \u0627\u0644\u0636\u0648\u0626\u064a (\u062a\u0637\u0628\u0642 \u0639\u0644\u0649 \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0628\u0627\u0644\u0643\u0627\u0645\u0644) *\/\r\n.lis-epic-title::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    right: -50%;\r\n    width: 30%;\r\n    height: 100%;\r\n    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.8), transparent);\r\n    transform: skewX(-25deg);\r\n    filter: blur(8px);\r\n    mix-blend-mode: overlay;\r\n    opacity: 0;\r\n    animation: lis-light-sweep 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards 2.5s;\r\n    pointer-events: none;\r\n    z-index: 5;\r\n}\r\n\r\n.lis-epic-line {\r\n    width: 0;\r\n    height: 1px;\r\n    background: rgba(255, 255, 255, 0.2);\r\n    margin: 25px 0 30px 0;\r\n    animation: lis-draw-line-epic 1s cubic-bezier(0.8, 0, 0.2, 1) forwards 2.2s;\r\n}\r\n\r\n.lis-epic-desc {\r\n    color: rgba(255, 255, 255, 0.65);\r\n    font-size: var(--lis-subtitle-size);\r\n    font-weight: 400;\r\n    line-height: 1.85;\r\n    margin: 0 0 40px 0;\r\n    opacity: 0;\r\n    transform: translateY(15px);\r\n    animation: lis-slide-up-fade 0.8s ease forwards 2.4s;\r\n}\r\n\r\n.lis-epic-actions {\r\n    display: flex;\r\n    gap: 15px;\r\n    opacity: 0;\r\n    animation: lis-fade-in 1s ease forwards 2.6s;\r\n}\r\n\r\n.lis-epic-btn {\r\n    position: relative;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    padding: var(--lis-btn-padding);\r\n    font-size: var(--lis-btn-font);\r\n    font-weight: 700;\r\n    border-radius: var(--lis-btn-radius);\r\n    text-decoration: none;\r\n    color: var(--lis-light);\r\n    border: 1px solid rgba(255, 255, 255, 0.3);\r\n    background: transparent;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.lis-epic-btn span,\r\n.lis-epic-btn i {\r\n    position: relative;\r\n    z-index: 2;\r\n    transition: color 0.4s ease;\r\n}\r\n\r\n.lis-epic-btn i { font-size: 0.8rem; }\r\n\r\n.lis-epic-btn::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: -120%;\r\n    width: 120%;\r\n    height: 100%;\r\n    background: var(--lis-light);\r\n    transform: skewX(-20deg);\r\n    transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n    z-index: 1;\r\n}\r\n\r\n.lis-epic-btn:hover {\r\n    border-color: var(--lis-light);\r\n    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n.lis-epic-btn:hover::before { left: -10%; }\r\n.lis-epic-btn:hover span, .lis-epic-btn:hover i { color: var(--lis-dark); }\r\n.lis-epic-btn:hover i.fa-arrow-left { transform: translateX(-5px); }\r\n\r\n.lis-epic-btn-sub { border-color: transparent; }\r\n.lis-epic-btn-sub::before { background: rgba(255, 255, 255, 0.08); }\r\n.lis-epic-btn-sub:hover span, .lis-epic-btn-sub:hover i { color: var(--lis-light); }\r\n.lis-epic-btn-sub:hover { box-shadow: none; border-color: rgba(255, 255, 255, 0.1); }\r\n\r\n@keyframes lis-epic-reveal { to { clip-path: inset(0 0 0 0); } }\r\n@keyframes lis-scan-down { 0% { top: 0; opacity: 1; } 80% { top: 100%; opacity: 0.5; } 100% { top: 100%; opacity: 0; } }\r\n@keyframes lis-slide-up-fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\r\n@keyframes lis-draw-line-epic { to { width: 100px; } }\r\n@keyframes lis-fade-in { to { opacity: 1; } }\r\n@keyframes lis-spin-slow { to { transform: rotate(360deg); } }\r\n\r\n\/* \u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0627\u0644\u0643\u0634\u0641 \u0627\u0644\u0646\u0627\u0639\u0645 \u0644\u0644\u0633\u0637\u0631 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 *\/\r\n@keyframes lis-smooth-reveal {\r\n    0% { transform: translateY(110%); opacity: 0; filter: blur(8px); }\r\n    100% { transform: translateY(0); opacity: 1; filter: blur(0); }\r\n}\r\n\r\n\/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0644\u0645\u0639\u0627\u0646 \u0627\u0644\u0630\u064a \u064a\u0645\u0631 \u0639\u0644\u0649 \u0627\u0644\u0646\u0635 *\/\r\n@keyframes lis-light-sweep {\r\n    0% { right: -50%; opacity: 0; }\r\n    10% { opacity: 1; }\r\n    90% { opacity: 1; }\r\n    100% { right: 150%; opacity: 0; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .lis-crosshair { display: none; }\r\n    .lis-epic-gradient {\r\n        background: linear-gradient(180deg, rgba(0, 22, 63, 0.95) 0%, rgba(0, 22, 63, 0.7) 100%);\r\n    }\r\n    .lis-epic-bg { background-position: center; opacity: 0.4; }\r\n    .lis-epic-title { font-size: var(--lis-title-mobile); }\r\n    .lis-epic-desc { font-size: var(--lis-subtitle-mobile); }\r\n    .lis-epic-actions { flex-direction: column; width: 100%; }\r\n    .lis-epic-btn { width: 100%; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"lis-hero-epic\" id=\"lis-epic-sec\">\r\n    \r\n    <div class=\"lis-epic-bg\" id=\"lis-bg-element\"><\/div>\r\n    <div class=\"lis-epic-gradient\"><\/div>\r\n    <div class=\"lis-epic-scanner\"><\/div>\r\n    \r\n    <div class=\"lis-crosshair lis-crosshair-1\"><\/div>\r\n    <div class=\"lis-crosshair lis-crosshair-2\"><\/div>\r\n\r\n    <div class=\"lis-epic-content\">\r\n        <div class=\"lis-epic-text-block\" id=\"lis-text-element\">\r\n            \r\n            <div class=\"lis-epic-tag\"> LIS - Legal Intelligence Systems\r\n<\/div>\r\n            \r\n            <!-- \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0645\u0639 \u0643\u0644\u0627\u0633 \u0627\u0644\u0643\u0634\u0641 \u0627\u0644\u0633\u064a\u0646\u0645\u0627\u0626\u064a \u0627\u0644\u062c\u062f\u064a\u062f (\u0628\u062f\u0648\u0646 \u062c\u0627\u0641\u0627 \u0633\u0643\u0631\u064a\u0628\u062a) -->\r\n            <h1 class=\"lis-epic-title\">\r\n                <span class=\"lis-reveal-line\">\r\n                    <span class=\"lis-reveal-line-inner lis-delay-1\">\u0623\u0646\u0638\u0645\u0629 \u0630\u0643\u064a\u0629 \u0645\u0635\u0645\u0645\u0629<\/span>\r\n                <\/span>\r\n                <span class=\"lis-reveal-line\">\r\n                    <span class=\"lis-reveal-line-inner lis-delay-2\">\u0644\u0644\u0645\u062d\u0627\u0645\u064a \u0627\u0644\u062d\u062f\u064a\u062b<\/span>\r\n                <\/span>\r\n            <\/h1>\r\n            \r\n            <div class=\"lis-epic-line\"><\/div>\r\n            \r\n            <p class=\"lis-epic-desc\">\r\n                \u062d\u0644\u0648\u0644 \u0642\u0627\u0646\u0648\u0646\u064a\u0629 \u062a\u0642\u0646\u064a\u0629 \u0628\u064f\u0646\u064a\u062a \u0645\u0646 \u0648\u0627\u0642\u0639 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629\u060c \u062a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u062e\u0628\u0631\u0629 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629 \u0648\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0644\u062a\u0642\u062f\u064a\u0645 \u062a\u062c\u0631\u0628\u0629 \u0639\u0645\u0644\u064a\u0629 \u0648\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u062a\u0643\u0648\u0646 \u062d\u0644\u0627 \u062d\u0642\u064a\u0642\u064a\u0627 \u0644\u0627 \u0639\u0628\u0626\u0627 \u0625\u0636\u0627\u0641\u064a\u0627.\r\n            <\/p>\r\n            \r\n           \r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    \/* 1. \u062a\u0645 \u0625\u0632\u0627\u0644\u0629 \u0643\u0648\u062f \u0627\u0644\u0640 JavaScript \u0627\u0644\u062e\u0627\u0635 \u0628\u062a\u0642\u0637\u064a\u0639 \u0627\u0644\u062d\u0631\u0648\u0641 \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0633\u0644\u0627\u0645\u0629 \u0627\u0644\u0646\u0635 \u0627\u0644\u0639\u0631\u0628\u064a *\/\r\n\r\n    \/* 2. \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0645\u0627\u0648\u0633 \u062b\u0644\u0627\u062b\u064a \u0627\u0644\u0623\u0628\u0639\u0627\u062f \u0627\u0644\u0628\u0633\u064a\u0637 (Mouse Parallax) *\/\r\n    const heroSection = document.getElementById('lis-epic-sec');\r\n    const bgElement = document.getElementById('lis-bg-element');\r\n    const textElement = document.getElementById('lis-text-element');\r\n\r\n    if (window.innerWidth > 992) {\r\n        heroSection.addEventListener('mousemove', (e) => {\r\n            const x = e.clientX \/ window.innerWidth;\r\n            const y = e.clientY \/ window.innerHeight;  \r\n            \r\n            const bgX = (x - 0.5) * -15; \r\n            const bgY = (y - 0.5) * -15;\r\n            bgElement.style.transform = `translate(${bgX}px, ${bgY}px) scale(1.05)`;\r\n\r\n            const textX = (x - 0.5) * 10;\r\n            const textY = (y - 0.5) * 10;\r\n            textElement.style.transform = `translate(${textX}px, ${textY}px)`;\r\n        });\r\n\r\n        heroSection.addEventListener('mouseleave', () => {\r\n            bgElement.style.transform = `translate(0, 0) scale(1)`;\r\n            textElement.style.transform = `translate(0, 0)`;\r\n        });\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5635aeb elementor-widget elementor-widget-html\" data-id=\"5635aeb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n\/* =======================================================\r\n   \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u0634\u0627\u0645\u0644\u0629 (CSS Variables) - \u062a\u0642\u062f\u0631 \u062a\u0639\u062f\u0644 \u0623\u064a \u0644\u0648\u0646 \u0645\u0646 \u0647\u0646\u0627\r\n   ======================================================= *\/\r\n.lis-about-pro {\r\n    \/* \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 *\/\r\n    --lis-primary-dark: #00163F;      \/* \u0627\u0644\u0643\u062d\u0644\u064a \u0627\u0644\u062e\u0627\u0635 \u0628\u0643 *\/\r\n    --lis-primary-light: #FFFFFF;     \/* \u0627\u0644\u0623\u0628\u064a\u0636 \u0627\u0644\u0646\u0642\u064a *\/\r\n    \r\n    \/* \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0627\u062a *\/\r\n    --lis-bg-main: #FFFFFF;           \/* \u0644\u0648\u0646 \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0633\u0643\u0634\u0646 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 *\/\r\n    --lis-bg-pattern: #F0F4F8;        \/* \u0644\u0648\u0646 \u062e\u0637\u0648\u0637 \u0627\u0644\u0634\u0628\u0643\u0629 \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n    \r\n    \/* \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0646\u0635\u0648\u0635 *\/\r\n    --lis-text-title: #00163F;        \/* \u0644\u0648\u0646 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 *\/\r\n    --lis-text-desc: #475569;         \/* \u0644\u0648\u0646 \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u0641\u0631\u0639\u064a\u0629 (\u0631\u0645\u0627\u062f\u064a \u062f\u0627\u0643\u0646 \u0645\u0631\u064a\u062d \u0644\u0644\u0639\u064a\u0646) *\/\r\n    \r\n    \/* \u0623\u0644\u0648\u0627\u0646 \u0628\u0637\u0627\u0642\u0629 \"\u0627\u0644\u0645\u0645\u064a\u0632\u0627\u062a\" *\/\r\n    --lis-card-bg: #00163F;           \/* \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n    --lis-card-text: #FFFFFF;         \/* \u0646\u0635 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n    --lis-card-desc: rgba(255, 255, 255, 0.7); \/* \u0648\u0635\u0641 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n    --lis-card-accent: #4da6ff;       \/* \u0644\u0648\u0646 \u0627\u0644\u062e\u0637 \u0627\u0644\u0645\u0636\u064a\u0621 \u0648\u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u0641\u064a \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n    --lis-card-shadow: rgba(0, 22, 63, 0.15); \/* \u0644\u0648\u0646 \u0638\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n    \r\n    \/* \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062e\u0637\u0648\u0637 *\/\r\n    --lis-font: 'Almarai', sans-serif;\r\n    --lis-title-size: 2.5rem;\r\n    --lis-card-title-size: 1.4rem;\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0648\u0627\u0644\u062e\u0644\u0641\u064a\u0629\r\n--------------------------------------------------- *\/\r\n.lis-about-pro {\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 120px 0;\r\n    font-family: var(--lis-font);\r\n    background-color: var(--lis-bg-main);\r\n    overflow: hidden;\r\n}\r\n\r\n\/* \u0634\u0628\u0643\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u062e\u0641\u064a\u0641\u0629 \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0644\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 *\/\r\n.lis-about-pattern {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: \r\n        linear-gradient(to right, var(--lis-bg-pattern) 1px, transparent 1px),\r\n        linear-gradient(to bottom, var(--lis-bg-pattern) 1px, transparent 1px);\r\n    background-size: 50px 50px;\r\n    z-index: 1;\r\n    opacity: 0.7;\r\n}\r\n\r\n.lis-about-wrapper {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 5%;\r\n    display: grid;\r\n    grid-template-columns: 5fr 7fr; \/* \u062a\u0642\u0633\u064a\u0645 \u063a\u064a\u0631 \u0645\u062a\u0645\u0627\u062b\u0644 (\u062a\u0643\u0648\u064a\u0646 \u062c\u0631\u064a\u0621) *\/\r\n    gap: 0;\r\n    align-items: center;\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0623\u064a\u0645\u0646: \u0635\u0648\u0631\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0645\u0639 \u0643\u0634\u0641 \u0627\u0644\u0633\u062a\u0627\u0631\r\n--------------------------------------------------- *\/\r\n.lis-image-col {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 600px; \/* \u0635\u0648\u0631\u0629 \u0637\u0648\u0644\u064a\u0629 \u0641\u062e\u0645\u0629 *\/\r\n    z-index: 2;\r\n}\r\n\r\n.lis-image-box {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    \/* \u0625\u0637\u0627\u0631 \u062a\u0642\u0646\u064a \u0635\u0644\u0628 *\/\r\n    border: 1px solid rgba(0, 22, 63, 0.1);\r\n}\r\n\r\n.lis-image-box img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    transform: scale(1.2);\r\n    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n\/* \u0627\u0644\u0633\u062a\u0627\u0631 \u0627\u0644\u0644\u064a \u0628\u064a\u0641\u062a\u062d \u0644\u0645\u0627 \u062a\u0639\u0645\u0644 \u0633\u0643\u0631\u0648\u0644 *\/\r\n.lis-image-shutter {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-color: var(--lis-bg-main);\r\n    z-index: 5;\r\n    transform-origin: inline-start; \/* \u064a\u0641\u062a\u062d \u062f\u0627\u0626\u0645\u0627\u064b \u0641\u064a \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0635\u062d\u064a\u062d *\/\r\n    transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0623\u064a\u0633\u0631: \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0645\u064a\u0632\u0627\u062a\r\n--------------------------------------------------- *\/\r\n.lis-content-col {\r\n    position: relative;\r\n    \/* \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u062c\u0648\u0647\u0631\u064a: inline-start \u062a\u0636\u0645\u0646 \u0623\u0646 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u062f\u0627\u0626\u0645\u0627\u064b \u062a\u0643\u0648\u0646 \u0628\u064a\u0646 \u0627\u0644\u0646\u0635 \u0648\u0627\u0644\u0635\u0648\u0631\u0629 *\/\r\n    padding-inline-start: 60px; \r\n    z-index: 3;\r\n}\r\n\r\n.lis-mask-text {\r\n    overflow: hidden;\r\n    padding-bottom: 10px;\r\n}\r\n\r\n.lis-section-label {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    color: var(--lis-card-accent);\r\n    font-size: 0.8rem;\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    margin-bottom: 20px;\r\n    transform: translateY(100%);\r\n    opacity: 0;\r\n    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.lis-section-label::before {\r\n    content: '';\r\n    width: 30px;\r\n    height: 2px;\r\n    background-color: var(--lis-card-accent);\r\n}\r\n\r\n.lis-about-heading {\r\n    color: var(--lis-text-title);\r\n    font-size: var(--lis-title-size);\r\n    font-weight: 800;\r\n    line-height: 1.2;\r\n    margin: 0 0 20px 0;\r\n    transform: translateY(100%);\r\n    opacity: 0;\r\n    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;\r\n}\r\n\r\n.lis-about-paragraph {\r\n    color: var(--lis-text-desc);\r\n    font-size: 1.05rem;\r\n    font-weight: 400;\r\n    line-height: 1.8;\r\n    margin: 0 0 40px 0;\r\n    max-width: 90%;\r\n    transform: translateY(30px);\r\n    opacity: 0;\r\n    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0645\u064a\u0632\u0627\u062a \"\u0627\u0644\u0645\u062a\u062f\u0627\u062e\u0644\u0629\" (The overlapping module)\r\n--------------------------------------------------- *\/\r\n.lis-feature-module {\r\n    position: relative;\r\n    background-color: var(--lis-card-bg);\r\n    padding: 40px;\r\n    \/* \u0627\u0644\u062a\u062f\u0627\u062e\u0644: \u0633\u062d\u0628 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0644\u062a\u0642\u0637\u0639 \u0627\u0644\u0635\u0648\u0631\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0645\u0646\u0637\u0642\u064a\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629 *\/\r\n    margin-inline-start: -100px;\r\n    border-inline-start: 4px solid var(--lis-card-accent); \r\n    box-shadow: -15px 25px 50px var(--lis-card-shadow);\r\n    transform: translateY(40px);\r\n    opacity: 0;\r\n    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;\r\n}\r\n\r\n\/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u062e\u0637 \u0627\u0644\u0645\u0636\u064a\u0621 \u0627\u0644\u0644\u064a \u0628\u064a\u062a\u062d\u0631\u0643 \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n.lis-feature-module::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    inset-inline-start: -4px; \/* \u0644\u064a\u062a\u0637\u0627\u0628\u0642 \u0645\u0639 \u0645\u0643\u0627\u0646 \u0627\u0644\u0628\u0648\u0631\u062f\u0631 \u0641\u064a \u0643\u0644\u0627 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u064a\u0646 *\/\r\n    width: 4px;\r\n    height: 0;\r\n    background-color: var(--lis-primary-light);\r\n    transition: height 0.4s ease;\r\n    z-index: 2;\r\n}\r\n\r\n.lis-module-header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.lis-module-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 50px;\r\n    height: 50px;\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    color: var(--lis-card-accent);\r\n    font-size: 1.2rem;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.lis-module-title {\r\n    color: var(--lis-card-text);\r\n    font-size: var(--lis-card-title-size);\r\n    font-weight: 800;\r\n    margin: 0;\r\n}\r\n\r\n.lis-module-desc {\r\n    color: var(--lis-card-desc);\r\n    font-size: 0.95rem;\r\n    font-weight: 300;\r\n    line-height: 1.8;\r\n    margin: 0;\r\n    transition: color 0.4s ease;\r\n}\r\n\r\n\/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0647\u0648\u0641\u0631 \u0627\u0644\u0635\u0644\u0628 \u0648\u0627\u0644\u0631\u0634\u064a\u0642 \u0644\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n.lis-feature-module:hover {\r\n    transform: translateY(-5px); \/* \u0631\u0641\u0639 \u0635\u0644\u0628 *\/\r\n    box-shadow: -20px 35px 60px var(--lis-card-shadow);\r\n}\r\n\r\n.lis-feature-module:hover::before {\r\n    height: 100%; \/* \u0627\u0644\u062e\u0637 \u0627\u0644\u0623\u0628\u064a\u0636 \u0628\u064a\u0645\u0644\u0649 \u0627\u0644\u062d\u0627\u0641\u0629 *\/\r\n}\r\n\r\n.lis-feature-module:hover .lis-module-icon {\r\n    background: var(--lis-card-accent);\r\n    color: var(--lis-primary-dark);\r\n    transform: rotate(15deg) scale(1.1);\r\n}\r\n\r\n.lis-feature-module:hover .lis-module-desc {\r\n    color: var(--lis-primary-light);\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0641\u0626\u0629 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 (Trigger Classes) \u0639\u0646\u062f \u0627\u0644\u0633\u0643\u0631\u0648\u0644\r\n--------------------------------------------------- *\/\r\n.lis-animate-in .lis-image-shutter {\r\n    transform: scaleX(0); \/* \u0641\u062a\u062d \u0627\u0644\u0633\u062a\u0627\u0631 *\/\r\n}\r\n\r\n.lis-animate-in .lis-image-box img {\r\n    transform: scale(1); \/* \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0627\u0644\u0635\u0648\u0631\u0629 *\/\r\n}\r\n\r\n.lis-animate-in .lis-section-label,\r\n.lis-animate-in .lis-about-heading {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n}\r\n\r\n.lis-animate-in .lis-about-paragraph {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n}\r\n\r\n.lis-animate-in .lis-feature-module {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n}\r\n\r\n\/* ---------------------------------------------------\r\n   \u0627\u0644\u062a\u062c\u0627\u0648\u0628 \u0645\u0639 \u0627\u0644\u0634\u0627\u0634\u0627\u062a (Mobile & Tablet)\r\n--------------------------------------------------- *\/\r\n@media (max-width: 992px) {\r\n    .lis-about-wrapper {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n    }\r\n    \r\n    .lis-content-col {\r\n        padding-inline-start: 0; \/* \u062a\u0635\u0641\u064a\u0631 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n        order: -1; \/* \u0631\u0641\u0639 \u0627\u0644\u0646\u0635 \u0641\u0648\u0642 \u0627\u0644\u0635\u0648\u0631\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n    }\r\n    \r\n    .lis-image-col {\r\n        height: 400px;\r\n    }\r\n    \r\n    .lis-feature-module {\r\n        margin-inline-start: 0;\r\n        margin-top: -60px; \/* \u062a\u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0645\u0639 \u0627\u0644\u0635\u0648\u0631\u0629 \u0645\u0646 \u0627\u0644\u0623\u0633\u0641\u0644 *\/\r\n        margin-inline-end: 5%; \/* \u0645\u0633\u0627\u0641\u0629 \u0645\u062a\u0646\u0627\u0633\u0642\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n        z-index: 10;\r\n    }\r\n    \r\n    .lis-animate-in .lis-feature-module {\r\n        transform: translateY(0);\r\n    }\r\n    \r\n    .lis-feature-module:hover {\r\n        transform: translateY(-5px);\r\n    }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .lis-about-pro { padding: 80px 0; }\r\n    .lis-about-heading { font-size: 2rem; }\r\n    .lis-module-title { font-size: 1.2rem; }\r\n    .lis-feature-module { padding: 30px; margin-inline-end: 0; margin-top: -40px; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"lis-about-pro\" id=\"lis-about-section\">\r\n    \r\n    <!-- \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0634\u0628\u0643\u0629 \u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629 -->\r\n    <div class=\"lis-about-pattern\"><\/div>\r\n\r\n    <div class=\"lis-about-wrapper\">\r\n        \r\n        <!-- \u0627\u0644\u0635\u0648\u0631\u0629 (\u0627\u0644\u064a\u0633\u0627\u0631 \u0641\u064a \u0627\u0644\u062f\u064a\u0633\u0643\u062a\u0648\u0628) -->\r\n        <div class=\"lis-image-col\">\r\n            <div class=\"lis-image-box\">\r\n                <div class=\"lis-image-shutter\"><\/div>\r\n                <!-- \u0635\u0648\u0631\u0629 \u062a\u0648\u062d\u064a \u0628\u0645\u0643\u062a\u0628 \u0639\u0635\u0631\u064a \u064a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0648\u0627\u0644\u062a\u0642\u0646\u064a\u0629 -->\r\n                <img decoding=\"async\" src=\"https:\/\/lis.sa\/wp-content\/uploads\/2026\/05\/WhatsApp-Image-2026-05-31-at-7.08.02-PM.jpeg\" alt=\"\u0628\u064a\u0626\u0629 \u0639\u0645\u0644 LIS\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- \u0627\u0644\u0645\u062d\u062a\u0648\u0649 (\u0627\u0644\u064a\u0645\u064a\u0646 \u0641\u064a \u0627\u0644\u062f\u064a\u0633\u0643\u062a\u0648\u0628) -->\r\n        <div class=\"lis-content-col\">\r\n            \r\n            <div class=\"lis-mask-text\">\r\n                <span class=\"lis-section-label\">\u0647\u0648\u064a\u0629 \u0627\u0644\u0646\u0638\u0627\u0645<\/span>\r\n            <\/div>\r\n            \r\n            <div class=\"lis-mask-text\">\r\n                <h2 class=\"lis-about-heading\">\u0645\u0627\u0647\u064a LIS \u061f<\/h2>\r\n            <\/div>\r\n            \r\n            <p class=\"lis-about-paragraph\">\r\nLIS \u0647\u064a \u0634\u0631\u0643\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629\u060c \u062a\u0639\u0645\u0644 \u0639\u0644\u0649 \u062a\u0637\u0648\u064a\u0631 \u0623\u0646\u0638\u0645\u0629 \u0630\u0643\u064a\u0629 \u0645\u062f\u0639\u0648\u0645\u0629 \u0628\u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0627\u0644\u0645\u062a\u062e\u0635\u0635\u0629 \u0648\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0644\u0625\u0639\u0627\u062f\u0629 \u062a\u0634\u0643\u064a\u0644 \u0633\u064a\u0631 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a \u0628\u062f\u0642\u0629 \u0648\u0643\u0641\u0627\u0621\u0629 \u0623\u0639\u0644\u0649.\r\n            <\/p>\r\n\r\n            <!-- \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u062a\u062f\u0627\u062e\u0644\u0629 -->\r\n            \r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    \/* \u0633\u0643\u0631\u064a\u0628\u062a Intersection Observer \u0644\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0639\u0646\u062f \u0627\u0644\u0633\u0643\u0631\u0648\u0644 *\/\r\n    const aboutSection = document.getElementById('lis-about-section');\r\n    \r\n    if (aboutSection) {\r\n        const observerOptions = {\r\n            root: null,\r\n            rootMargin: '0px',\r\n            threshold: 0.3 \/* \u064a\u0628\u062f\u0623 \u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0644\u0645\u0627 30% \u0645\u0646 \u0627\u0644\u0633\u0643\u0634\u0646 \u064a\u0638\u0647\u0631 \u0641\u064a \u0627\u0644\u0634\u0627\u0634\u0629 *\/\r\n        };\r\n\r\n        const observer = new IntersectionObserver((entries, observer) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    \/\/ \u0625\u0636\u0627\u0641\u0629 \u0643\u0644\u0627\u0633 \u0627\u0644\u062a\u0634\u063a\u064a\u0644\r\n                    entry.target.classList.add('lis-animate-in');\r\n                    \/\/ \u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u0645\u0631\u0627\u0642\u0628\u0629 \u0639\u0634\u0627\u0646 \u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0645\u0627 \u064a\u0634\u062a\u063a\u0644\u0634 \u0643\u0644 \u0645\u0631\u0629 \u0646\u0637\u0644\u0639 \u0648\u0646\u0646\u0632\u0644 (\u062a\u062c\u0631\u0628\u0629 \u0645\u0633\u062a\u062e\u062f\u0645 \u0623\u0641\u0636\u0644)\r\n                    observer.unobserve(entry.target);\r\n                }\r\n            });\r\n        }, observerOptions);\r\n\r\n        observer.observe(aboutSection);\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6609bf0 elementor-widget elementor-widget-html\" data-id=\"6609bf0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n.lis-separator-pro {\r\n    \/* \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 *\/\r\n    --lis-sep-bg: #00163F;           \/* \u0627\u0644\u0643\u062d\u0644\u064a \u0627\u0644\u062f\u0627\u0643\u0646 \u0644\u0644\u0641\u0627\u0635\u0644 *\/\r\n    --lis-sep-text: #FFFFFF;         \/* \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0628\u064a\u0636 \u0644\u0644\u0646\u0635\u0648\u0635 *\/\r\n    --lis-sep-accent: #4da6ff;       \/* \u0627\u0644\u0623\u0632\u0631\u0642 \u0627\u0644\u0645\u0636\u064a\u0621 \u0644\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a *\/\r\n    \r\n    \/* \u0627\u0644\u062e\u0637\u0648\u0637 \u0648\u0627\u0644\u0623\u062d\u062c\u0627\u0645 *\/\r\n    --lis-font: 'Almarai', sans-serif;\r\n    --lis-icon-size: 2.2rem;         \/* \u062a\u0643\u0628\u064a\u0631 \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u0642\u0644\u064a\u0644\u0627\u064b \u0644\u0644\u0641\u062e\u0627\u0645\u0629 *\/\r\n    --lis-title-size: 1.1rem;\r\n    \r\n    \/* \u0623\u0628\u0639\u0627\u062f \u0627\u0644\u0633\u0643\u0634\u0646 *\/\r\n    --lis-sep-padding: 50px 0;\r\n}\r\n\r\n.lis-separator-pro {\r\n    position: relative;\r\n    width: 100%;\r\n    padding: var(--lis-sep-padding);\r\n    font-family: var(--lis-font);\r\n    background-color: var(--lis-sep-bg);\r\n    overflow: hidden;\r\n    \/* \u0638\u0644 \u062f\u0627\u062e\u0644\u064a \u0644\u062f\u0645\u062c \u0627\u0644\u0641\u0627\u0635\u0644 \u0645\u0639 \u0627\u0644\u0633\u0643\u0627\u0634\u0646 \u0627\u0644\u0645\u062c\u0627\u0648\u0631\u0629 \u0628\u0646\u0639\u0648\u0645\u0629 *\/\r\n    box-shadow: inset 0 10px 40px rgba(0,0,0,0.2), inset 0 -10px 40px rgba(0,0,0,0.2);\r\n}\r\n\r\n\/* \u0634\u0628\u0643\u0629 \u0646\u0642\u0637\u064a\u0629 \u062e\u0641\u064a\u0641\u0629 \u062c\u062f\u0627\u064b \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0629 (Tech Grid) *\/\r\n.lis-separator-pro::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);\r\n    background-size: 30px 30px;\r\n    z-index: 1;\r\n}\r\n\r\n\/* \u0633\u064f\u062d\u0628 \u0627\u0644\u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u0645\u062d\u064a\u0637\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 (Ambient Glow) *\/\r\n.lis-ambient-glow {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 60%;\r\n    height: 60%;\r\n    background: radial-gradient(circle, rgba(77, 166, 255, 0.08) 0%, transparent 70%);\r\n    transform: translate(-50%, -50%);\r\n    filter: blur(40px);\r\n    z-index: 2;\r\n    animation: lis-pulse-glow 6s infinite alternate ease-in-out;\r\n}\r\n\r\n.lis-sep-container {\r\n    max-width: 1100px; \r\n    margin: 0 auto;\r\n    padding: 0 5%;\r\n    position: relative;\r\n    z-index: 10;\r\n}\r\n\r\n.lis-sep-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 30px;\r\n    position: relative;\r\n}\r\n\r\n\/* --- \u0627\u0644\u0633\u0631 \u0647\u0646\u0627: \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0634\u0628\u0643\u0629 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0647\u0648\u0641\u0631 (\u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0648\u0627\u0644\u062a\u0645\u0648\u064a\u0647) --- *\/\r\n\/* \u0644\u0645\u0627 \u0627\u0644\u0645\u0627\u0648\u0633 \u064a\u062f\u062e\u0644 \u0627\u0644\u0634\u0628\u0643\u0629\u060c \u062e\u0641\u062a \u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0648\u0627\u0639\u0645\u0644\u0647\u0627 Blur *\/\r\n.lis-sep-grid:hover .lis-sep-item {\r\n    opacity: 0.2;\r\n    filter: blur(6px) grayscale(50%);\r\n    transform: scale(0.95);\r\n}\r\n\r\n\/* \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0644\u064a \u0627\u0644\u0645\u0627\u0648\u0633 \u0639\u0644\u064a\u0647 \u064a\u0643\u0633\u0631 \u0627\u0644\u0640 Blur\u060c \u064a\u0643\u0628\u0631\u060c \u0648\u064a\u0646\u0648\u0631 *\/\r\n.lis-sep-grid .lis-sep-item:hover {\r\n    opacity: 1;\r\n    filter: blur(0) grayscale(0%);\r\n    transform: scale(1.15) translateY(-15px);\r\n    z-index: 20;\r\n}\r\n\r\n.lis-sep-item {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    \/* \u062d\u0631\u0643\u0629 \u0646\u0627\u0639\u0645\u0629 \u062c\u062f\u0627\u064b \u0644\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0628\u064a\u0646 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0648\u0627\u0644\u062a\u0645\u0648\u064a\u0647 *\/\r\n    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n    \r\n    \/* \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062f\u062e\u0648\u0644 \u0627\u0644\u0623\u0648\u0644\u064a\u0629 (\u0644\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646 \u0639\u0646\u062f \u0627\u0644\u0633\u0643\u0631\u0648\u0644) *\/\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n}\r\n\r\n\/* \u0645\u0646\u0635\u0629 \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 3D *\/\r\n.lis-holo-wrapper {\r\n    position: relative;\r\n    width: 100px;\r\n    height: 120px; \/* \u0645\u0633\u0627\u062d\u0629 \u0637\u0648\u0644\u064a\u0629 \u0644\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u0648\u0627\u0644\u0642\u0627\u0639\u062f\u0629 *\/\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n\/* \u062e\u0637 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0639\u0645\u0648\u062f\u064a (Data Beam) *\/\r\n.lis-data-beam {\r\n    position: absolute;\r\n    top: -50px;\r\n    width: 1px;\r\n    height: 50px;\r\n    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15), var(--lis-sep-accent));\r\n    opacity: 0.3;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n\/* \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u0627\u0644\u0639\u0627\u0626\u0645\u0629 *\/\r\n.lis-sep-icon {\r\n    font-size: var(--lis-icon-size);\r\n    color: var(--lis-sep-text);\r\n    position: relative;\r\n    z-index: 5;\r\n    transform: translateY(10px);\r\n    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n    text-shadow: 0 5px 15px rgba(0,0,0,0.5);\r\n}\r\n\r\n\/* \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0647\u0648\u0644\u0648\u062c\u0631\u0627\u0645 \u05d4\u05de\u0636\u064a\u0626\u0629 (Hologram Base) *\/\r\n.lis-holo-base {\r\n    position: absolute;\r\n    bottom: 20px;\r\n    width: 60px;\r\n    height: 8px;\r\n    background: radial-gradient(ellipse at center, rgba(77, 166, 255, 0.3) 0%, transparent 70%);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 10px rgba(77, 166, 255, 0.1);\r\n    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n    transform: scale(0.8);\r\n}\r\n\r\n.lis-sep-title {\r\n    color: var(--lis-sep-text);\r\n    font-size: var(--lis-title-size);\r\n    font-weight: 700;\r\n    letter-spacing: 0.5px;\r\n    margin: 0;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.lis-sep-item:hover .lis-data-beam {\r\n    height: 80px;\r\n    top: -80px;\r\n    opacity: 1;\r\n    box-shadow: 0 0 15px var(--lis-sep-accent);\r\n}\r\n\r\n.lis-sep-item:hover .lis-sep-icon {\r\n    color: var(--lis-sep-accent);\r\n    transform: translateY(-5px); \/* \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0629 \u062a\u0631\u062a\u0641\u0639 \u0623\u0643\u062b\u0631 *\/\r\n    text-shadow: 0 10px 25px rgba(77, 166, 255, 0.6);\r\n}\r\n\r\n.lis-sep-item:hover .lis-holo-base {\r\n    width: 80px;\r\n    height: 12px;\r\n    background: radial-gradient(ellipse at center, rgba(77, 166, 255, 0.8) 0%, transparent 70%);\r\n    box-shadow: 0 0 25px rgba(77, 166, 255, 0.5);\r\n    transform: scale(1); \/* \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u062a\u062a\u0633\u0639 \u0648\u062a\u0636\u064a\u0621 \u0628\u0634\u062f\u0629 *\/\r\n}\r\n\r\n.lis-sep-item:hover .lis-sep-title {\r\n    color: var(--lis-sep-accent);\r\n    text-shadow: 0 0 15px rgba(77, 166, 255, 0.4);\r\n}\r\n\r\n\/* \u0643\u0644\u0627\u0633 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u0644\u0645\u0627 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u064a\u0648\u0635\u0644 \u0644\u0644\u0633\u0643\u0634\u0646 *\/\r\n.lis-separator-pro.is-visible .lis-sep-item {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* \u062a\u0623\u062e\u064a\u0631 \u0645\u062a\u062f\u0631\u062c (Staggered Delay) \u0644\u0644\u0639\u0646\u0627\u0635\u0631 \u0644\u062a\u062f\u062e\u0644 \u0648\u0627\u062d\u062f\u0629 \u062a\u0644\u0648 \u0627\u0644\u0623\u062e\u0631\u0649 *\/\r\n.lis-separator-pro.is-visible .lis-sep-item:nth-child(1) { transition-delay: 0.1s; }\r\n.lis-separator-pro.is-visible .lis-sep-item:nth-child(2) { transition-delay: 0.2s; }\r\n.lis-separator-pro.is-visible .lis-separator-pro .lis-sep-item:nth-child(3) { transition-delay: 0.3s; }\r\n.lis-separator-pro.is-visible .lis-sep-item:nth-child(4) { transition-delay: 0.4s; }\r\n\r\n\/* \u0646\u0628\u0636 \u0627\u0644\u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 *\/\r\n@keyframes lis-pulse-glow {\r\n    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }\r\n    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }\r\n}\r\n\r\n\/* \u0627\u0644\u062a\u062c\u0627\u0648\u0628 \u0645\u0639 \u0627\u0644\u062a\u0627\u0628\u0644\u062a \u0648\u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\r\n@media (max-width: 992px) {\r\n    .lis-sep-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 60px 20px;\r\n    }\r\n}\r\n\r\n@media (max-width: 576px) {\r\n    .lis-separator-pro { padding: 80px 0; }\r\n    .lis-sep-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n    }\r\n    \r\n    \/* \u0641\u064a \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644\u060c \u0625\u063a\u0644\u0627\u0642 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0640 Blur \u0639\u0644\u0649 \u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0639\u0634\u0627\u0646 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0644\u0645\u0633 (Touch) *\/\r\n    .lis-sep-grid:hover .lis-sep-item {\r\n        opacity: 1;\r\n        filter: none;\r\n        transform: none;\r\n    }\r\n    .lis-sep-grid .lis-sep-item:active {\r\n        transform: scale(1.05);\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"lis-separator-pro\" id=\"lis-separator-sec\">\r\n    \r\n    <!-- \u0625\u0636\u0627\u0621\u0629 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0646\u0627\u0628\u0636\u0629 -->\r\n    <div class=\"lis-ambient-glow\"><\/div>\r\n\r\n    <div class=\"lis-sep-container\">\r\n        <div class=\"lis-sep-grid\">\r\n            \r\n            <!-- \u0627\u0644\u0645\u064a\u0632\u0629 1 -->\r\n            <div class=\"lis-sep-item\">\r\n                <div class=\"lis-holo-wrapper\">\r\n                    <div class=\"lis-data-beam\"><\/div>\r\n                    <i class=\"fa-solid fa-code lis-sep-icon\"><\/i>\r\n                    <div class=\"lis-holo-base\"><\/div>\r\n                <\/div>\r\n                <h3 class=\"lis-sep-title\">\u0628\u0631\u0645\u062c\u0629 \u0645\u062a\u062e\u0635\u0635\u0629<\/h3>\r\n            <\/div>\r\n            \r\n            <!-- \u0627\u0644\u0645\u064a\u0632\u0629 2 -->\r\n            <div class=\"lis-sep-item\">\r\n                <div class=\"lis-holo-wrapper\">\r\n                    <div class=\"lis-data-beam\"><\/div>\r\n                    <i class=\"fa-solid fa-brain lis-sep-icon\"><\/i>\r\n                    <div class=\"lis-holo-base\"><\/div>\r\n                <\/div>\r\n                <h3 class=\"lis-sep-title\">\u0630\u0643\u0627\u0621 \u0627\u0635\u0637\u0646\u0627\u0639\u064a<\/h3>\r\n            <\/div>\r\n            \r\n            <!-- \u0627\u0644\u0645\u064a\u0632\u0629 3 -->\r\n            <div class=\"lis-sep-item\">\r\n                <div class=\"lis-holo-wrapper\">\r\n                    <div class=\"lis-data-beam\"><\/div>\r\n                    <i class=\"fa-solid fa-scale-balanced lis-sep-icon\"><\/i>\r\n                    <div class=\"lis-holo-base\"><\/div>\r\n                <\/div>\r\n                <h3 class=\"lis-sep-title\">\u062e\u0628\u0631\u0629 \u0642\u0627\u0646\u0648\u0646\u064a\u0629<\/h3>\r\n            <\/div>\r\n            \r\n            <!-- \u0627\u0644\u0645\u064a\u0632\u0629 4 -->\r\n            <div class=\"lis-sep-item\">\r\n                <div class=\"lis-holo-wrapper\">\r\n                    <div class=\"lis-data-beam\"><\/div>\r\n                    <i class=\"fa-solid fa-bolt lis-sep-icon\"><\/i>\r\n                    <div class=\"lis-holo-base\"><\/div>\r\n                <\/div>\r\n                <h3 class=\"lis-sep-title\">\u0643\u0641\u0627\u0621\u0629 \u062a\u0634\u063a\u064a\u0644\u064a\u0629<\/h3>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const separatorSection = document.getElementById('lis-separator-sec');\r\n    \r\n    if (separatorSection) {\r\n        const observer = new IntersectionObserver((entries, obs) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('is-visible');\r\n                    obs.unobserve(entry.target); \/\/ \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062d\u0631\u0643\u0629 \u0645\u0631\u0629 \u0648\u0627\u062d\u062f\u0629 \u0641\u0642\u0637\r\n                }\r\n            });\r\n        }, {\r\n            threshold: 0.2 \/\/ \u064a\u0628\u062f\u0623 \u0644\u0645\u0627 20% \u0645\u0646 \u0627\u0644\u0633\u0643\u0634\u0646 \u064a\u0638\u0647\u0631\r\n        });\r\n\r\n        observer.observe(separatorSection);\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a86200e elementor-widget elementor-widget-html\" data-id=\"a86200e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n.lis-systems-sec {\r\n    --lis-bg-light: #F8FAFC;\r\n    --lis-surface: #FFFFFF;\r\n    --lis-primary: #00163F;\r\n    --lis-text-body: #475569;\r\n    --lis-accent: #4da6ff;\r\n    --lis-accent-purple: #818cf8;\r\n    --lis-font: 'Almarai', sans-serif;\r\n    --lis-gradient-direction: to left;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 95px 0;\r\n    background-color: var(--lis-bg-light);\r\n    font-family: var(--lis-font);\r\n    overflow: hidden;\r\n    direction: rtl;\r\n    text-align: start;\r\n}\r\n\r\n.lis-systems-sec,\r\n.lis-systems-sec * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.lis-systems-sec.lis-lang-en {\r\n    --lis-font: 'Montserrat', Arial, sans-serif;\r\n    --lis-gradient-direction: to right;\r\n    direction: ltr;\r\n}\r\n\r\n.lis-systems-sec::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: radial-gradient(rgba(0, 22, 63, 0.03) 1.5px, transparent 1.5px);\r\n    background-size: 30px 30px;\r\n    z-index: 1;\r\n}\r\n\r\n.lis-sys-blur-1 {\r\n    position: absolute;\r\n    top: -10%;\r\n    inset-inline-end: -10%;\r\n    width: 500px;\r\n    height: 500px;\r\n    background: radial-gradient(circle, rgba(77, 166, 255, 0.08) 0%, transparent 70%);\r\n    filter: blur(50px);\r\n    z-index: 1;\r\n    animation: lis-sys-float-glow 8s infinite alternate ease-in-out;\r\n}\r\n\r\n.lis-sys-blur-2 {\r\n    position: absolute;\r\n    bottom: -10%;\r\n    inset-inline-start: -10%;\r\n    width: 600px;\r\n    height: 600px;\r\n    background: radial-gradient(circle, rgba(129, 140, 248, 0.06) 0%, transparent 70%);\r\n    filter: blur(60px);\r\n    z-index: 1;\r\n    animation: lis-sys-float-glow 12s infinite alternate-reverse ease-in-out;\r\n}\r\n\r\n.lis-sys-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 5%;\r\n    position: relative;\r\n    z-index: 10;\r\n}\r\n\r\n.lis-sys-header {\r\n    text-align: center;\r\n    margin-bottom: 55px;\r\n}\r\n\r\n.lis-sys-tag {\r\n    display: inline-block;\r\n    color: var(--lis-accent);\r\n    font-size: clamp(0.72rem, 1vw, 0.8rem);\r\n    font-weight: 800;\r\n    letter-spacing: 0.8px;\r\n    background: rgba(77, 166, 255, 0.1);\r\n    padding: 6px 18px;\r\n    border-radius: 50px;\r\n    margin-bottom: 12px;\r\n    transform: translateY(20px);\r\n    opacity: 0;\r\n    animation: lis-sys-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n}\r\n\r\n.lis-systems-sec.lis-lang-ar .lis-sys-tag {\r\n    letter-spacing: 0;\r\n}\r\n\r\n.lis-sys-title {\r\n    color: var(--lis-primary);\r\n    font-size: clamp(1.75rem, 3vw, 2.2rem);\r\n    font-weight: 800;\r\n    line-height: 1.25;\r\n    margin: 0;\r\n    transform: translateY(20px);\r\n    opacity: 0;\r\n    animation: lis-sys-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;\r\n}\r\n\r\n.lis-sys-grid {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    perspective: 1000px;\r\n}\r\n\r\n.lis-sys-card {\r\n    background: rgba(255, 255, 255, 0.75);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    border: 1px solid rgba(255, 255, 255, 0.6);\r\n    border-radius: 30px;\r\n    padding: 44px 40px;\r\n    width: 100%;\r\n    max-width: 460px;\r\n    position: relative;\r\n    text-align: start;\r\n    box-shadow:\r\n        0 10px 40px rgba(0, 22, 63, 0.02),\r\n        inset 0 1px 1px rgba(255, 255, 255, 0.8);\r\n    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n    opacity: 0;\r\n    transform: translateY(40px) rotateX(5deg);\r\n}\r\n\r\n.lis-sys-visible .lis-sys-card {\r\n    animation: lis-sys-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;\r\n}\r\n\r\n.lis-sys-card:hover {\r\n    transform: translateY(-12px) rotateX(0deg) scale(1.015);\r\n    box-shadow:\r\n        0 34px 70px rgba(0, 22, 63, 0.08),\r\n        0 0 36px rgba(77, 166, 255, 0.14);\r\n    border-color: rgba(77, 166, 255, 0.4);\r\n}\r\n\r\n.lis-sys-badge {\r\n    position: absolute;\r\n    top: 32px;\r\n    inset-inline-start: auto;\r\n    inset-inline-end: 40px;\r\n    font-size: clamp(0.68rem, 1vw, 0.74rem);\r\n    font-weight: 800;\r\n    color: #fff;\r\n    background: linear-gradient(135deg, var(--lis-primary) 0%, var(--lis-accent-purple) 100%);\r\n    padding: 6px 14px;\r\n    border-radius: 30px;\r\n    box-shadow: 0 4px 15px rgba(0, 22, 63, 0.15);\r\n    z-index: 3;\r\n    white-space: nowrap;\r\n}\r\n\r\n.lis-sys-card::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50px;\r\n    inset-inline-end: -50px;\r\n    width: 170px;\r\n    height: 170px;\r\n    background: radial-gradient(circle, rgba(77, 166, 255, 0.12) 0%, transparent 70%);\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n}\r\n\r\n.lis-sys-icon {\r\n    width: 66px;\r\n    height: 66px;\r\n    background: #fff;\r\n    border-radius: 18px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.65rem;\r\n    color: var(--lis-primary);\r\n    margin-bottom: 30px;\r\n    margin-inline-start: 0;\r\n    margin-inline-end: auto;\r\n    box-shadow: 0 8px 20px rgba(0, 22, 63, 0.04);\r\n    border: 1px solid rgba(0, 22, 63, 0.02);\r\n    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.lis-sys-card:hover .lis-sys-icon {\r\n    background: var(--lis-primary);\r\n    color: #fff;\r\n    transform: scale(1.08) rotate(-6deg);\r\n    box-shadow:\r\n        0 18px 34px rgba(0, 22, 63, 0.2),\r\n        0 0 18px rgba(77, 166, 255, 0.4);\r\n}\r\n\r\n.lis-systems-sec.lis-lang-ar .lis-sys-card:hover .lis-sys-icon {\r\n    transform: scale(1.08) rotate(6deg);\r\n}\r\n\r\n.lis-sys-name {\r\n    color: var(--lis-primary);\r\n    font-size: clamp(1.45rem, 2.4vw, 1.75rem);\r\n    font-weight: 800;\r\n    line-height: 1.2;\r\n    margin: 0 0 12px 0;\r\n    letter-spacing: -0.4px;\r\n}\r\n\r\n\/* \u062d\u0644 \u0645\u0634\u0643\u0644\u0629 \u0639\u0644\u0627\u0645\u0629 + \u0641\u064a \u0627\u0644\u0639\u0631\u0628\u064a \u0648\u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a *\/\r\n.lis-product-name {\r\n    direction: ltr;\r\n    unicode-bidi: isolate;\r\n    display: inline-block;\r\n}\r\n\r\n.lis-sys-desc {\r\n    color: var(--lis-text-body);\r\n    font-size: clamp(0.92rem, 1.5vw, 1rem);\r\n    line-height: 1.75;\r\n    margin: 0 0 34px 0;\r\n    font-weight: 400;\r\n    overflow-wrap: break-word;\r\n}\r\n\r\n.lis-progress-container {\r\n    width: 100%;\r\n}\r\n\r\n.lis-progress-info {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 14px;\r\n    font-size: clamp(0.76rem, 1vw, 0.84rem);\r\n    color: var(--lis-primary);\r\n    font-weight: 800;\r\n    margin-bottom: 11px;\r\n}\r\n\r\n.lis-progress-bar-bg {\r\n    width: 100%;\r\n    height: 7px;\r\n    background: rgba(0, 22, 63, 0.05);\r\n    border-radius: 20px;\r\n    overflow: visible;\r\n    position: relative;\r\n}\r\n\r\n.lis-progress-bar-fill {\r\n    position: absolute;\r\n    top: 0;\r\n    height: 100%;\r\n    width: 0%;\r\n    background: linear-gradient(var(--lis-gradient-direction), var(--lis-primary) 0%, rgba(77, 166, 255, 1) 100%);\r\n    border-radius: 20px;\r\n    box-shadow: 0 0 12px rgba(77, 166, 255, 0.5);\r\n    transition: width 2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;\r\n}\r\n\r\n.lis-systems-sec.lis-lang-ar .lis-progress-bar-fill {\r\n    right: 0;\r\n    left: auto;\r\n}\r\n\r\n.lis-systems-sec.lis-lang-en .lis-progress-bar-fill {\r\n    left: 0;\r\n    right: auto;\r\n}\r\n\r\n.lis-progress-bar-fill::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    width: 13px;\r\n    height: 13px;\r\n    background: #fff;\r\n    border: 3px solid rgba(77, 166, 255, 1);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 10px rgba(77, 166, 255, 1);\r\n}\r\n\r\n.lis-systems-sec.lis-lang-ar .lis-progress-bar-fill::after {\r\n    left: -6.5px;\r\n    right: auto;\r\n}\r\n\r\n.lis-systems-sec.lis-lang-en .lis-progress-bar-fill::after {\r\n    right: -6.5px;\r\n    left: auto;\r\n}\r\n\r\n.lis-sys-visible .lis-progress-bar-fill {\r\n    width: 15%;\r\n}\r\n\r\n.lis-sys-visible .lis-progress-bar-fill::after {\r\n    animation: lis-sys-pulse 1.5s infinite alternate ease-in-out;\r\n}\r\n\r\n@keyframes lis-sys-fade-up {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(40px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes lis-sys-float-glow {\r\n    0% {\r\n        transform: translate(0, 0) scale(1);\r\n    }\r\n\r\n    100% {\r\n        transform: translate(-30px, 20px) scale(1.1);\r\n    }\r\n}\r\n\r\n@keyframes lis-sys-pulse {\r\n    0% {\r\n        box-shadow: 0 0 0 0 rgba(77, 166, 255, 0.7);\r\n    }\r\n\r\n    100% {\r\n        box-shadow: 0 0 0 9px rgba(77, 166, 255, 0);\r\n    }\r\n}\r\n\r\n@media (max-width: 992px) {\r\n    .lis-systems-sec {\r\n        padding: 85px 0;\r\n    }\r\n\r\n    .lis-sys-header {\r\n        margin-bottom: 48px;\r\n    }\r\n\r\n    .lis-sys-card {\r\n        max-width: 440px;\r\n        padding: 40px 34px;\r\n    }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .lis-systems-sec {\r\n        padding: 70px 0;\r\n    }\r\n\r\n    .lis-sys-container {\r\n        padding: 0 18px;\r\n    }\r\n\r\n    .lis-sys-header {\r\n        margin-bottom: 38px;\r\n    }\r\n\r\n    .lis-sys-card {\r\n        max-width: 100%;\r\n        padding: 38px 28px;\r\n        border-radius: 26px;\r\n    }\r\n\r\n    .lis-sys-badge {\r\n        top: 24px;\r\n        inset-inline-end: 28px;\r\n    }\r\n\r\n    .lis-sys-icon {\r\n        width: 60px;\r\n        height: 60px;\r\n        font-size: 1.45rem;\r\n        border-radius: 16px;\r\n        margin-bottom: 26px;\r\n    }\r\n\r\n    .lis-sys-card:hover {\r\n        transform: translateY(-8px) scale(1.01);\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .lis-systems-sec {\r\n        padding: 60px 0;\r\n    }\r\n\r\n    .lis-sys-container {\r\n        padding: 0 14px;\r\n    }\r\n\r\n    .lis-sys-header {\r\n        margin-bottom: 32px;\r\n    }\r\n\r\n    .lis-sys-card {\r\n        padding: 34px 22px;\r\n        border-radius: 24px;\r\n    }\r\n\r\n    .lis-sys-badge {\r\n        top: 22px;\r\n        inset-inline-end: 22px;\r\n        padding: 5px 12px;\r\n    }\r\n\r\n    .lis-sys-icon {\r\n        width: 56px;\r\n        height: 56px;\r\n        font-size: 1.35rem;\r\n        margin-top: 18px;\r\n        margin-bottom: 24px;\r\n    }\r\n\r\n    .lis-sys-desc {\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .lis-progress-info {\r\n        font-size: 0.76rem;\r\n    }\r\n}\r\n\r\n@media (max-width: 360px) {\r\n    .lis-sys-card {\r\n        padding: 32px 18px;\r\n    }\r\n\r\n    .lis-sys-badge {\r\n        inset-inline-end: 18px;\r\n    }\r\n\r\n    .lis-sys-icon {\r\n        width: 52px;\r\n        height: 52px;\r\n        font-size: 1.25rem;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section\r\n    class=\"lis-systems-sec\"\r\n    id=\"lis-systems-sec\"\r\n    data-default-lang=\"ar\"\r\n>\r\n    <div class=\"lis-sys-blur-1\"><\/div>\r\n    <div class=\"lis-sys-blur-2\"><\/div>\r\n\r\n    <div class=\"lis-sys-container\">\r\n\r\n        <div class=\"lis-sys-header\">\r\n            <span\r\n                class=\"lis-sys-tag lis-i18n\"\r\n                data-ar=\"\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0630\u0643\u064a\u0629\"\r\n                data-en=\"Smart Products\"\r\n            >\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0630\u0643\u064a\u0629<\/span>\r\n\r\n            <h2\r\n                class=\"lis-sys-title lis-i18n\"\r\n                data-ar=\"\u0623\u0646\u0638\u0645\u062a\u0646\u0627\"\r\n                data-en=\"Our Systems\"\r\n            >\u0623\u0646\u0638\u0645\u062a\u0646\u0627<\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"lis-sys-grid\">\r\n\r\n            <div class=\"lis-sys-card\">\r\n                <span\r\n                    class=\"lis-sys-badge lis-i18n\"\r\n                    data-ar=\"\u0642\u064a\u062f \u0627\u0644\u062a\u0637\u0648\u064a\u0631\"\r\n                    data-en=\"Under Development\"\r\n                >\u0642\u064a\u062f \u0627\u0644\u062a\u0637\u0648\u064a\u0631<\/span>\r\n\r\n                <div class=\"lis-sys-icon\">\r\n                    <i class=\"fa-solid fa-layer-group\"><\/i>\r\n                <\/div>\r\n\r\n                <h3 class=\"lis-sys-name\">\r\n                    <span class=\"lis-product-name\">Briefa+<\/span>\r\n                <\/h3>\r\n\r\n                <p\r\n                    class=\"lis-sys-desc lis-i18n\"\r\n                    data-ar=\"\u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u0623\u0648\u0644 \u0648\u0627\u0644\u0630\u064a \u064a\u0645\u062b\u0644 \u0627\u0644\u0645\u0631\u062d\u0644\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 \u0641\u064a \u0633\u064a\u0631 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u060c \u0646\u0638\u0627\u0645 \u064a\u062e\u062a\u0635\u0631 \u0639\u0644\u064a\u0643 \u0627\u0644\u0643\u062b\u064a\u0631 \u0648\u064a\u062e\u0644\u0635 \u0645\u0639 \u0639\u0645\u0644\u0627\u0626\u0643 \u0648\u064a\u062c\u0647\u0632\u0643 \u0644\u0644\u0645\u0647\u0645\u0629 \u0623\u0648 \u0627\u0644\u0642\u0636\u064a\u0629.\"\r\n                    data-en=\"The first system, representing the first stage in the legal workflow. A system that saves you a lot of time, helps you handle matters with your clients, and prepares you for the task or case.\"\r\n                >\u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u0623\u0648\u0644 \u0648\u0627\u0644\u0630\u064a \u064a\u0645\u062b\u0644 \u0627\u0644\u0645\u0631\u062d\u0644\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 \u0641\u064a \u0633\u064a\u0631 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u060c \u0646\u0638\u0627\u0645 \u064a\u062e\u062a\u0635\u0631 \u0639\u0644\u064a\u0643 \u0627\u0644\u0643\u062b\u064a\u0631 \u0648\u064a\u062e\u0644\u0635 \u0645\u0639 \u0639\u0645\u0644\u0627\u0626\u0643 \u0648\u064a\u062c\u0647\u0632\u0643 \u0644\u0644\u0645\u0647\u0645\u0629 \u0623\u0648 \u0627\u0644\u0642\u0636\u064a\u0629.<\/p>\r\n\r\n                <div class=\"lis-progress-container\">\r\n                    <div class=\"lis-progress-info\">\r\n                        <span\r\n                            class=\"lis-i18n\"\r\n                            data-ar=\"\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062c\u0627\u0647\u0632\u064a\u0629\"\r\n                            data-en=\"Readiness Level\"\r\n                        >\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062c\u0627\u0647\u0632\u064a\u0629<\/span>\r\n                        <span>15%<\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"lis-progress-bar-bg\">\r\n                        <div class=\"lis-progress-bar-fill\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n    const sysSection = document.getElementById('lis-systems-sec');\r\n\r\n    if (!sysSection) {\r\n        return;\r\n    }\r\n\r\n    function lisDetectLanguage() {\r\n        const htmlLang = (document.documentElement.getAttribute('lang') || '').toLowerCase();\r\n        const path = window.location.pathname.toLowerCase();\r\n        const defaultLang = sysSection.getAttribute('data-default-lang') || 'ar';\r\n\r\n        if (htmlLang.startsWith('ar')) {\r\n            return 'ar';\r\n        }\r\n\r\n        if (htmlLang.startsWith('en')) {\r\n            return 'en';\r\n        }\r\n\r\n        if (path === '\/ar' || path.startsWith('\/ar\/')) {\r\n            return 'ar';\r\n        }\r\n\r\n        if (path === '\/en' || path.startsWith('\/en\/')) {\r\n            return 'en';\r\n        }\r\n\r\n        return defaultLang;\r\n    }\r\n\r\n    const currentLang = lisDetectLanguage();\r\n\r\n    sysSection.classList.add(currentLang === 'en' ? 'lis-lang-en' : 'lis-lang-ar');\r\n    sysSection.setAttribute('dir', currentLang === 'en' ? 'ltr' : 'rtl');\r\n    sysSection.setAttribute('lang', currentLang);\r\n\r\n    const translatableElements = sysSection.querySelectorAll('.lis-i18n');\r\n\r\n    translatableElements.forEach(function (element) {\r\n        const translatedText = element.getAttribute('data-' + currentLang);\r\n\r\n        if (translatedText) {\r\n            element.textContent = translatedText;\r\n        }\r\n    });\r\n\r\n    const observer = new IntersectionObserver((entries, obs) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.classList.add('lis-sys-visible');\r\n                obs.unobserve(entry.target);\r\n            }\r\n        });\r\n    }, {\r\n        threshold: 0.15\r\n    });\r\n\r\n    observer.observe(sysSection);\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5176a8 elementor-widget elementor-widget-html\" data-id=\"d5176a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n.lis-distinction-sec {\r\n    \/* \u0627\u0644\u0623\u0644\u0648\u0627\u0646 - \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0641\u0627\u062a\u062d\u0629 *\/\r\n    --lis-bg-light: #F8FAFC;        \r\n    --lis-surface: #FFFFFF;         \r\n    --lis-primary: #00163F;         \r\n    --lis-text-body: #475569;       \r\n    --lis-accent-glow: #4da6ff;     \r\n    \r\n    \/* \u0627\u0644\u062e\u0637\u0648\u0637 *\/\r\n    --lis-font: 'Almarai', sans-serif;\r\n    \r\n    position: relative;\r\n    width: 100%;\r\n    padding: 100px 0;\r\n    background-color: var(--lis-bg-light);\r\n    font-family: var(--lis-font);\r\n    overflow: hidden;\r\n}\r\n\r\n\/* \u0634\u0628\u0643\u0629 \u0647\u0646\u062f\u0633\u064a\u0629 \u062e\u0644\u0641\u064a\u0629 \u062e\u0641\u064a\u0641\u0629 \u062c\u062f\u0627\u064b *\/\r\n.lis-distinction-sec::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: radial-gradient(rgba(0, 22, 63, 0.04) 1px, transparent 1px);\r\n    background-size: 40px 40px;\r\n    z-index: 1;\r\n}\r\n\r\n.lis-dist-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 5%;\r\n    position: relative;\r\n    z-index: 10;\r\n    display: grid;\r\n    grid-template-columns: 1.2fr 1fr;\r\n    gap: 60px;\r\n    align-items: center;\r\n}\r\n\r\n\/* --- \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0623\u064a\u0645\u0646: \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0646\u0635\u064a \u0648\u0627\u0644\u062e\u0637\u0648\u0627\u062a --- *\/\r\n.lis-dist-content {\r\n    opacity: 0;\r\n    transform: translateX(30px);\r\n    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.lis-dist-sec-tag {\r\n    display: inline-block;\r\n    color: var(--lis-accent-glow);\r\n    font-size: 0.85rem;\r\n    font-weight: 800;\r\n    letter-spacing: 1px;\r\n    background: rgba(77, 166, 255, 0.1);\r\n    padding: 6px 15px;\r\n    border-radius: 50px;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.lis-dist-title {\r\n    color: var(--lis-primary);\r\n    font-size: 2.2rem;\r\n    font-weight: 800;\r\n    line-height: 1.4;\r\n    margin: 0 0 30px 0;\r\n}\r\n\r\n\/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u062e\u0637\u0648\u0627\u062a \u0627\u0644\u062b\u0644\u0627\u062b *\/\r\n.lis-steps-wrapper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 25px;\r\n    position: relative;\r\n}\r\n\r\n.lis-step-item {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    position: relative;\r\n    padding: 20px;\r\n    background: var(--lis-surface);\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(0, 22, 63, 0.05);\r\n    box-shadow: 0 10px 30px rgba(0, 22, 63, 0.02);\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.lis-step-item:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 15px 40px rgba(0, 22, 63, 0.06);\r\n    border-color: rgba(77, 166, 255, 0.2);\r\n}\r\n\r\n.lis-step-num {\r\n    width: 45px;\r\n    height: 45px;\r\n    background: var(--lis-primary);\r\n    color: #fff;\r\n    border-radius: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.2rem;\r\n    font-weight: 800;\r\n    flex-shrink: 0;\r\n    \/* \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u062c\u0648\u0647\u0631\u064a \u0644\u0644\u0645\u0633\u0627\u0641\u0627\u062a: *\/\r\n    margin-inline-end: 20px;\r\n    box-shadow: 0 5px 15px rgba(0, 22, 63, 0.15);\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.lis-step-item:hover .lis-step-num {\r\n    background: var(--lis-accent-glow);\r\n    transform: scale(1.1) rotate(-5deg);\r\n}\r\n\r\n.lis-step-text-content h3 {\r\n    color: var(--lis-primary);\r\n    font-size: 1.2rem;\r\n    font-weight: 800;\r\n    margin: 0 0 8px 0;\r\n}\r\n\r\n.lis-step-text-content p {\r\n    color: var(--lis-text-body);\r\n    font-size: 1rem;\r\n    line-height: 1.8;\r\n    margin: 0;\r\n}\r\n\r\n.lis-highlight {\r\n    color: var(--lis-primary);\r\n    font-weight: 700;\r\n    background: linear-gradient(120deg, rgba(77, 166, 255, 0.2) 0%, rgba(77, 166, 255, 0) 100%);\r\n    padding: 0 5px;\r\n    border-radius: 4px;\r\n}\r\n\r\n\/* --- \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0623\u064a\u0633\u0631: \u0627\u0644\u0625\u0646\u0641\u0648\u062c\u0631\u0627\u0641\u064a\u0643 --- *\/\r\n.lis-dist-visual {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 520px;\r\n    background: var(--lis-surface);\r\n    border-radius: 20px;\r\n    box-shadow: 0 20px 50px rgba(0, 22, 63, 0.05);\r\n    border: 1px solid rgba(0, 22, 63, 0.05);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 50px 20px;\r\n    overflow: hidden;\r\n    opacity: 0;\r\n    transform: translateX(-30px);\r\n    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;\r\n    cursor: pointer;\r\n}\r\n\r\n\/* \u0645\u0633\u0627\u0631 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0631\u0643\u0632\u064a *\/\r\n.lis-data-path {\r\n    position: absolute;\r\n    top: 120px;\r\n    bottom: 120px;\r\n    width: 2px;\r\n    background: rgba(0, 22, 63, 0.1);\r\n    z-index: 1;\r\n}\r\n\r\n.lis-data-pulse {\r\n    position: absolute;\r\n    top: 0;\r\n    \/* \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u062c\u0648\u0647\u0631\u064a \u0644\u0644\u0646\u0628\u0636\u0629: *\/\r\n    inset-inline-start: -1px;\r\n    width: 4px;\r\n    height: 30px;\r\n    background: var(--lis-accent-glow);\r\n    border-radius: 4px;\r\n    box-shadow: 0 0 10px var(--lis-accent-glow);\r\n    animation: lis-data-flow 2s infinite linear;\r\n    opacity: 0;\r\n}\r\n\r\n\/* \u0643\u062a\u0644\u0629 \u0627\u0644\u0640 AI \u0627\u0644\u0639\u0627\u0645 *\/\r\n.lis-ai-block {\r\n    position: relative;\r\n    z-index: 2;\r\n    text-align: center;\r\n}\r\n\r\n.lis-ai-icon-box {\r\n    width: 70px;\r\n    height: 70px;\r\n    border-radius: 50%;\r\n    background: rgba(0, 22, 63, 0.03);\r\n    border: 2px dashed rgba(0, 22, 63, 0.2);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.5rem;\r\n    color: var(--lis-text-body);\r\n    margin: 0 auto 10px;\r\n    position: relative;\r\n}\r\n\r\n\/* \u0627\u0644\u062f\u0648\u0627\u0626\u0631 \u0627\u0644\u0645\u0634\u062a\u062a\u0629 - \u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a \u0644\u0645\u0646\u0637\u0642\u064a\u0629 *\/\r\n.lis-scatter-dot {\r\n    position: absolute;\r\n    width: 8px;\r\n    height: 8px;\r\n    background: #cbd5e1;\r\n    border-radius: 50%;\r\n    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n.lis-dot-1 { top: -15px; inset-inline-end: -10px; animation: lis-float 3s infinite alternate; }\r\n.lis-dot-2 { bottom: 10px; inset-inline-start: -20px; animation: lis-float 4s infinite alternate-reverse; }\r\n.lis-dot-3 { top: 20px; inset-inline-end: -25px; animation: lis-float 2.5s infinite alternate; }\r\n.lis-dot-4 { top: -10px; inset-inline-start: -5px; animation: lis-float 3.5s infinite alternate-reverse; }\r\n\r\n.lis-visual-label {\r\n    font-size: 0.95rem;\r\n    font-weight: 700;\r\n    color: var(--lis-text-body);\r\n}\r\n\r\n\/* \u0643\u062a\u0644\u0629 \u0623\u0646\u0638\u0645\u0629 LIS *\/\r\n.lis-lis-block {\r\n    position: relative;\r\n    z-index: 2;\r\n    text-align: center;\r\n}\r\n\r\n.lis-lis-icon-box {\r\n    width: 85px;\r\n    height: 85px;\r\n    border-radius: 16px;\r\n    background: var(--lis-primary);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0 auto 10px;\r\n    box-shadow: 0 10px 25px rgba(0, 22, 63, 0.2);\r\n    transition: all 0.5s ease;\r\n    position: relative;\r\n}\r\n\r\n.lis-lis-icon-box img {\r\n    max-width: 65%;\r\n    max-height: 65%;\r\n    object-fit: contain;\r\n    position: relative;\r\n    z-index: 5;\r\n    transition: transform 0.5s ease;\r\n}\r\n\r\n.lis-lis-icon-box::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: -5px;\r\n    border-radius: 20px;\r\n    border: 1px solid var(--lis-accent-glow);\r\n    opacity: 0;\r\n    transform: scale(0.8);\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.lis-lis-block .lis-visual-label {\r\n    color: var(--lis-primary);\r\n    font-size: 1.05rem;\r\n}\r\n\r\n\/* \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u0645\u0627\u0648\u0633 \u0644\u0644\u0631\u0633\u0645 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a *\/\r\n.lis-dist-visual:hover .lis-data-pulse { opacity: 1; }\r\n.lis-dist-visual:hover .lis-scatter-dot {\r\n    top: 50%; \r\n    inset-inline-start: 50%; \r\n    transform: translate(-50%, -50%) scale(0);\r\n    opacity: 0; \r\n    background: var(--lis-accent-glow);\r\n}\r\n.lis-dist-visual:hover .lis-ai-icon-box { border-color: rgba(0, 22, 63, 0.1); color: rgba(0, 22, 63, 0.3); }\r\n.lis-dist-visual:hover .lis-lis-icon-box { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(77, 166, 255, 0.3); }\r\n.lis-dist-visual:hover .lis-lis-icon-box img { transform: scale(1.15); }\r\n.lis-dist-visual:hover .lis-lis-icon-box::before {\r\n    opacity: 1; transform: scale(1); animation: lis-ping-border 1.5s infinite cubic-bezier(0, 0, 0.2, 1);\r\n}\r\n\r\n\/* \u0643\u0644\u0627\u0633\u0627\u062a \u0627\u0644\u062a\u0641\u0639\u064a\u0644 \u0639\u0646\u062f \u0627\u0644\u062a\u0645\u0631\u064a\u0631 *\/\r\n.lis-dist-visible .lis-dist-content { opacity: 1; transform: translateX(0); }\r\n.lis-dist-visible .lis-dist-visual { opacity: 1; transform: translateX(0); }\r\n\r\n\/* \u0627\u0644\u0627\u0646\u064a\u0645\u064a\u0634\u0646\u0632 *\/\r\n@keyframes lis-data-flow { 0% { top: 10%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 90%; opacity: 0; } }\r\n@keyframes lis-float { 0% { transform: translateY(0px) translateX(0px); } 100% { transform: translateY(-8px) translateX(5px); } }\r\n@keyframes lis-ping-border { 75%, 100% { transform: scale(1.3); opacity: 0; } }\r\n\r\n@media (max-width: 992px) {\r\n    .lis-dist-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n    }\r\n    .lis-dist-visual {\r\n        height: 450px;\r\n        order: -1;\r\n    }\r\n    .lis-dist-title {\r\n        font-size: 1.8rem;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"lis-distinction-sec\" id=\"lis-distinction-sec\">\r\n    <div class=\"lis-dist-container\">\r\n        \r\n        <div class=\"lis-dist-content\">\r\n            <span class=\"lis-dist-sec-tag\">\u0627\u0644\u0641\u0644\u0633\u0641\u0629 \u0648\u0627\u0644\u062a\u0642\u0646\u064a\u0629<\/span>\r\n            <h2 class=\"lis-dist-title\">\u0645\u0627 \u0627\u0644\u0630\u064a \u064a\u0645\u064a\u0632 \u0623\u0646\u0638\u0645\u0629 LIS \u0639\u0646 \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0627\u0644\u0639\u0627\u0645\u061f<\/h2>\r\n            \r\n            <div class=\"lis-steps-wrapper\">\r\n                \r\n                <div class=\"lis-step-item\">\r\n                    <div class=\"lis-step-num\">1<\/div>\r\n                    <div class=\"lis-step-text-content\">\r\n                        <h3>\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0627\u0644\u0639\u0627\u0645:<\/h3>\r\n                        <p>\u0645\u0635\u0645\u0645 \u0644\u062a\u0648\u0644\u064a\u062f \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0639\u0627\u0645\u0629 \u0639\u0628\u0631 \u0645\u062c\u0627\u0644\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"lis-step-item\">\r\n                    <div class=\"lis-step-num\">2<\/div>\r\n                    <div class=\"lis-step-text-content\">\r\n                        <h3>LIS \u0628\u064f\u0646\u064a\u062a \u0628\u0637\u0631\u064a\u0642\u0629 \u0645\u062e\u062a\u0644\u0641\u0629:<\/h3>\r\n                        <p>\u0643\u0644 \u0646\u0638\u0627\u0645 \u062f\u0627\u062e\u0644 LIS \u064a\u0628\u062f\u0623 <span class=\"lis-highlight\">\u0628\u0628\u0631\u0645\u062c\u0629 \u0645\u062a\u062e\u0635\u0635\u0629<\/span> \u0635\u064f\u0645\u0645\u062a \u0644\u0645\u0639\u0627\u0644\u062c\u0629 \u062a\u062d\u062f\u064d \u0642\u0627\u0646\u0648\u0646\u064a \u0645\u062d\u062f\u062f \u0628\u062f\u0642\u0629 \u0648\u0647\u064a\u0643\u0644\u0629 \u0648\u0648\u0636\u0648\u062d \u0639\u0645\u0644\u064a. \u062b\u0645 \u064a\u062a\u0645 \u062f\u0645\u062c \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0644\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0648\u0627\u0644\u0643\u0641\u0627\u0621\u0629 \u0648\u0627\u062a\u062e\u0627\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u060c \u0648\u0644\u064a\u0633 \u0644\u0627\u0633\u062a\u0628\u062f\u0627\u0644 \u0627\u0644\u0646\u0638\u0627\u0645 \u0646\u0641\u0633\u0647.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"lis-step-item\">\r\n                    <div class=\"lis-step-num\">3<\/div>\r\n                    <div class=\"lis-step-text-content\">\r\n                        <h3>\u0627\u0644\u0646\u062a\u064a\u062c\u0629:<\/h3>\r\n                        <p>\u0644\u064a\u0633\u062a \u062a\u062c\u0631\u0628\u0629 \u0630\u0643\u0627\u0621 \u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0639\u0627\u0645\u0629\u060c \u0628\u0644 <span class=\"lis-highlight\">\u0646\u0638\u0627\u0645 \u0642\u0627\u0646\u0648\u0646\u064a \u0645\u062a\u062e\u0635\u0635<\/span> \u0635\u064f\u0645\u0645 \u062d\u0648\u0644 \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629 \u0644\u0644\u0645\u0645\u0627\u0631\u0633\u0629 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"lis-dist-visual\" title=\"\u0645\u0631\u0631 \u0627\u0644\u0645\u0627\u0648\u0633 \u0644\u0645\u0639\u0631\u0641\u0629 \u0643\u064a\u0641 \u062a\u0639\u0645\u0644 \u0623\u0646\u0638\u0645\u0629 LIS\">\r\n            \r\n            <div class=\"lis-data-path\">\r\n                <div class=\"lis-data-pulse\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"lis-ai-block\">\r\n                <div class=\"lis-ai-icon-box\">\r\n                    <i class=\"fa-solid fa-brain\"><\/i>\r\n                    <div class=\"lis-scatter-dot lis-dot-1\"><\/div>\r\n                    <div class=\"lis-scatter-dot lis-dot-2\"><\/div>\r\n                    <div class=\"lis-scatter-dot lis-dot-3\"><\/div>\r\n                    <div class=\"lis-scatter-dot lis-dot-4\"><\/div>\r\n                <\/div>\r\n                <div class=\"lis-visual-label\">\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0627\u0644\u0639\u0627\u0645<br><span style=\"font-size:0.75rem; font-weight:400; opacity:0.7;\">(\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0639\u0627\u0645\u0629 \u0648\u0645\u0634\u062a\u062a\u0629)<\/span><\/div>\r\n            <\/div>\r\n\r\n            <div style=\"z-index: 5; background: var(--lis-surface); padding: 5px; color: var(--lis-accent-glow); font-size: 1.3rem;\">\r\n                <i class=\"fa-solid fa-laptop-code\"><\/i>\r\n            <\/div>\r\n\r\n            <div class=\"lis-lis-block\">\r\n                <div class=\"lis-lis-icon-box\">\r\n                    <img decoding=\"async\" src=\"https:\/\/lis.sa\/wp-content\/uploads\/2026\/05\/image-18.webp\" alt=\"\u0634\u0639\u0627\u0631 LIS\">\r\n                <\/div>\r\n                <div class=\"lis-visual-label\">\u0623\u0646\u0638\u0645\u0629 LIS<br><span style=\"font-size:0.75rem; font-weight:400; opacity:0.8;\">(\u0646\u0638\u0627\u0645 \u0642\u0627\u0646\u0648\u0646\u064a \u0645\u062a\u062e\u0635\u0635)<\/span><\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const distSection = document.getElementById('lis-distinction-sec');\r\n    \r\n    if (distSection) {\r\n        const observer = new IntersectionObserver((entries, obs) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('lis-dist-visible');\r\n                    obs.unobserve(entry.target); \r\n                }\r\n            });\r\n        }, {\r\n            threshold: 0.2 \r\n        });\r\n\r\n        observer.observe(distSection);\r\n    }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b20cfd elementor-widget elementor-widget-shortcode\" data-id=\"9b20cfd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    \n    <style>\n        #lis-contact-wrap {\n            --lis-primary: #00163F;\n            --lis-accent: #4da6ff;\n            --lis-bg-light: #f8fafc;\n            --lis-white: #ffffff;\n            font-family: 'Almarai', sans-serif !important;\n            max-width: 1200px !important;\n            margin: 0 auto !important;\n            padding: 80px 5% !important;\n            box-sizing: border-box !important;\n        }\n\n        #lis-contact-wrap * {\n            box-sizing: border-box !important;\n        }\n\n        .lis-contact-head { \n            text-align: center !important; \n            margin-bottom: 60px !important; \n        }\n\n        .lis-mask-box { \n            overflow: hidden !important; \n            padding-bottom: 10px !important; \n        }\n        \n        .lis-head-tag {\n            display: inline-block !important; \n            color: var(--lis-accent) !important;\n            font-size: 0.85rem !important; \n            font-weight: 800 !important;\n            letter-spacing: 1px !important; \n            background: rgba(77,166,255,0.1) !important;\n            padding: 6px 20px !important; \n            border-radius: 50px !important; \n            margin-bottom: 20px !important;\n            transform: translateY(100%); \n            opacity: 0; \n            transition: all 0.8s ease;\n        }\n\n        .lis-head-title {\n            color: var(--lis-primary) !important; \n            font-size: 2.8rem !important; \n            font-weight: 800 !important;\n            margin: 0 0 15px 0 !important; \n            transform: translateY(100%); \n            opacity: 0; \n            transition: all 0.8s ease 0.1s;\n        }\n\n        .lis-head-desc {\n            color: #64748b !important; \n            font-size: 1.1rem !important; \n            max-width: 700px !important;\n            margin: 0 auto !important; \n            line-height: 1.8 !important; \n            transform: translateY(20px); \n            opacity: 0; \n            transition: all 0.8s ease 0.2s;\n        }\n\n        .lis-split-card {\n            display: flex !important; \n            flex-wrap: wrap !important;\n            background: var(--lis-white) !important; \n            border-radius: 24px !important;\n            box-shadow: 0 25px 60px rgba(0,22,63,0.08) !important; \n            overflow: hidden !important;\n            transform: translateY(40px); \n            opacity: 0; \n            transition: all 1s ease 0.3s;\n        }\n\n        .lis-info-side {\n            flex: 1 1 400px !important; \n            background: var(--lis-primary) !important;\n            padding: 60px 40px !important; \n            color: var(--lis-white) !important; \n            position: relative !important;\n            overflow: hidden !important;\n        }\n\n        .lis-info-side::before {\n            content: '' !important; \n            position: absolute !important; \n            top: -50% !important; \n            inset-inline-start: -50% !important;\n            width: 200% !important; \n            height: 200% !important;\n            background: radial-gradient(circle, rgba(77,166,255,0.15) 0%, transparent 60%) !important;\n            animation: lis-spin-slow 25s linear infinite !important; \n            pointer-events: none !important;\n        }\n        \n        .lis-info-box {\n            display: flex !important; \n            align-items: flex-start !important; \n            gap: 20px !important;\n            margin-bottom: 40px !important; \n            position: relative !important; \n            z-index: 2 !important;\n            inset-inline-start: 0 !important; \n            transition: inset-inline-start 0.3s ease !important;\n        }\n\n        .lis-info-box:hover { \n            inset-inline-start: 10px !important; \n        }\n        \n        .lis-info-icon-wrap {\n            width: 55px !important; \n            height: 55px !important; \n            border-radius: 14px !important;\n            background: rgba(255,255,255,0.05) !important; \n            border: 1px solid rgba(255,255,255,0.1) !important;\n            display: flex !important; \n            align-items: center !important; \n            justify-content: center !important;\n            color: var(--lis-accent) !important; \n            font-size: 1.4rem !important; \n            flex-shrink: 0 !important;\n        }\n\n        .lis-info-content h4 {\n            color: rgba(255,255,255,0.6) !important; \n            font-size: 0.9rem !important; \n            font-weight: 400 !important;\n            margin: 0 0 8px 0 !important;\n        }\n        \n        .lis-phone-number,\n        .lis-email-link,\n        .lis-location-text {\n            color: var(--lis-white) !important; \n            font-size: 1.15rem !important; \n            font-weight: 700 !important;\n            margin: 0 !important; \n            text-align: start !important; \n            display: block !important;\n            text-decoration: none !important;\n            transition: color 0.3s ease !important;\n        }\n\n        .lis-phone-number {\n            direction: ltr !important;\n        }\n\n        .lis-contact-link:hover,\n        .lis-contact-link:focus {\n            color: var(--lis-accent) !important;\n            text-decoration: none !important;\n            outline: none !important;\n        }\n\n        .lis-form-side {\n            flex: 2 1 500px !important; \n            padding: 60px 50px !important; \n            background: var(--lis-white) !important;\n        }\n\n        .lis-form-row {\n            display: flex !important; \n            gap: 20px !important; \n            margin-bottom: 25px !important; \n            flex-wrap: wrap !important;\n        }\n\n        .lis-input-wrap { \n            flex: 1 1 200px !important; \n            position: relative !important; \n            margin-bottom: 25px !important; \n        }\n        \n        #lis-contact-wrap input[type=\"text\"],\n        #lis-contact-wrap input[type=\"email\"],\n        #lis-contact-wrap input[type=\"file\"],\n        #lis-contact-wrap textarea {\n            width: 100% !important; \n            background: var(--lis-bg-light) !important;\n            border: 2px solid transparent !important; \n            border-radius: 14px !important;\n            padding: 0px 20px !important; \n            font-family: inherit !important; \n            font-size: 1rem !important;\n            color: var(--lis-primary) !important; \n            outline: none !important;\n            transition: all 0.3s ease !important; \n            box-shadow: none !important;\n        }\n        \n        #lis-contact-wrap input::placeholder, \n        #lis-contact-wrap textarea::placeholder { \n            color: #94a3b8 !important; \n            font-weight: 400 !important; \n        }\n        \n        #lis-contact-wrap input[type=\"text\"]:focus,\n        #lis-contact-wrap input[type=\"email\"]:focus,\n        #lis-contact-wrap textarea:focus {\n            background: var(--lis-white) !important; \n            border-color: var(--lis-primary) !important;\n            box-shadow: 0 10px 20px rgba(0,22,63,0.05) !important;\n        }\n\n        .lis-file-box {\n            background: var(--lis-bg-light) !important; \n            border: 2px dashed #cbd5e1 !important;\n            border-radius: 14px !important; \n            padding: 20px !important; \n            margin-bottom: 30px !important;\n            transition: all 0.3s ease !important;\n        }\n\n        .lis-file-box:hover { \n            border-color: var(--lis-accent) !important; \n            background: rgba(77,166,255,0.03) !important; \n        }\n\n        .lis-file-label {\n            display: block !important; \n            color: var(--lis-primary) !important; \n            font-weight: 700 !important;\n            margin-bottom: 10px !important; \n            font-size: 0.95rem !important;\n        }\n\n        #lis-contact-wrap input[type=\"file\"] { \n            padding: 10px !important; \n            background: transparent !important; \n        }\n\n        .lis-submit-btn {\n            display: inline-flex !important; \n            align-items: center !important; \n            justify-content: center !important;\n            gap: 12px !important; \n            width: 100% !important; \n            padding: 18px 40px !important;\n            background: var(--lis-primary) !important; \n            color: var(--lis-white) !important;\n            border: none !important; \n            border-radius: 50px !important; \n            font-family: inherit !important;\n            font-size: 1.1rem !important; \n            font-weight: 700 !important; \n            cursor: pointer !important;\n            position: relative !important; \n            overflow: hidden !important; \n            transition: all 0.4s ease !important;\n        }\n        \n        .lis-submit-btn span { \n            position: relative !important; \n            z-index: 2 !important; \n            transition: color 0.4s ease !important; \n        }\n        \n        .lis-submit-btn i { \n            position: relative !important; \n            z-index: 2 !important; \n            transition: all 0.4s ease !important; \n            inset-inline-start: 0 !important;\n        }\n        \n        .lis-submit-btn::before {\n            content: '' !important; \n            position: absolute !important; \n            top: 0 !important; \n            inset-inline-start: -120% !important;\n            width: 120% !important; \n            height: 100% !important; \n            background: var(--lis-accent) !important;\n            transform: skewX(-20deg) !important; \n            transition: inset-inline-start 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important; \n            z-index: 1 !important;\n        }\n        \n        .lis-submit-btn:hover::before { \n            inset-inline-start: -10% !important; \n        }\n\n        .lis-submit-btn:hover span, \n        .lis-submit-btn:hover i { \n            color: var(--lis-primary) !important; \n        }\n\n        .lis-submit-btn:hover i { \n            inset-inline-start: 5px !important; \n        }\n\n        .lis-form-visible .lis-head-tag, \n        .lis-form-visible .lis-head-title, \n        .lis-form-visible .lis-head-desc { \n            transform: translateY(0); \n            opacity: 1; \n        }\n\n        .lis-form-visible .lis-split-card { \n            transform: translateY(0); \n            opacity: 1; \n        }\n\n        @media (max-width: 992px) {\n            .lis-split-card { \n                flex-direction: column !important; \n            }\n\n            .lis-info-side, \n            .lis-form-side { \n                padding: 40px 30px !important; \n            }\n\n            .lis-head-title { \n                font-size: 2rem !important; \n            }\n        }\n    <\/style>\n    \n    <div id=\"lis-contact-wrap\">\n        \n        <div class=\"lis-contact-head\">\n            <div class=\"lis-mask-box\">\n                <span class=\"lis-head-tag\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/span>\n            <\/div>\n\n            <div class=\"lis-mask-box\">\n                <h2 class=\"lis-head-title\">\u0644\u0646\u0628\u062f\u0623 \u0627\u0644\u0639\u0645\u0644 \u0645\u0639\u0627\u064b<\/h2>\n            <\/div>\n\n            <p class=\"lis-head-desc\">\n                \u0646\u062d\u0646 \u0647\u0646\u0627 \u0644\u0644\u0625\u062c\u0627\u0628\u0629 \u0639\u0644\u0649 \u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0627\u062a\u0643 \u0648\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u062f\u0639\u0645 \u0627\u0644\u062a\u0642\u0646\u064a \u0648\u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a \u0627\u0644\u0644\u0627\u0632\u0645 \u0644\u0646\u062c\u0627\u062d\u0643. \u0627\u062a\u0631\u0643 \u0631\u0633\u0627\u0644\u062a\u0643 \u0648\u0633\u0646\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u0641\u064a \u0623\u0633\u0631\u0639 \u0648\u0642\u062a.\n            <\/p>\n        <\/div>\n\n        <div class=\"lis-split-card\">\n            \n            <div class=\"lis-info-side\">\n\n                <div class=\"lis-info-box\">\n                    <div class=\"lis-info-icon-wrap\">\n                        <i class=\"fa-solid fa-phone\"><\/i>\n                    <\/div>\n\n                    <div class=\"lis-info-content\">\n                        <h4>\u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0627\u0644\u0645\u0628\u0627\u0634\u0631<\/h4>\n                        <a class=\"lis-phone-number lis-contact-link\" href=\"tel:+966501219955\">\n                            0501219955\n                        <\/a>\n                    <\/div>\n                <\/div>\n\n                <div class=\"lis-info-box\">\n                    <div class=\"lis-info-icon-wrap\">\n                        <i class=\"fa-brands fa-whatsapp\"><\/i>\n                    <\/div>\n\n                    <div class=\"lis-info-content\">\n                        <h4>\u0648\u0627\u062a\u0633\u0627\u0628<\/h4>\n                        <a \n                            class=\"lis-phone-number lis-contact-link\" \n                            href=\"https:\/\/wa.me\/966501219955\" \n                            target=\"_blank\" \n                            rel=\"noopener noreferrer\"\n                        >\n                            0501219955\n                        <\/a>\n                    <\/div>\n                <\/div>\n\n                <div class=\"lis-info-box\">\n                    <div class=\"lis-info-icon-wrap\">\n                        <i class=\"fa-solid fa-envelope\"><\/i>\n                    <\/div>\n\n                    <div class=\"lis-info-content\">\n                        <h4>\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/h4>\n                        <a class=\"lis-email-link lis-contact-link\" href=\"mailto:info@lis.sa\">\n                            info@lis.sa\n                        <\/a>\n                    <\/div>\n                <\/div>\n\n                <div class=\"lis-info-box\">\n                    <div class=\"lis-info-icon-wrap\">\n                        <i class=\"fa-solid fa-location-dot\"><\/i>\n                    <\/div>\n\n                    <div class=\"lis-info-content\">\n                        <h4>\u0627\u0644\u0645\u0642\u0631 \u0627\u0644\u0631\u0626\u064a\u0633\u064a<\/h4>\n                        <p class=\"lis-location-text\">\u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/p>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n\n            <div class=\"lis-form-side\">\n                <form method=\"post\" enctype=\"multipart\/form-data\">\n                    <input type=\"hidden\" id=\"lis_contact_nonce\" name=\"lis_contact_nonce\" value=\"5dfdf29ba2\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/15\" \/>                    \n                    \n                    <div class=\"lis-form-row\">\n                        <div class=\"lis-input-wrap\" style=\"margin-bottom:0 !important;\">\n                            <input type=\"text\" name=\"name\" placeholder=\"\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0631\u064a\u0645\" required>\n                        <\/div>\n\n                        <div class=\"lis-input-wrap\" style=\"margin-bottom:0 !important;\">\n                            <input type=\"text\" name=\"phone\" placeholder=\"\u0631\u0642\u0645 \u0627\u0644\u062c\u0648\u0627\u0644\" required>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"lis-input-wrap\">\n                        <input type=\"email\" name=\"email\" placeholder=\"\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\" required>\n                    <\/div>\n                    \n                    <div class=\"lis-input-wrap\">\n                        <textarea name=\"message\" rows=\"4\" placeholder=\"\u0643\u064a\u0641 \u064a\u0645\u0643\u0646\u0646\u0627 \u0645\u0633\u0627\u0639\u062f\u062a\u0643\u061f \u062a\u0641\u0636\u0644 \u0628\u0643\u062a\u0627\u0628\u0629 \u0631\u0633\u0627\u0644\u062a\u0643 \u0647\u0646\u0627...\" required><\/textarea>\n                    <\/div>\n                    \n                    <div class=\"lis-file-box\">\n                        <label class=\"lis-file-label\">\n                            <i class=\"fa-solid fa-paperclip\" style=\"margin-inline-end:8px; color:var(--lis-accent);\"><\/i> \n                            \u0625\u0631\u0641\u0627\u0642 \u0645\u0644\u0641 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)\n                        <\/label>\n\n                        <input type=\"file\" name=\"attachment\">\n                    <\/div>\n                    \n                    <button type=\"submit\" name=\"lis_submit\" class=\"lis-submit-btn\">\n                        <span>\u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0637\u0644\u0628 \u0627\u0644\u0622\u0646<\/span>\n                        <i class=\"fa-solid fa-arrow-left\"><\/i>\n                    <\/button>\n                <\/form>\n            <\/div>\n            \n        <\/div>\n    <\/div>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            const formWrap = document.getElementById('lis-contact-wrap');\n\n            if (formWrap) {\n                const observer = new IntersectionObserver((entries, obs) => {\n                    entries.forEach(entry => {\n                        if (entry.isIntersecting) {\n                            entry.target.classList.add('lis-form-visible');\n                            obs.unobserve(entry.target); \n                        }\n                    });\n                }, { threshold: 0.1 });\n\n                observer.observe(formWrap);\n            }\n        });\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>LIS &#8211; Legal Intelligence Systems \u0623\u0646\u0638\u0645\u0629 \u0630\u0643\u064a\u0629 \u0645\u0635\u0645\u0645\u0629 \u0644\u0644\u0645\u062d\u0627\u0645\u064a \u0627\u0644\u062d\u062f\u064a\u062b \u062d\u0644\u0648\u0644 \u0642\u0627\u0646\u0648\u0646\u064a\u0629 \u062a\u0642\u0646\u064a\u0629 \u0628\u064f\u0646\u064a\u062a \u0645\u0646 \u0648\u0627\u0642\u0639 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629\u060c \u062a\u062c\u0645\u0639 \u0628\u064a\u0646 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":124,"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/pages\/15\/revisions\/328"}],"wp:attachment":[{"href":"https:\/\/lis.sa\/en\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}