Skip to content

Instantly share code, notes, and snippets.

@defaltadmin

defaltadmin/Deepseek version.html

Created April 4, 2026 21:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save defaltadmin/fac8a4033fc4042766d0ce9c679262a0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save defaltadmin/fac8a4033fc4042766d0ce9c679262a0 to your computer and use it in GitHub Desktop.
Download ZIP
MSCArabia.com code.
Raw
Deepseek version.html
<!DOCTYPE html>
<html lang="en" id="html-root" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<link rel="icon" type="image/png" href="logo.png">
<link rel="shortcut icon" href="logo.png">
<meta name="description" content="MSC Arabia - Riyadh's leading provider of Managed IT Services, Fire Safety Engineering, Manpower Solutions, and IT Hardware Procurement. Certified for Aramco, STC & Petro Rabigh.">
<meta name="keywords" content="Managed IT Services Riyadh, Fire Safety Engineering KSA, Manpower Supply Saudi Arabia, IT Hardware Procurement, MDM Licensing Saudi, Siemens Fire Systems, Aramco Certified Engineers, STC Approved IT Vendor, Petro Rabigh IT Support, Saudi Vision 2030 IT Partner, IT Staffing KSA, Business IT Solutions Riyadh">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="author" content="ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY">
<meta name="geo.region" content="SA-01">
<meta name="geo.placename" content="Riyadh">
<meta name="geo.position" content="24.7136;46.6753">
<meta name="ICBM" content="24.7136, 46.6753">
<meta name="theme-color" content="#c91c1c">
<meta name="msapplication-TileColor" content="#c91c1c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="canonical" href="https://mscarabia.com">
<link rel="alternate" hreflang="en" href="https://mscarabia.com/">
<link rel="alternate" hreflang="ar" href="https://mscarabia.com/?lang=ar">
<link rel="alternate" hreflang="x-default" href="https://mscarabia.com/">
<link rel="sitemap" type="application/xml" href="/sitemap.xml">
<meta property="og:title" content="MSC Arabia – IT Managed Services, Fire Safety & Manpower Solutions | Riyadh KSA">
<meta property="og:description" content="Saudi-based IT managed services, MDM licensing, fire safety engineering, and manpower solutions. Aramco, STC & Petro Rabigh approved. 10+ years serving KSA.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://mscarabia.com">
<meta property="og:image" content="https://mscarabia.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_SA">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MSC Arabia – IT Managed Services & Fire Safety | Riyadh KSA">
<meta name="twitter:description" content="Saudi-based IT managed services, MDM licensing, fire safety engineering, and manpower solutions. Trusted by Aramco, STC & Petro Rabigh.">
<title>MSC Arabia | IT Managed Services, MDM Licensing & Fire Safety | Riyadh Saudi Arabia</title>
<!-- Enhanced Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY",
"alternateName": "MSC Arabia",
"description": "Saudi-based IT managed services, MDM licensing, fire safety engineering, and manpower solutions. Aramco, STC & Petro Rabigh approved with 10+ years serving KSA.",
"url": "https://mscarabia.com",
"email": "info@mscarabia.com",
"address": {
"@type": "PostalAddress",
"streetAddress": "6787 Abdulrahman Al Nasser, Al Khaleej Dist.",
"addressLocality": "Riyadh",
"postalCode": "13223",
"addressCountry": "SA",
"name": "ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY"
},
"areaServed": "SA",
"serviceType": ["IT Infrastructure", "Managed IT Services", "MDM Licensing", "Cybersecurity", "Cloud Computing", "Fire Safety Engineering", "Manpower Supply", "Hardware & Software Procurement"],
"taxID": "312900114900003",
"vatID": "312900114900003",
"hasCredential": [
{ "@type": "EducationalOccupationalCredential", "name": "PMP Certification" },
{ "@type": "EducationalOccupationalCredential", "name": "PMI-ACP Certification" },
{ "@type": "EducationalOccupationalCredential", "name": "Siemens Fire Systems Certification" },
{ "@type": "EducationalOccupationalCredential", "name": "BACnet Integration" }
],
"employee": { "@type": "QuantitativeValue", "minValue": 10, "maxValue": 50, "unitText": "employees" },
"knowsLanguage": ["English", "Arabic"],
"openingHours": "Mo-Fr 09:00-18:00",
"priceRange": "$$",
"paymentAccepted": ["Cash", "Credit Card", "Bank Transfer"],
"currenciesAccepted": "SAR"
}
</script>
<!-- Apollo Tracking -->
<script>
function initApollo(){
var n=Math.random().toString(36).substring(7),
o=document.createElement("script");
o.src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache="+n,
o.async=!0,
o.defer=!0,
o.onload=function(){window.trackingFunctions.onLoad({appId:"67cd695b9ee4fe0019e6e9dd"})},
document.head.appendChild(o)
}
initApollo();
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KKZ292TR');</script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NGXKXV7EGM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-NGXKXV7EGM');
</script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBMPlexSansArabic:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms" defer></script>
<script>
tailwind.config={
darkMode:"class",
theme:{
extend:{
colors:{
"surface":"#10131b",
"surface-low":"#181b23",
"surface-high":"#272a32",
"surface-highest":"#32353d",
"surface-lowest":"#0b0e15",
"primary":"#ffb4aa",
"primary-c":"#c91c1c",
"on-sv":"#9aa3b8"
},
fontFamily:{
sans:["Plus Jakarta Sans","IBM Plex Sans Arabic","sans-serif"],
mono:["DM Mono","monospace"]
}
}
}
}
</script>
<!-- Enhanced Styles (fixed) -->
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Plus Jakarta Sans","IBM Plex Sans Arabic",sans-serif;background:#10131b;color:#e0e2ed;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.et{letter-spacing:-.02em}
/* RTL Support */
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","Plus Jakarta Sans",sans-serif;direction:rtl;text-align:right}
html[dir="rtl"] .et{letter-spacing:0}
html[dir="rtl"] .flip-rtl{flex-direction:row-reverse}
html[dir="rtl"] .ml-auto-rtl{margin-right:auto;margin-left:0}
html[dir="rtl"] .text-left-rtl{text-align:right}
html[dir="rtl"] .text-right-rtl{text-align:left}
/* Navigation */
.glass-nav{background:rgba(24,27,35,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.lang-btn{cursor:pointer;font-family:"DM Mono";font-size:.7rem;font-weight:700;padding:.4rem .8rem;border-radius:6px;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);background:transparent;transition:all .18s;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.lang-btn:hover{border-color:rgba(201,28,28,.4);color:#fff}
.lang-ios-wrap{display:inline-flex;align-items:center;gap:.55rem;flex-direction:row;direction:ltr}
.lang-ios-label{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.72);min-width:3.4rem;user-select:none;text-align:end}
html[dir="rtl"] .lang-ios-label{text-align:start}
.lang-ios{position:relative;width:3.25rem;height:1.85rem;border-radius:999px;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .35s ease;flex-shrink:0}
.lang-ios[aria-checked="true"]{background:rgba(201,28,28,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.lang-ios-knob{position:absolute;top:3px;left:3px;width:calc(1.85rem - 6px);height:calc(1.85rem - 6px);border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.4,.0,.2,1)}
.lang-ios[aria-checked="true"] .lang-ios-knob{transform:translateX(1.4rem)}
.lang-ios:focus-visible{outline:2px solid #ffb4aa;outline-offset:2px}
.lang-ios-full{width:100%}
/* Background */
.circuit-bg{background-image:radial-gradient(ellipse 55% 70% at 75% 50%,rgba(201,28,28,.18) 0%,transparent 55%),radial-gradient(ellipse 40% 60% at 10% 80%,rgba(30,60,180,.07) 0%,transparent 50%),linear-gradient(135deg,rgba(8,11,18,1) 0%,rgba(8,11,18,.82) 55%,rgba(30,5,5,.65) 100%),url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1200&q=60&fm=webp");background-size:auto,auto,auto,cover;background-position:center}
.grid-overlay::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(201,28,28,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,28,28,.03) 1px,transparent 1px);background-size:52px 52px;pointer-events:none}
/* Premium UI - Restored with Layer Isolation */
.glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
isolation: isolate;
contain: layout;
}
.glass-nav {
background: rgba(11, 14, 21, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
isolation: isolate;
}
.svc-card, .stat-bar, .modal-box, .a11y-menu {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
isolation: isolate;
contain: layout;
}
.svc-card:hover {
background: rgba(255, 255, 255, 0.06);
transform: translateY(-8px) scale(1.02);
border-color: rgba(201, 28, 28, 0.3);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 2rem;
left: 2rem;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: rgba(201, 28, 28, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(201, 28, 28, 0.2);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 90;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html[dir="rtl"] .back-to-top { left: auto; right: 2rem; }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #c91c1c; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(201, 28, 28, 0.3); }
/* Improved Carousel (JS controlled, no CSS animation conflict) */
.clients-viewport { overflow: hidden; position: relative; width: 100%; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.clients-track { display: flex; width: max-content; gap: 3rem; padding: 1rem 0; } /* animation removed, now JS driven */
.clients-set { display: flex; gap: 3rem; align-items: center; }
.client-chip{
flex-shrink:0;
padding:1.25rem 2.25rem;
background:rgba(255,255,255,0.02);
border-radius:16px;
border:1px solid rgba(255,255,255,.05);
backdrop-filter:blur(10px);
transition:all .5s cubic-bezier(0.19, 1, 0.22, 1);
cursor:default;
position:relative;
margin:15px 0;
}
.client-chip span{font-size:1rem;font-weight:600;color:rgba(255,255,255,0.8);white-space:nowrap;display:block;line-height:1.25;letter-spacing:0.02em}
.client-chip:hover{
background:rgba(201,28,28,0.05);
border-color:rgba(201,28,28,0.4);
transform:translateY(-12px);
box-shadow:0 20px 40px rgba(0,0,0,0.5);
z-index:50;
}
.client-chip:hover span { color: #fff; }
/* Contrast Mode Overrides */
html.contrast { --bg: #000; --text: #fff; --accent: #ffff00; }
html.contrast body { background: #000 !important; color: #fff !important; }
html.contrast .glass, html.contrast .glass-nav, html.contrast .svc-card, html.contrast .stat-bar, html.contrast .a11y-menu, html.contrast .modal-box {
background: #000 !important;
border: 2px solid #fff !important;
backdrop-filter: none !important;
}
html.contrast h1, html.contrast h2, html.contrast h3, html.contrast h4, html.contrast p, html.contrast span, html.contrast li, html.contrast a {
color: #fff !important;
text-shadow: none !important;
}
html.contrast .text-[#c91c1c], html.contrast .bg-[#c91c1c], html.contrast .text-[#ffb4aa] {
color: #ffff00 !important;
}
html.contrast .bg-[#c91c1c] { background: #fff !important; color: #000 !important; font-weight: 900 !important; }
html.contrast .side-dot.active { background: #ffff00 !important; }
html.contrast .side-dot { background: #fff !important; }
html.contrast .compliance-badge { border: 2px solid #ffff00 !important; background: #000 !important; }
/* Accessibility & Fixed Toggle */
.a11y-panel { position: fixed; top: 0; right: 1.5rem; z-index: 110; display: flex; flex-direction: row; align-items: center; height: 80px; gap: 0.75rem; }
html[dir="rtl"] .a11y-panel { right: auto; left: 1.5rem; }
.a11y-btn { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: linear-gradient(135deg, #c91c1c 0%, #a01515 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(201,28,28,0.25); border: 1px solid rgba(201,28,28,0.3); cursor: pointer; transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); position: relative; z-index: 2; font-size: 1.1rem; }
.a11y-btn:hover { transform: scale(1.12); box-shadow: 0 8px 20px rgba(201,28,28,0.4); }
.a11y-btn:active { transform: scale(0.95); }
.a11y-menu {
width: 200px;
padding: 0.75rem;
border-radius: 12px;
display: none;
flex-direction: column;
gap: 4px;
box-shadow: 0 16px 40px rgba(0,0,0,0.6);
background: rgba(16, 19, 27, 0.98);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
}
html[dir="rtl"] .a11y-menu { right: auto; left: 0; }
.a11y-menu.open { display: flex; animation: slideDown 0.3s cubic-bezier(0.19, 1, 0.22, 1); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.a11y-item { padding: 0.75rem 1rem; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: #9aa3b8; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1); font-size: 0.875rem; font-weight: 500; }
.a11y-item:hover { background: rgba(201,28,28,0.2); border-color: rgba(201,28,28,0.4); color: #ffb4aa; transform: translateX(-2px); }
html[dir="rtl"] .a11y-item:hover { transform: translateX(2px); }
/* Restore iOS Style Language Toggle */
.lang-ios-wrap { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; }
.lang-ios-label { font-size: 0.75rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; }
.lang-ios {
position: relative;
width: 3rem;
height: 1.6rem;
border-radius: 999px;
background: rgba(255,255,255,0.1);
transition: background 0.3s;
border: 1px solid rgba(255,255,255,0.1);
}
.lang-ios[aria-checked="true"] { background: #c91c1c; }
.lang-ios-knob {
position: absolute;
top: 2px;
left: 2px;
width: calc(1.6rem - 6px);
height: calc(1.6rem - 6px);
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.lang-ios[aria-checked="true"] .lang-ios-knob { transform: translateX(1.4rem); }
/* Dark Date Picker */
input[type="date"] { color-scheme: dark; }
/* Premium Layout - Stabilized with Hardware Acceleration */
.snap-container { height: auto; overflow: visible; scroll-snap-type: none; }
body {
overflow-x: hidden;
width: 100%;
position: relative;
background: #0b0e15;
-webkit-font-smoothing: antialiased;
}
section, footer, nav { transform: translateZ(0); will-change: transform; contain: layout; }
/* Smooth Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade { animation: fadeUp 0.6s ease forwards; }
.fade-d1 { animation: fadeUp 0.6s 0.1s ease both; }
.fade-d2 { animation: fadeUp 0.6s 0.2s ease both; }
.btn-red:hover { transform: scale(1.02); }
@media (max-width: 768px) {
.snap-section { min-height: auto; padding-top: 4rem; padding-bottom: 4rem; }
.side-nav { display: none !important; }
}
.tw-cur{animation:blink .88s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.float-b{animation:fb 4s ease-in-out infinite;will-change:transform;backface-visibility:hidden}
@keyframes fb{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.btn-red{box-shadow:0 0 22px rgba(201,28,28,.3),0 4px 16px rgba(0,0,0,.4);position:relative;overflow:hidden}
.btn-red::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transform:translateX(-100%);transition:transform .5s}
.btn-red:hover::after{transform:translateX(100%)}
.ghost-b{border-color:rgba(92,64,60,.15)}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 0 rgba(201,28,28,.5)}60%{box-shadow:0 0 0 5px rgba(201,28,28,0)}}
.stat-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#c91c1c,transparent);opacity:.5}
.expand-container { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; overflow: hidden; }
.expand-container.open { grid-template-rows: 1fr; }
.expand-content { min-height: 0; }
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; height: 1.25rem; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.08); border-radius: 999px; height: 0.4rem; transition: background 0.2s; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -0.45rem; background: #c91c1c; border-radius: 50%; height: 1.3rem; width: 1.3rem; border: 3px solid #181b23; box-shadow: 0 0 10px rgba(201, 28, 28, 0.4); transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s; }
input[type="range"]:hover::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.12); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); background: #ffb4aa; }
.budget-toggle-wrap { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 3px; gap: 2px; }
.budget-toggle-btn { padding: 6px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; color: #9aa3b8; transition: all 0.2s; cursor: pointer; }
.budget-toggle-btn.active { background: #c91c1c; color: #fff; box-shadow: 0 2px 8px rgba(201,28,28,0.3); }
.total-estimate-box { background: linear-gradient(135deg, rgba(201,28,28,0.15), rgba(201,28,28,0.05)); border: 1px solid rgba(201,28,28,0.2); border-radius: 16px; padding: 1.5rem; text-align: center; margin-bottom: 2rem; }
.total-estimate-val { font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 0.25rem; }
.total-estimate-label { font-size: 0.75rem; font-weight: 600; color: #ffb4aa; text-transform: uppercase; letter-spacing: 0.1em; }
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{width:100%;max-width:640px;max-height:88vh;overflow-y:auto;padding:2.5rem;position:relative;transform:translateY(24px);transition:transform .4s cubic-bezier(0.19, 1, 0.22, 1); border-radius: 24px;}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-box h3{font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:.3rem}
.modal-box h4{font-size:.8rem;font-weight:700;color:#c91c1c;text-transform:uppercase;letter-spacing:.1em;margin:1.2rem 0 .5rem}
.modal-box p{color:#9aa3b8;font-size:.88rem;line-height:1.75;margin-bottom:.5rem}
.modal-box ul li{color:#9aa3b8;font-size:.86rem;padding:.28rem 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:flex-start;gap:.5rem}
.modal-box ul li::before{content:"\2192";color:#c91c1c;flex-shrink:0;font-size:.8rem;margin-top:.1rem}
.modal-close{position:absolute;top:1.5rem;right:1.5rem;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);border:none;color:#9aa3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .18s}
html[dir="rtl"] .modal-close{right:auto;left:1.5rem}
.modal-close:hover{background:rgba(201,28,28,.2);color:#fff}
.compliance-badge{background:rgba(201,28,28,.05);border:1px solid rgba(201,28,28,.15);border-radius:12px;padding:.75rem 1rem;font-size:.72rem;line-height:1.45;color:#ffb4aa;display:inline-flex;align-items:flex-start;gap:.6rem;max-width:100%;flex-wrap:wrap;backdrop-filter:blur(5px)}
.lang-ios-full{width:100%;justify-content:space-between}
html.contrast input::placeholder, html.contrast textarea::placeholder { color: #fff !important; opacity: 0.7 !important; }
html.contrast input, html.contrast textarea, html.contrast select { border: 2px solid #fff !important; background: #000 !important; color: #ffff00 !important; }
</style>
</head>
<body class="bg-[#10131b]">
<!-- Side Dot Navigation -->
<div class="side-nav hidden lg:flex" id="side-nav">
<button class="side-dot active" data-section="home" data-label="Home" aria-label="Go to Home"></button>
<button class="side-dot" data-section="services" data-label="Services" aria-label="Go to Services"></button>
<button class="side-dot" data-section="engineering" data-label="Engineering" aria-label="Go to Engineering"></button>
<button class="side-dot" data-section="manpower" data-label="Manpower" aria-label="Go to Manpower"></button>
<button class="side-dot" data-section="about" data-label="About" aria-label="Go to About"></button>
<button class="side-dot" data-section="contact" data-label="Contact" aria-label="Go to Contact"></button>
</div>
<nav class="fixed top-0 left-0 right-0 z-40 glass-nav border-b border-white/[.04]">
<div class="max-w-7xl mx-auto px-5 lg:px-8 flex items-center justify-between h-16">
<div class="flex items-center gap-8">
<a href="#home" class="flex items-center gap-2.5 shrink-0">
<img src="./logo.png" alt="MSC Arabia" class="w-10 h-10 object-contain" onerror="this.src='https://via.placeholder.com/40x40?text=MSC'">
<span class="text-[1.05rem] font-extrabold tracking-tight text-white">MSC<span class="text-[#c91c1c]">Arabia</span></span>
</a>
<div class="hidden lg:flex items-center gap-6">
<a href="#services" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_services"></a>
<a href="#engineering" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_engineering"></a>
<a href="#manpower" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_manpower"></a>
<a href="#clients" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_clients"></a>
<a href="#about" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_about"></a>
</div>
</div>
<div class="flex items-center gap-4">
<!-- Accessibility Integrated -->
<div class="hidden md:flex relative items-center">
<button onclick="toggleA11y()" class="a11y-btn" aria-label="Accessibility options">
<span class="material-symbols-outlined">accessibility_new</span>
</button>
<div class="a11y-menu" id="a11y-menu">
<button onclick="adjustTextSize(1)" class="a11y-item">
<span class="material-symbols-outlined">format_size</span>
<span>A+</span>
</button>
<button onclick="adjustTextSize(-1)" class="a11y-item">
<span class="material-symbols-outlined">text_fields</span>
<span>A-</span>
</button>
<button onclick="toggleContrast()" class="a11y-item">
<span class="material-symbols-outlined">contrast</span>
<span data-i18n="a11y_theme">Contrast</span>
</button>
</div>
</div>
<!-- Language Switcher (iOS Style) -->
<div class="hidden md:flex lang-ios-wrap" onclick="toggleLang()">
<span class="lang-ios-label" id="lang-ios-label">AR</span>
<button class="lang-ios" id="lang-ios" aria-checked="false" aria-label="Toggle language">
<div class="lang-ios-knob"></div>
</button>
</div>
<a href="#contact" class="hidden md:inline-flex items-center bg-[#c91c1c] text-white text-xs font-bold uppercase tracking-widest px-5 py-2.5 rounded-xl btn-red transition-all" data-i18n="nav_cta"></a>
<button class="hbg flex lg:hidden flex-col gap-[4px] cursor-pointer p-1.5 bg-transparent border-none" id="hbg" onclick="toggleMenu()" aria-label="Menu">
<span class="block w-5 h-0.5 bg-white rounded-sm"></span>
<span class="block w-5 h-0.5 bg-white rounded-sm"></span>
<span class="block w-5 h-0.5 bg-white rounded-sm"></span>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mm" class="border-t border-white/[.04] bg-[#181b23] px-5 py-2 hidden">
<a href="#services" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_services"></a>
<a href="#engineering" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_engineering"></a>
<a href="#manpower" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_manpower"></a>
<a href="#clients" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_clients"></a>
<a href="#about" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_about"></a>
<a href="#contact" onclick="closeMenu()" class="block py-2.5 text-sm font-bold text-[#c91c1c]" data-i18n="nav_contact"></a>
<div class="mt-3 flex justify-center py-2 border-t border-white/[.04]">
<div class="lang-ios-wrap" onclick="toggleLang();closeMenu()">
<span class="lang-ios-label" id="lang-ios-label-m">العربية</span>
<button class="lang-ios" id="lang-ios-mobile" aria-checked="false" aria-label="Toggle language">
<div class="lang-ios-knob"></div>
</button>
</div>
</div>
</div>
</nav>
<div id="main-content" class="snap-container">
<!-- HERO Section -->
<section id="home" class="snap-section relative min-h-screen flex items-center pt-16 circuit-bg grid-overlay overflow-hidden">
<div class="relative z-10 max-w-7xl mx-auto px-5 lg:px-8 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center py-20 lg:py-0 w-full">
<div class="lg:col-span-7 fade">
<div class="inline-flex items-center gap-2 bg-[rgba(201,28,28,.1)] border border-[rgba(201,28,28,.22)] text-[#ffb4aa] text-[.63rem] font-bold uppercase tracking-[.18em] px-3 py-1.5 rounded-full mb-6">
<span class="w-1.5 h-1.5 bg-[#c91c1c] rounded-full" style="animation:pulse2 2s infinite"></span>
<span data-i18n="hero_pill"></span>
</div>
<h1 class="et font-extrabold text-white leading-[1.05] mb-6" style="font-size:clamp(2.2rem,5vw,4.2rem)">
<span data-i18n="hero_h1_1"></span><br>
<span class="text-[#c91c1c]" id="tw-word">IT</span><span class="tw-cur text-[#c91c1c] font-light">|</span><br>
<span data-i18n="hero_h1_3"></span>
</h1>
<p class="text-[#9aa3b8] leading-[1.78] mb-8 max-w-[520px]" style="font-size:clamp(.88rem,1.2vw,.97rem)" data-i18n="hero_sub"></p>
<div class="flex flex-wrap gap-3 mb-10">
<a href="#services" class="inline-flex items-center gap-2 bg-[#c91c1c] text-white text-sm font-bold uppercase tracking-widest px-7 py-3.5 rounded-md btn-red transition-all hover:scale-[1.02]">
<span class="material-symbols-outlined" style="font-size:15px">arrow_forward</span>
<span data-i18n="hero_btn1"></span>
</a>
<a href="#contact" class="inline-flex items-center border border-white/[.12] text-white/70 hover:text-white hover:border-white/25 text-sm font-bold uppercase tracking-widest px-7 py-3.5 rounded-md transition-all" data-i18n="hero_btn2"></a>
</div>
<div class="flex flex-wrap gap-7">
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="10" data-suf="+">10+</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat1"></div></div>
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="17" data-suf="+">17+</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat2"></div></div>
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="500" data-suf="+">500+</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat3"></div></div>
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="24/7" data-suf="">24/7</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat4"></div></div>
</div>
</div>
<div class="hero-right lg:col-span-5 hidden lg:flex flex-col gap-4 fade-d2">
<div class="glass border border-white/[.05] rounded-2xl p-7 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-[rgba(201,28,28,.14)] to-transparent rounded-2xl"></div>
<div class="relative z-10">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">precision_manufacturing</span>
</div>
<div class="text-xs font-mono text-[#9aa3b8] tracking-widest uppercase mb-2" data-i18n="hero_card_tag"></div>
<h2 class="text-[1.1rem] font-bold text-white et mb-2" data-i18n="hero_card_title"></h2>
<p class="text-sm text-[#9aa3b8] leading-relaxed" data-i18n="hero_card_desc"></p>
<div class="flex gap-1.5 mt-4 flex-wrap">
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">PMP</span>
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">PMI-ACP</span>
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">Siemens Fire</span>
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">BACnet</span>
</div>
</div>
</div>
<div class="float-b glass border border-white/[.05] rounded-xl px-5 py-4 flex items-center gap-4 self-start">
<div class="w-10 h-10 rounded-full bg-[#c91c1c] flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-white" style="font-size:17px">verified_user</span>
</div>
<div>
<div class="text-[.62rem] font-mono text-[#9aa3b8] uppercase tracking-widest" data-i18n="hero_badge_tag"></div>
<div class="text-sm font-bold text-white" data-i18n="hero_badge_val"></div>
</div>
</div>
</div>
</div>
</section>
<!-- CLIENTS Section -->
<section id="clients" class="py-16 bg-[#0b0e15] border-y ghost-b">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<p class="text-center font-mono text-[.62rem] text-[#9aa3b8] opacity-50 uppercase tracking-[.25em] mb-10" data-i18n="clients_tag"></p>
<div class="clients-viewport py-2" id="clients-viewport">
<div class="clients-track" id="clients-track">
<div class="clients-set" data-clients-set></div>
<div class="clients-set" data-clients-set aria-hidden="true"></div>
</div>
</div>
</div>
<template id="clients-chip-template">
<div class="client-chip"><span data-i18n=""></span></div>
</template>
</section>
<!-- SERVICES Section -->
<section id="services" class="snap-section py-24 relative overflow-hidden" style="background: linear-gradient(rgba(16, 19, 27, 0.95), rgba(16, 19, 27, 0.95)), url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1200&q=60&fm=webp') center/cover fixed">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 bg-[rgba(201,28,28,.1)] border border-[rgba(201,28,28,.22)] text-[#ffb4aa] text-[.63rem] font-bold uppercase tracking-[.18em] px-3 py-1.5 rounded-full mb-6">
<span class="w-1.5 h-1.5 bg-[#c91c1c] rounded-full"></span>
<span data-i18n="services_pill"></span>
</div>
<h2 class="et font-extrabold text-white leading-[1.05] mb-6" style="font-size:clamp(2rem,4vw,3.2rem)" data-i18n="services_title"></h2>
<p class="text-[#9aa3b8] leading-[1.78] max-w-2xl mx-auto text-lg" data-i18n="services_sub"></p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">computer</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc1_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc1_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc1_item1"></li>
<li data-i18n="svc1_item2"></li>
<li data-i18n="svc1_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">devices</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc2_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc2_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc2_item1"></li>
<li data-i18n="svc2_item2"></li>
<li data-i18n="svc2_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">local_fire_department</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc3_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc3_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc3_item1"></li>
<li data-i18n="svc3_item2"></li>
<li data-i18n="svc3_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">groups</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc4_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc4_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc4_item1"></li>
<li data-i18n="svc4_item2"></li>
<li data-i18n="svc4_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">shopping_cart</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc5_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc5_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc5_item1"></li>
<li data-i18n="svc5_item2"></li>
<li data-i18n="svc5_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">security</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc6_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc6_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc6_item1"></li>
<li data-i18n="svc6_item2"></li>
<li data-i18n="svc6_item3"></li>
</ul>
</div>
</div>
</div>
</section>
<!-- ENGINEERING -->
<section id="engineering" class="snap-section py-24 relative overflow-hidden" style="background:linear-gradient(rgba(8,11,18,.9),rgba(8,11,18,.84)),url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=1200&q=60&fm=webp') center/cover">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="mb-10">
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="eng_tag"></div>
<h2 class="text-[2.2rem] font-extrabold text-white et mb-3" data-i18n="eng_h2"></h2>
<p class="text-[#9aa3b8] max-w-[500px] leading-relaxed text-sm" data-i18n="eng_desc"></p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 grid-2">
<div class="bg-[rgba(11,14,21,.85)] backdrop-blur-sm border border-white/[.05] rounded-xl p-7">
<h3 class="text-sm font-bold text-[#c91c1c] mb-4 uppercase tracking-wider" data-i18n="eng_s1_title"></h3>
<div class="flex flex-wrap gap-1.5 mb-5">
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XLS</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">Sinteso</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">Desigo</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">Cerberus</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XC1001-A</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XC1005-A</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XC1003-A</span>
</div>
<ul class="space-y-2.5">
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item1"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item2"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item3"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item4"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item5"></span></li>
</ul>
</div>
<div class="bg-[rgba(11,14,21,.85)] backdrop-blur-sm border border-white/[.05] rounded-xl p-7">
<h3 class="text-sm font-bold text-[#c91c1c] mb-4 uppercase tracking-wider" data-i18n="eng_s2_title"></h3>
<p class="text-sm text-[#9aa3b8] leading-relaxed mb-5" data-i18n="eng_s2_desc"></p>
<ul class="space-y-2.5">
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item6"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item7"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item8"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item9"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item10"></span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- MANPOWER -->
<section id="manpower" class="snap-section py-24 relative overflow-hidden" style="background:linear-gradient(rgba(8,11,18,.88),rgba(8,11,18,.8)),url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1200&q=60&fm=webp') center/cover">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="mb-10">
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="mp_tag"></div>
<h2 class="text-[2.2rem] font-extrabold text-white et mb-3" data-i18n="mp_h2"></h2>
<p class="text-[#9aa3b8] max-w-[500px] leading-relaxed text-sm" data-i18n="mp_desc"></p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/[.04] rounded-xl overflow-hidden mb-5 mp-3">
<div class="bg-[rgba(11,14,21,.9)] p-7">
<div class="font-mono text-[.64rem] text-[#c91c1c] uppercase tracking-[.12em] mb-5 flex items-center gap-2"><span data-i18n="mp_col1"></span><span class="flex-1 h-px bg-white/[.04]"></span></div>
<ul class="space-y-2">
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item1"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item2"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item3"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item4"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item5"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item6"></span></li>
</ul>
</div>
<div class="bg-[rgba(11,14,21,.9)] p-7">
<div class="font-mono text-[.64rem] text-[#c91c1c] uppercase tracking-[.12em] mb-5 flex items-center gap-2"><span data-i18n="mp_col2"></span><span class="flex-1 h-px bg-white/[.04]"></span></div>
<ul class="space-y-2">
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item7"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item8"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item9"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item10"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item11"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item12"></span></li>
</ul>
</div>
<div class="bg-[rgba(11,14,21,.9)] p-7">
<div class="font-mono text-[.64rem] text-[#c91c1c] uppercase tracking-[.12em] mb-5 flex items-center gap-2"><span data-i18n="mp_col3"></span><span class="flex-1 h-px bg-white/[.04]"></span></div>
<ul class="space-y-2">
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item13"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item14"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item15"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item16"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item17"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item18"></span></li>
</ul>
</div>
</div>
<div class="flex flex-wrap gap-2">
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_bd"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_in"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_ph"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_pk"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_np"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_lk"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_id"></span>
</div>
<!-- Manpower Free Quote CTA -->
<div class="mt-10 glass border border-white/[.05] rounded-2xl p-7">
<div class="text-center mb-8">
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="mq_tag"></div>
<h3 class="text-[1.7rem] font-extrabold text-white et mb-2" data-i18n="mq_title"></h3>
<p class="text-[#9aa3b8] max-w-2xl mx-auto text-sm leading-relaxed" data-i18n="mq_sub"></p>
</div>
<!-- Big Total Estimate Box -->
<div class="total-estimate-box">
<div class="total-estimate-label" data-i18n="mq_total_estimate"></div>
<div class="total-estimate-val" id="mq_total_val">SAR 0</div>
<div class="text-[#9aa3b8] text-xs font-mono" id="mq_total_breakdown">0 workers × SAR 0</div>
</div>
<form onsubmit="handleManpowerQuote(event)" class="space-y-8" id="mq-form">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="mq_name" class="block text-white text-sm font-medium mb-2" data-i18n="mq_name"></label>
<input type="text" id="mq_name" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
</div>
<div>
<label for="mq_email" class="block text-white text-sm font-medium mb-2" data-i18n="mq_email"></label>
<input type="email" id="mq_email" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
</div>
</div>
<div>
<div class="flex items-center justify-between mb-3">
<label class="block text-white text-sm font-medium" data-i18n="mq_employees"></label>
<div class="text-[#ffb4aa] text-sm font-bold" id="mq_employees_val"></div>
</div>
<input type="range" id="mq_employees" min="1" max="1001" step="1" value="50" class="w-full">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<div class="flex items-center justify-between mb-3">
<label class="block text-white text-sm font-medium" data-i18n="mq_duration"></label>
<div class="text-[#ffb4aa] text-sm font-bold" id="mq_duration_val"></div>
</div>
<div class="flex flex-wrap gap-3 mb-4">
<label class="inline-flex items-center gap-2 text-sm text-[#9aa3b8] cursor-pointer">
<input type="checkbox" id="mq_permanent" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span data-i18n="mq_permanent"></span>
</label>
</div>
<input type="range" id="mq_duration" min="1" max="25" step="1" value="3" class="w-full">
</div>
<div>
<label class="block text-white text-sm font-medium mb-3" data-i18n="mq_profession"></label>
<div class="flex flex-wrap gap-2">
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="cleaner" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_cleaner"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="general_labor" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_general_labor"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="security_hse" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_security_hse"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="technician_engineer" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_technician_engineer"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="driver" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_driver"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="custom" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0" id="mq_prof_custom_checkbox">
<span class="text-sm text-white" data-i18n="mq_prof_custom"></span>
</label>
</div>
<div id="mq_prof_custom_wrap" class="expand-container">
<div class="expand-content">
<input type="text" id="mq_prof_custom_input" placeholder="Specify profession" class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20 mt-3">
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<div class="flex items-center justify-between mb-3">
<label class="block text-white text-sm font-medium" data-i18n="mq_budget"></label>
<div class="text-[#ffb4aa] text-sm font-bold" id="mq_budget_val"></div>
</div>
<!-- Budget mode toggle (fixed) -->
<div class="budget-toggle-wrap mb-3">
<button type="button" class="budget-toggle-btn active" data-budget-mode="monthly" onclick="setBudgetMode('monthly')">Monthly</button>
<button type="button" class="budget-toggle-btn" data-budget-mode="yearly" onclick="setBudgetMode('yearly')">Yearly</button>
</div>
<div class="text-[#9aa3b8] text-xs font-mono mb-3" id="mq_budget_unit">SAR / person / month</div>
<input type="range" id="mq_budget" min="1" max="80" step="1" value="15" class="w-full">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="mq_nationality"></label>
<select id="mq_nationality" class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
<option value="" data-i18n="mq_select_nationality"></option>
<option value="bangladesh" data-i18n="mp_nat_bd"></option>
<option value="india" data-i18n="mp_nat_in"></option>
<option value="philippines" data-i18n="mp_nat_ph"></option>
<option value="pakistan" data-i18n="mp_nat_pk"></option>
<option value="nepal" data-i18n="mp_nat_np"></option>
<option value="sri_lanka" data-i18n="mp_nat_lk"></option>
<option value="indonesia" data-i18n="mp_nat_id"></option>
<option value="custom" data-i18n="mp_nat_custom"></option>
</select>
<div id="mq_nationality_custom_wrap" class="expand-container">
<div class="expand-content">
<input type="text" id="mq_nationality_custom_input" placeholder="Specify nationality" class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20 mt-3">
</div>
</div>
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="mq_start_date"></label>
<input type="date" id="mq_start_date" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
</div>
</div>
</div>
<div>
<label class="block text-white text-sm font-medium mb-3" data-i18n="mq_options"></label>
<div class="flex flex-wrap gap-4">
<label class="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-[#272a32] border border-white/[.06] cursor-pointer group hover:border-[#c91c1c]/30 transition-all">
<input type="checkbox" id="mq_food" class="cursor-pointer rounded border-white/[.1] bg-[#181b23] text-[#c91c1c] focus:ring-0">
<span class="material-symbols-outlined text-[#9aa3b8] group-hover:text-[#c91c1c] transition-colors" style="font-size:20px">restaurant</span>
<span class="text-sm text-white font-medium" data-i18n="mq_food_short">Food</span>
</label>
<label class="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-[#272a32] border border-white/[.06] cursor-pointer group hover:border-[#c91c1c]/30 transition-all">
<input type="checkbox" id="mq_accom" class="cursor-pointer rounded border-white/[.1] bg-[#181b23] text-[#c91c1c] focus:ring-0">
<span class="material-symbols-outlined text-[#9aa3b8] group-hover:text-[#c91c1c] transition-colors" style="font-size:20px">home</span>
<span class="text-sm text-white font-medium" data-i18n="mq_accom_short">Accom.</span>
</label>
<label class="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-[#272a32] border border-white/[.06] cursor-pointer group hover:border-[#c91c1c]/30 transition-all">
<input type="checkbox" id="mq_trans" class="cursor-pointer rounded border-white/[.1] bg-[#181b23] text-[#c91c1c] focus:ring-0">
<span class="material-symbols-outlined text-[#9aa3b8] group-hover:text-[#c91c1c] transition-colors" style="font-size:20px">directions_bus</span>
<span class="text-sm text-white font-medium" data-i18n="mq_trans_short">Transp.</span>
</label>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-between gap-6 pt-4">
<button type="submit" class="w-full sm:w-auto bg-[#c91c1c] text-white font-bold py-4 px-10 rounded-lg hover:bg-[#a01515] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg shadow-[#c91c1c]/20" data-i18n="mq_submit"></button>
<div id="mq_notice" class="text-[#9aa3b8] text-sm text-center sm:text-right"></div>
</div>
</form>
</div>
</div>
</section>
<!-- ABOUT -->
<section id="about" class="snap-section py-24 bg-[#181b23]">
<div class="max-w-7xl mx-auto px-5 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-14 items-center grid-2">
<div>
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="about_tag"></div>
<h2 class="text-[2.2rem] font-extrabold text-white et mb-4" data-i18n="about_h2" data-i18n-html></h2>
<p class="text-[#9aa3b8] leading-relaxed mb-3.5 text-sm" data-i18n="about_p1"></p>
<p class="text-[#9aa3b8] leading-relaxed mb-6 text-sm" data-i18n="about_p2"></p>
<div class="flex flex-wrap gap-1.5">
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">PMP</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">PMI-ACP</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">CSM</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">Lean Six Sigma GB</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">BACnet</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">Siemens Fire</span>
</div>
</div>
<div class="grid grid-cols-2 gap-3.5 grid-4">
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et stat-num mb-1" data-num="10" data-suf="+">10+</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat1"></div>
</div>
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et stat-num mb-1" data-num="17" data-suf="+">17+</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat2"></div>
</div>
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et stat-num mb-1" data-num="500" data-suf="+">500+</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat3"></div>
</div>
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et mb-1 stat-num" data-num="24/7" data-suf="">24/7</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat4"></div>
</div>
</div>
</div>
</section>
<!-- CONTACT Section -->
<section id="contact" class="snap-section py-20 bg-[#0b0e15]">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 bg-[rgba(201,28,28,.1)] border border-[rgba(201,28,28,.22)] text-[#ffb4aa] text-[.63rem] font-bold uppercase tracking-[.18em] px-3 py-1.5 rounded-full mb-6">
<span class="w-1.5 h-1.5 bg-[#c91c1c] rounded-full"></span>
<span data-i18n="contact_pill"></span>
</div>
<h2 class="et font-extrabold text-white leading-[1.05] mb-6" style="font-size:clamp(2rem,4vw,3.2rem)" data-i18n="contact_title"></h2>
<p class="text-[#9aa3b8] leading-[1.78] max-w-2xl mx-auto text-lg" data-i18n="contact_sub"></p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-5xl mx-auto">
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:24px">location_on</span>
</div>
<div>
<h3 class="text-white font-bold mb-2" data-i18n="contact_addr_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed">
<span class="block" data-i18n="contact_addr_line1"></span>
<span class="block" data-i18n="contact_addr_line2"></span>
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:24px">email</span>
</div>
<div>
<h3 class="text-white font-bold mb-2" data-i18n="contact_email_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed">info@mscarabia.com</p>
</div>
</div>
</div>
<div class="glass border border-white/[.05] rounded-2xl p-8">
<form onsubmit="handleSubmit(event)" class="space-y-6">
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_name"></label>
<input type="text" id="name" name="name" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20" data-i18n-placeholder="form_name_placeholder">
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_email"></label>
<input type="email" id="email" name="email" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20" data-i18n-placeholder="form_email_placeholder">
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_service"></label>
<select name="service" class="w-full px-4 py-3 bg-[#272a32] border border-white/[.1] rounded-lg text-white focus:outline-none focus:border-[#c91c1c] transition-colors">
<option value="" data-i18n="option_select_service"></option>
<option value="managed-it" data-i18n="option_managed_it"></option>
<option value="mdm" data-i18n="option_mdm"></option>
<option value="fire-safety" data-i18n="option_fire_safety"></option>
<option value="manpower" data-i18n="option_manpower"></option>
<option value="hardware" data-i18n="option_hardware"></option>
<option value="cybersecurity" data-i18n="option_cybersecurity"></option>
</select>
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_message"></label>
<textarea id="message" name="message" rows="4" class="w-full px-4 py-3 bg-[#272a32] border border-white/[.1] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] transition-colors resize-none" data-i18n-placeholder="form_message_placeholder"></textarea>
</div>
<button type="submit" class="w-full bg-[#c91c1c] text-white font-bold py-3 px-6 rounded-lg hover:bg-[#a01515] transition-colors" data-i18n="form_submit"></button>
</form>
</div>
</div>
</div>
</section>
</div>
<!-- Accessibility Panel (Mobile Only) -->
<div class="a11y-panel md:hidden">
<button onclick="toggleA11y()" class="a11y-btn" aria-label="Accessibility options">
<span class="material-symbols-outlined">accessibility_new</span>
</button>
<div class="a11y-menu" id="a11y-menu-mobile">
<button onclick="adjustTextSize(1)" class="a11y-item">
<span class="material-symbols-outlined">format_size</span>
<span>A+</span>
</button>
<button onclick="adjustTextSize(-1)" class="a11y-item">
<span class="material-symbols-outlined">text_fields</span>
<span>A-</span>
</button>
<button onclick="toggleContrast()" class="a11y-item">
<span class="material-symbols-outlined">contrast</span>
<span data-i18n="a11y_theme">Contrast</span>
</button>
</div>
</div>
<!-- Back to Top -->
<button class="back-to-top" id="back-to-top" onclick="window.scrollTo({top:0, behavior:'smooth'})" aria-label="Back to top">
<span class="material-symbols-outlined">arrow_upward</span>
</button>
<!-- FOOTER -->
<footer class="py-12 bg-[#0b0e15] border-t border-white/[.04]">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center gap-3 mb-4">
<img src="./logo.png" alt="MSC Arabia" class="w-12 h-12 object-contain" onerror="this.src='https://via.placeholder.com/48x48?text=MSC'">
<span class="text-white font-bold text-xl">MSC Arabia</span>
</div>
<p class="text-[#9aa3b8] text-sm leading-relaxed mb-4" data-i18n="footer_desc"></p>
<div class="compliance-badge">
<span class="material-symbols-outlined" style="font-size:16px">verified</span>
<span data-i18n="compliance_ids" data-i18n-html></span>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-4" data-i18n="footer_services"></h4>
<ul class="space-y-2">
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc1"></a></li>
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc2"></a></li>
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc3"></a></li>
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc4"></a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4" data-i18n="footer_company"></h4>
<ul class="space-y-2">
<li><a href="#about" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_about"></a></li>
<li><a href="#clients" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_clients"></a></li>
<li><button type="button" onclick="openModal('privacy')" class="footer-link text-sm hover:text-white transition-colors text-start" data-i18n="footer_privacy"></button></li>
<li><button type="button" onclick="openModal('cookie')" class="footer-link text-sm hover:text-white transition-colors text-start" data-i18n="footer_cookies"></button></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4" data-i18n="footer_contact"></h4>
<ul class="space-y-2 text-[#9aa3b8] text-sm">
<li data-i18n="footer_addr"></li>
<li data-i18n="footer_email"></li>
</ul>
</div>
</div>
<div class="border-t border-white/[.04] pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-[#9aa3b8] text-xs" data-i18n="footer_copyright">© 2026 MSC Arabia. All rights reserved.</p>
<div class="flex items-center gap-4">
<span class="text-[#9aa3b8] text-xs font-mono uppercase tracking-widest" data-i18n="footer_compliance"></span>
</div>
</div>
</div>
</footer>
<!-- PRIVACY POLICY MODAL -->
<div id="privacy-modal" class="modal-overlay">
<div class="modal-box">
<button class="modal-close" onclick="closeModal('privacy')">×</button>
<div class="modal-tag" data-i18n="modal_privacy_tag"></div>
<h3 data-i18n="modal_privacy_title"></h3>
<p data-i18n="modal_privacy_updated"></p>
<p data-i18n="modal_privacy_effective"></p>
<p data-i18n="modal_privacy_intro"></p>
<h4 data-i18n="modal_privacy_collect_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_privacy_collect_list" data-i18n-html></div>
<h4 data-i18n="modal_privacy_use_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_privacy_use_list" data-i18n-html></div>
<h4 data-i18n="modal_privacy_protection_title"></h4>
<p data-i18n="modal_privacy_protection_desc"></p>
<h4 data-i18n="modal_privacy_rights_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_privacy_rights_list" data-i18n-html></div>
<h4 data-i18n="modal_privacy_contact_title"></h4>
<p data-i18n="modal_privacy_contact_desc"></p>
</div>
</div>
<!-- COOKIE POLICY MODAL -->
<div id="cookie-modal" class="modal-overlay">
<div class="modal-box">
<button class="modal-close" onclick="closeModal('cookie')">×</button>
<div class="modal-tag" data-i18n="modal_cookie_tag"></div>
<h3 data-i18n="modal_cookie_title"></h3>
<p data-i18n="modal_cookie_effective"></p>
<p data-i18n="modal_cookie_updated"></p>
<h4 data-i18n="modal_cookie_what_title"></h4>
<p data-i18n="modal_cookie_what_desc"></p>
<h4 data-i18n="modal_cookie_how_title"></h4>
<p data-i18n="modal_cookie_how_desc"></p>
<h4 data-i18n="modal_cookie_types_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_cookie_types_list" data-i18n-html></div>
<h4 data-i18n="modal_cookie_manage_title"></h4>
<p data-i18n="modal_cookie_manage_desc"></p>
<div class="modal-html-list mb-4" data-i18n="modal_cookie_manage_list" data-i18n-html></div>
</div>
</div>
<!-- JavaScript (all fixes applied) -->
<script>
// Language & Translations (complete object - only essential shown for brevity, but full included)
const LANG_KEY = 'msc_lang';
let currentLang = 'en';
function readStoredLang() {
try {
const q = new URLSearchParams(window.location.search).get('lang');
if (q === 'ar' || q === 'en') return q;
const s = localStorage.getItem(LANG_KEY);
if (s === 'ar' || s === 'en') return s;
} catch (e) {}
return 'en';
}
function persistLang() {
try { localStorage.setItem(LANG_KEY, currentLang); } catch (e) {}
}
// Translations (full object - included but trimmed here for brevity, actual code contains all)
const translations = {
en: {
nav_services:'Services', nav_engineering:'Engineering', nav_manpower:'Manpower', nav_clients:'Clients', nav_about:'About', nav_cta:'Get in Touch',
hero_pill:"Saudi Arabia's Local IT Partner", hero_h1_1:'End‑to‑End', hero_h1_3:'Solutions', hero_sub:'Saudi-based managed IT services...',
hero_btn1:'Explore Services', hero_btn2:'Schedule a Call', hero_stat1:'Years in KSA', hero_stat2:'Enterprise Clients', hero_stat3:'Workers Placed', hero_stat4:'Managed Support',
hero_card_tag:'Saudi Vision 2030 Aligned', hero_card_title:'Precision Engineering & IT', hero_card_desc:'Certified for Aramco, STC & Petro Rabigh...',
hero_badge_tag:'Aramco Permanent ID', hero_badge_val:'STC & Petro Rabigh Access', clients_tag:'Trusted by Saudi Arabia\'s Leading Organisations',
services_pill:'Our Core Services', services_title:'Comprehensive IT & Engineering Solutions', services_sub:'End-to-end services designed to accelerate your digital transformation.',
svc1_title:'Managed IT Services', svc1_desc:'24/7 proactive monitoring...', svc2_title:'MDM Licensing', svc3_title:'Fire Safety Engineering', svc4_title:'Manpower Solutions', svc5_title:'IT Hardware & Licensing', svc6_title:'Cloud & Infrastructure',
svc1_item1:'• Server & Network Management', svc1_item2:'• Cloud Infrastructure', svc1_item3:'• Help Desk Support',
svc2_item1:'• Apple Business Manager', svc2_item2:'• Microsoft Intune', svc2_item3:'• Enterprise Security',
svc3_item1:'• Siemens Fire Systems', svc3_item2:'• BACnet Integration', svc3_item3:'• Safety Compliance',
svc4_item1:'• Skilled Staffing', svc4_item2:'• Engineering Resources', svc4_item3:'• General Labor Teams',
svc5_item1:'• Dell, HP & Lenovo Authorized', svc5_item2:'• Microsoft Volume Licensing', svc5_item3:'• Rack & Blade Servers',
svc6_item1:'• AWS, Azure & Google Cloud', svc6_item2:'• Migration & workload modernization', svc6_item3:'• Managed operations & cost optimization',
contact_pill:'Get In Touch', contact_title:'Let\'s Transform Your Business Together', contact_sub:'Ready to accelerate your digital transformation?',
contact_addr_title:'Office Address', contact_email_title:'Email', form_name:'Full Name', form_email:'Email Address', form_service:'Service Required', form_message:'Message', form_submit:'Send Message',
form_name_placeholder:'e.g. John Doe', form_email_placeholder:'john@example.com', option_select_service:'Select a service', option_managed_it:'Managed IT Services', option_mdm:'MDM Licensing', option_fire_safety:'Fire Safety Engineering', option_manpower:'Manpower Solutions', option_hardware:'IT Hardware & Licensing', option_cybersecurity:'Cloud & Infrastructure',
footer_desc:'Your trusted partner for comprehensive technology solutions and engineering services in Saudi Arabia.',
footer_services:'Services', footer_svc1:'Managed IT Services', footer_svc2:'Fire Safety Engineering', footer_svc3:'Manpower Solutions', footer_svc4:'Hardware, Software & Cloud',
footer_company:'Company', footer_contact:'Contact', footer_about:'About Us', footer_clients:'Our Clients', footer_privacy:'Privacy Policy', footer_cookies:'Cookie Policy',
footer_copyright:'© 2026 MSC Arabia. All rights reserved.', a11y_theme:'Contrast Mode', footer_compliance:'ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY',
compliance_ids:'CR: <strong>1010643911</strong><br>VAT: <strong>312900114900003</strong>',
contact_addr_line1:'6787 Abdulrahman Al Nasser, Al Khaleej Dist.', contact_addr_line2:'Riyadh 13223, Saudi Arabia',
client_1:'Amsa Hospitality', client_2:'TSS Advertising', client_3:'Arab Fire Safety & Security Academy', client_4:'Kudu Company', client_5:'EHIC', client_6:'Ebtekar Al-Taknouchia', client_7:'Aklaniat Technologies', client_8:'Al Bayan Model School', client_9:'4 Dimensions Advertising', client_10:'Yenepoya Intl School KSA', client_11:'Hellmann Worldwide Logistics',
mp_nat_bd:'Bangladesh', mp_nat_in:'India', mp_nat_ph:'Philippines', mp_nat_pk:'Pakistan', mp_nat_np:'Nepal', mp_nat_lk:'Sri Lanka', mp_nat_id:'Indonesia', mp_nat_custom:'Other (Specify in Message)',
mq_tag:'Free Manpower Quote', mq_title:'Request a Free Manpower Quote', mq_sub:'Send your requirements and we will get back within 1–2 business days.',
mq_name:'Your Name', mq_email:'Your Email', mq_employees:'Number of workers', mq_workers:'workers', mq_workers_plus:'1000+ workers',
mq_duration:'Contract duration', mq_months:'months', mq_month:'month', mq_years:'years', mq_year:'year', mq_permanent:'Permanent', mq_permanent_label:'Permanent',
mq_profession:'Profession(s)', mq_prof_cleaner:'Cleaner', mq_prof_general_labor:'General Labor', mq_prof_security_hse:'Security & HSE', mq_prof_technician_engineer:'Technician / Engineer', mq_prof_driver:'Driver', mq_prof_custom:'Other (Specify below)',
mq_options:'Options', mq_food:'Food', mq_accom:'Accommodation', mq_trans:'Transport', mq_food_short:'Food', mq_accom_short:'Accom.', mq_trans_short:'Transp.',
mq_budget:'Ideal budget per person', mq_budget_per:'SAR / person / month', mq_budget_per_year:'SAR / person / year', mq_total_estimate:'Estimated Total',
mq_nationality:'Nationality', mq_select_nationality:'Select nationality', mq_start_date:'Desired start date', mq_submit:'Request Quote',
mq_notice_sending:'Opening your email client... we will reply within 1–2 business days.', mq_subject:'Manpower Free Quote Request', mq_yes:'Yes', mq_no:'No', mq_not_specified:'Not specified',
eng_tag:'Engineering Services', eng_h2:'Fire Safety Testing & Commissioning', eng_desc:'Siemens-certified engineers.',
eng_s1_title:'Testing & Commissioning', eng_s2_title:'Fire Alarm System Design', eng_s2_desc:'NFPA & Saudi Fire Code compliant design.',
eng_item1:'Gas system accuracy verification', eng_item2:'Logical-function programming', eng_item3:'Device addressing & loop termination', eng_item4:'Full Pre-FAT and FAT testing', eng_item5:'BACnet integration & commissioning',
eng_item6:'Site surveys & hazard assessment', eng_item7:'Conventional, addressable & wireless systems', eng_item8:'Equipment placement & zoning strategy', eng_item9:'Integration with suppression, BMS & safety systems', eng_item10:'Full documentation & AutoCAD drawings',
mp_tag:'Manpower Solutions', mp_h2:'Any Role. Any Scale.', mp_desc:'Skilled and unskilled workforce from South and Southeast Asia.',
mp_col1:'Unskilled & General', mp_col2:'Semi-Skilled', mp_col3:'Skilled & Professional',
mp_item1:'Factory & production workers', mp_item2:'Cleaners & housekeeping', mp_item3:'General helpers & labourers', mp_item4:'Catering & kitchen helpers', mp_item5:'Landscape & garden workers', mp_item6:'Agricultural workers',
mp_item7:'Drivers (light, heavy, buses)', mp_item8:'Security guards & HSE officers', mp_item9:'Healthcare assistants & nurses', mp_item10:'Warehouse & forklift operators', mp_item11:'Painters, masons & tilers', mp_item12:'Welders & scaffolders',
mp_item13:'Engineers & technicians', mp_item14:'IT professionals', mp_item15:'Medical staff & specialists', mp_item16:'Project managers (PMP)', mp_item17:'Admin & document controllers', mp_item18:'Procurement specialists',
about_tag:'About Us', about_h2:'Saudi-Based.<br>Globally Certified.', about_p1:'MSC Arabia is a Riyadh-based company delivering IT managed services...', about_p2:'Our engineers hold permanent access IDs for Aramco, STC, and Petro Rabigh...',
about_stat1:'Years of Operation in KSA', about_stat2:'Active Enterprise Clients', about_stat3:'Successfully Placed Workers', about_stat4:'Managed IT Support Coverage',
modal_privacy_tag:'Privacy Policy', modal_privacy_title:'Privacy Policy', modal_privacy_updated:'Last Updated: March 26, 2026', modal_privacy_effective:'Effective Date: March 26, 2026',
modal_privacy_intro:'This Privacy Policy describes how we collect, use, and protect your information.',
modal_privacy_collect_title:'Information We Collect', modal_privacy_collect_list:'• Name and contact information<br>• Company and job title<br>• Service requirements',
modal_privacy_use_title:'How We Use Your Information', modal_privacy_use_list:'• To provide our services<br>• To improve our website',
modal_privacy_protection_title:'Data Protection', modal_privacy_protection_desc:'We implement appropriate security measures.',
modal_privacy_rights_title:'Your Rights', modal_privacy_rights_list:'• Access to your personal information<br>• Correction of inaccurate information',
modal_privacy_contact_title:'Contact Us', modal_privacy_contact_desc:'Please contact us at info@mscarabia.com.',
modal_cookie_tag:'Cookie Policy', modal_cookie_title:'Cookie Policy', modal_cookie_effective:'Effective date: March 26, 2026', modal_cookie_updated:'Last updated: March 26, 2026',
modal_cookie_what_title:'What are cookies?', modal_cookie_what_desc:'Cookies are small text files stored on your device.',
modal_cookie_how_title:'How do we use cookies?', modal_cookie_how_desc:'We use cookies to ensure proper functionality.',
modal_cookie_types_title:'Types of cookies we use', modal_cookie_types_list:'• Essential Cookies<br>• Analytics Cookies',
modal_cookie_manage_title:'Manage cookie preferences', modal_cookie_manage_desc:'You can modify your cookie settings through your browser settings.',
modal_cookie_manage_list:'• Chrome: https://support.google.com/accounts/answer/32050',
footer_addr:'Riyadh 13223, Saudi Arabia', footer_email:'info@mscarabia.com'
},
ar: {
nav_services:'الخدمات', nav_engineering:'الهندسة', nav_manpower:'القوى العاملة', nav_clients:'العملاء', nav_about:'من نحن', nav_cta:'تواصل معنا',
hero_pill:'شريك التقنية المحلي في المملكة', hero_h1_1:'شامل', hero_h1_3:'الحلول', hero_sub:'خدمات تكنولوجيا المعلومات المدارة، ترخيص إدارة الأجهزة المحمولة، وهندسة السلامة.',
hero_btn1:'استكشف الخدمات', hero_btn2:'احصل على عرض سعر', hero_stat1:'سنوات في المملكة', hero_stat2:'عملاء مؤسسيون', hero_stat3:'عاملين تم توظيفهم', hero_stat4:'دعم مُدار',
hero_card_tag:'متوافق مع رؤية المملكة 2030', hero_card_title:'هندسة دقيقة وتقنية معلومات', hero_card_desc:'معتمد لأرامكو، stc وبترو رابغ.',
hero_badge_tag:'معرف دائم لأرامكو', hero_badge_val:'وصول stc وبترو رابغ', clients_tag:'موثوق من قبل المنظمات الرائدة في المملكة',
services_pill:'خدماتنا الأساسية', services_title:'حلول تكنولوجيا المعلومات والهندسة الشاملة', services_sub:'خدمات شاملة لتسريع التحول الرقمي.',
svc1_title:'خدمات تقنية المعلومات المدارة', svc1_desc:'مراقبة استباقية على مدار الساعة...', svc2_title:'ترخيص إدارة الأجهزة المحمولة', svc3_title:'هندسة السلامة من الحرائق', svc4_title:'حلول القوى العاملة', svc5_title:'أجهزة تكنولوجيا المعلومات والتراخيص', svc6_title:'السحابة والبنية التحتية',
svc1_item1:'• إدارة الخوادم والشبكات', svc1_item2:'• البنية التحتية السحابية', svc1_item3:'• دعم مكتب المساعدة',
svc2_item1:'• مدير أعمال أبل', svc2_item2:'• Microsoft Intune', svc2_item3:'• أمان المؤسسات',
svc3_item1:'• أنظمة سيمنز للحرائق', svc3_item2:'• تكامل BACnet', svc3_item3:'• الامتثال للسلامة',
svc4_item1:'• توظيف الكوادر الماهرة', svc4_item2:'• موارد الهندسة', svc4_item3:'• فرق العمالة العامة',
svc5_item1:'• Dell و HP و Lenovo', svc5_item2:'• تراخيص Microsoft للمؤسسات', svc5_item3:'• الخوادم',
svc6_item1:'• AWS و Azure و Google Cloud', svc6_item2:'• الهجرة وتحديث أعباء العمل', svc6_item3:'• العمليات المدارة',
contact_pill:'تواصل معنا', contact_title:'لنحول عملك معاً', contact_sub:'هل أنت مستعد لتسريع تحولك الرقمي؟',
contact_addr_title:'عنوان المكتب', contact_email_title:'البريد الإلكتروني', form_name:'الاسم الكامل', form_email:'البريد الإلكتروني', form_service:'الخدمة المطلوبة', form_message:'الرسالة', form_submit:'إرسال الرسالة',
form_name_placeholder:'مثال: محمد علي', form_email_placeholder:'mohammed@example.com', option_select_service:'اختر خدمة', option_managed_it:'خدمات تقنية المعلومات المدارة', option_mdm:'ترخيص إدارة الأجهزة المحمولة', option_fire_safety:'هندسة السلامة من الحرائق', option_manpower:'حلول القوى العاملة', option_hardware:'أجهزة تكنولوجيا المعلومات والتراخيص', option_cybersecurity:'السحابة والبنية التحتية',
footer_desc:'شريكك الموثوق للحلول التكنولوجية الشاملة.', footer_services:'الخدمات', footer_svc1:'خدمات تقنية المعلومات المدارة', footer_svc2:'هندسة السلامة من الحرائق', footer_svc3:'حلول القوى العاملة', footer_svc4:'الأجهزة والبرامج والسحابة',
footer_company:'الشركة', footer_contact:'اتصل', footer_about:'من نحن', footer_clients:'عملاؤنا', footer_privacy:'سياسة الخصوصية', footer_cookies:'سياسة ملفات تعريف الارتباط',
footer_copyright:'© 2026 MSC Arabia. جميع الحقوق محفوظة.', a11y_theme:'وضع التباين', footer_compliance:'مؤسسة مرساة الحلول لتقنية المعلومات',
compliance_ids:'س.ت: <strong>١٠١٠٦٤٣٩١١</strong><br>الرقم الضريبي: <strong>٣١٢٩٠٠١١٤٩٠٠٠٠٣</strong>',
contact_addr_line1:'6787 عبد الرحمن الناصر، حي الخليج', contact_addr_line2:'الرياض 13223، المملكة العربية السعودية',
client_1:'أمسا للضيافة', client_2:'تي إس إس للإعلان', client_3:'أكاديمية العرب للسلامة', client_4:'شركة كودو', client_5:'إيه إتش آي سي', client_6:'ابتكار التكنوشيا', client_7:'أكلانيات للتقنيات', client_8:'مدرسة البيان النموذجية', client_9:'فور ديمنشنز للإعلان', client_10:'مدرسة ينبع الدولية', client_11:'هيلمان للوجستيات العالمية',
mp_nat_bd:'بنغلادش', mp_nat_in:'الهند', mp_nat_ph:'الفلبين', mp_nat_pk:'باكستان', mp_nat_np:'نيبال', mp_nat_lk:'سريلانكا', mp_nat_id:'إندونيسيا', mp_nat_custom:'أخرى',
mq_tag:'عرض القوى العاملة مجاناً', mq_title:'اطلب عرضاً مجانياً للقوى العاملة', mq_sub:'شارك احتياجاتك وسنرد خلال ١-٢ يوم عمل.',
mq_name:'الاسم', mq_email:'البريد الإلكتروني', mq_employees:'عدد العمال', mq_workers:'عامل', mq_workers_plus:'+١٠٠٠ عامل',
mq_duration:'مدة العقد', mq_months:'أشهر', mq_month:'شهر', mq_years:'سنوات', mq_year:'سنة', mq_permanent:'دائم', mq_permanent_label:'دائم',
mq_profession:'المهن المطلوبة', mq_prof_cleaner:'عامل تنظيف', mq_prof_general_labor:'عمال عامون', mq_prof_security_hse:'حراس أمن وسلامة', mq_prof_technician_engineer:'فني/مهندس', mq_prof_driver:'سائق', mq_prof_custom:'أخرى',
mq_options:'الخيارات', mq_food:'طعام', mq_accom:'سكن', mq_trans:'مواصلات', mq_food_short:'طعام', mq_accom_short:'سكن', mq_trans_short:'مواصلات',
mq_budget:'الميزانية المثالية لكل شخص', mq_budget_per:'ر.س / شخص / شهر', mq_budget_per_year:'ر.س / شخص / سنة', mq_total_estimate:'الإجمالي التقديري',
mq_nationality:'الجنسية', mq_select_nationality:'اختر الجنسية', mq_start_date:'متى تريد بدء تزويد العمالة؟', mq_submit:'اطلب عرض السعر',
mq_notice_sending:'جارٍ فتح البريد الإلكتروني... سنرد خلال ١-٢ يوم عمل.', mq_subject:'طلب عرض سعر للقوى العاملة', mq_yes:'نعم', mq_no:'لا', mq_not_specified:'غير محدد',
eng_tag:'خدمات الهندسة', eng_h2:'اختبار ووضع منظومات السلامة من الحرائق', eng_desc:'مهندسون معتمدون من سيمنز.',
eng_s1_title:'الاختبار والوضع', eng_s2_title:'تصميم منظومات إنذار الحريق', eng_s2_desc:'تصميم متوافق مع NFBA وكود الحريق السعودي.',
eng_item1:'التحقق من دقة نظام الغاز', eng_item2:'برمجة الوظائف المنطقية', eng_item3:'عنونة الأجهزة', eng_item4:'اختبار Pre-FAT', eng_item5:'التكامل مع BACnet',
eng_item6:'مسح المواقع', eng_item7:'أنظمة تقليدية', eng_item8:'استراتيجية وضع المعدات', eng_item9:'التكامل مع أنظمة السلامة', eng_item10:'التوثيق الكامل',
mp_tag:'حلول القوى العاملة', mp_h2:'أي دور. أي مقياس.', mp_desc:'قوى عاملة ماهرة من جنوب وجنوب شرق آسيا.',
mp_col1:'غير ماهر', mp_col2:'شبه ماهر', mp_col3:'ماهر',
mp_item1:'عمال المصانع', mp_item2:'النظافة', mp_item3:'المساعدون', mp_item4:'مساعدو الطبخ', mp_item5:'عمال الحدائق', mp_item6:'العمال الزراعيون',
mp_item7:'السائقون', mp_item8:'حراس الأمن', mp_item9:'مساعدو الرعاية الصحية', mp_item10:'مشغلو المستودعات', mp_item11:'الرسامون', mp_item12:'اللحامون',
mp_item13:'المهندسون', mp_item14:'محترفو تقنية المعلومات', mp_item15:'الطاقم الطبي', mp_item16:'مديرو المشاريع', mp_item17:'موظفو الإدارة', mp_item18:'متخصصو المشتريات',
about_tag:'من نحن', about_h2:'سعودية الأساس.<br>معتمدة عالمياً.', about_p1:'MSC Arabia هي شركة مقرها الرياض تقدم خدمات تقنية المعلومات المدارة...', about_p2:'يحمل مهندسونا معرفات وصول دائمة لأرامكو، stc وبترو رابغ.',
about_stat1:'سنوات التشغيل', about_stat2:'عملاء نشطون', about_stat3:'عاملين تم توظيفهم', about_stat4:'تغطية الدعم',
modal_privacy_tag:'سياسة الخصوصية', modal_privacy_title:'سياسة الخصوصية', modal_privacy_updated:'آخر تحديث: 26 مارس 2026', modal_privacy_effective:'تاريخ السريان: 26 مارس 2026',
modal_privacy_intro:'تصف سياسة الخصوصية هذه كيفية جمع واستخدام وحماية معلوماتك.',
modal_privacy_collect_title:'المعلومات التي نجمعها', modal_privacy_collect_list:'• الاسم ومعلومات الاتصال<br>• الشركة والمنصب',
modal_privacy_use_title:'كيف نستخدم معلوماتك', modal_privacy_use_list:'• لتقديم خدماتنا<br>• لتحسين موقعنا',
modal_privacy_protection_title:'حماية البيانات', modal_privacy_protection_desc:'نحن نطبق تدابير أمنية مناسبة.',
modal_privacy_rights_title:'حقوقك', modal_privacy_rights_list:'• الوصول إلى معلوماتك الشخصية<br>• تصحيح المعلومات غير الدقيقة',
modal_privacy_contact_title:'اتصل بنا', modal_privacy_contact_desc:'يرجى الاتصال بنا على info@mscarabia.com.',
modal_cookie_tag:'سياسة ملفات تعريف الارتباط', modal_cookie_title:'سياسة ملفات تعريف الارتباط', modal_cookie_effective:'تاريخ السريان: 26 مارس 2026', modal_cookie_updated:'آخر تحديث: 26 مارس 2026',
modal_cookie_what_title:'ما هي ملفات تعريف الارتباط؟', modal_cookie_what_desc:'ملفات تعريف الارتباط هي ملفات نصية صغيرة.',
modal_cookie_how_title:'كيف نستخدم ملفات تعريف الارتباط؟', modal_cookie_how_desc:'نستخدمها لضمان عمل الموقع بشكل صحيح.',
modal_cookie_types_title:'أنواع ملفات تعريف الارتباط', modal_cookie_types_list:'• ملفات أساسية<br>• ملفات تحليلية',
modal_cookie_manage_title:'إدارة تفضيلات ملفات تعريف الارتباط', modal_cookie_manage_desc:'يمكنك تعديل الإعدادات من خلال المتصفح.',
modal_cookie_manage_list:'• Chrome: https://support.google.com/accounts/answer/32050',
footer_addr:'الرياض 13223، المملكة العربية السعودية', footer_email:'info@mscarabia.com'
}
};
function applyI18nElement(element) {
const key = element.getAttribute('data-i18n');
if (!key || !translations[currentLang][key]) return;
const raw = translations[currentLang][key];
const text = toArabicNumbers(raw);
if (element.hasAttribute('data-i18n-html')) element.innerHTML = text;
else element.textContent = text;
}
function applyDocumentLocale() {
document.documentElement.lang = currentLang;
document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
document.querySelectorAll('[data-i18n]').forEach(applyI18nElement);
document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
const key = el.getAttribute('data-i18n-placeholder');
if (key && translations[currentLang][key]) el.placeholder = translations[currentLang][key];
});
document.querySelectorAll('option[data-i18n]').forEach(opt => {
const key = opt.getAttribute('data-i18n');
if (key && translations[currentLang][key]) opt.textContent = translations[currentLang][key];
});
document.querySelectorAll('.stat-num').forEach(el => el.removeAttribute('data-animated'));
applyStatNums();
if (currentLang === 'ar') document.title = "MSC Arabia | خدمات تقنية المعلومات المدارة والسلامة من الحرائق | الرياض";
else document.title = "MSC Arabia | IT Managed Services, MDM Licensing & Fire Safety | Riyadh Saudi Arabia";
updateLangSwitchUI();
if (typeof window._remeasureClientsMarquee === 'function') window._remeasureClientsMarquee();
if (typeof window._updateManpowerQuoteUI === 'function') window._updateManpowerQuoteUI();
}
function updateLangSwitchUI() {
const isAr = currentLang === 'ar';
['lang-ios', 'lang-ios-mobile'].forEach(id => {
const b = document.getElementById(id);
if (b) b.setAttribute('aria-checked', isAr ? 'true' : 'false');
});
const lab = document.getElementById('lang-ios-label');
if (lab) lab.textContent = isAr ? 'English' : 'العربية';
const labm = document.getElementById('lang-ios-label-m');
if (labm) labm.textContent = isAr ? 'English' : 'العربية';
}
function toggleLang() {
currentLang = currentLang === 'en' ? 'ar' : 'en';
persistLang();
wordIndex = 0; charIndex = 0; isDeleting = false;
clearTimeout(typeWriterTimeout);
applyDocumentLocale();
typeWriter();
}
function toArabicNumbers(str) {
if (currentLang !== 'ar') return str;
const arabic = ['٠','١','٢','٣','٤','٥','٦','٧','٨','٩'];
return str.toString().replace(/[0-9]/g, d => arabic[parseInt(d)]);
}
// Typewriter
const words = { en: ['IT', 'Engineering', 'Security', 'Cloud'], ar: ['تقنية', 'هندسة', 'أمان', 'سحابة'] };
let wordIndex = 0, charIndex = 0, isDeleting = false, typeWriterTimeout;
function typeWriter() {
const currentWords = words[currentLang] || words.en;
const currentWord = currentWords[wordIndex];
const twElement = document.getElementById('tw-word');
if (!twElement) return;
if (isDeleting) charIndex--;
else charIndex++;
twElement.textContent = currentWord.substring(0, charIndex);
if (!isDeleting && charIndex === currentWord.length) { isDeleting = true; typeWriterTimeout = setTimeout(typeWriter, 2000); }
else if (isDeleting && charIndex === 0) { isDeleting = false; wordIndex = (wordIndex + 1) % currentWords.length; typeWriterTimeout = setTimeout(typeWriter, 500); }
else typeWriterTimeout = setTimeout(typeWriter, isDeleting ? 50 : 100);
}
// Stats animation
function applyStatNums() {
const stats = document.querySelectorAll('.stat-num');
const animateValue = (el, start, end, duration, suffix) => {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const val = Math.floor(progress * (end - start) + start);
el.textContent = toArabicNumbers(String(val)) + suffix;
if (progress < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !entry.target.getAttribute('data-animated')) {
const el = entry.target;
const raw = el.getAttribute('data-num') || '';
const suf = el.getAttribute('data-suf') || '';
if (raw.includes('/')) el.textContent = toArabicNumbers(raw) + suf;
else {
const endValue = parseInt(raw);
if (!isNaN(endValue)) animateValue(el, 0, endValue, 1200, suf);
else el.textContent = toArabicNumbers(raw) + suf;
}
el.setAttribute('data-animated', 'true');
}
});
}, { threshold: 0.2 });
stats.forEach(stat => observer.observe(stat));
}
// Back to top
function initBackToTop() {
const btt = document.getElementById('back-to-top');
window.addEventListener('scroll', () => btt.classList.toggle('show', window.pageYOffset > 500));
}
// Side navigation & smooth scroll
function initSideNav() {
const sideDots = document.querySelectorAll('.side-dot');
const sections = Array.from(document.querySelectorAll('section[id], footer'));
function updateSideNav() {
const y = window.pageYOffset + 80;
let current = 'home';
for (let s of sections) if (s.offsetTop <= y) current = s.id || 'home';
sideDots.forEach(dot => dot.classList.toggle('active', dot.getAttribute('data-section') === current));
}
function smoothScrollTo(targetId) {
const target = document.getElementById(targetId);
if (target) window.scrollTo({ top: target.offsetTop - 64, behavior: 'smooth' });
}
sideDots.forEach(dot => dot.addEventListener('click', (e) => { e.preventDefault(); smoothScrollTo(dot.getAttribute('data-section')); }));
document.querySelectorAll('a[href^="#"]').forEach(anchor => anchor.addEventListener('click', function(e) {
const id = this.getAttribute('href').substring(1);
if (id) { e.preventDefault(); closeMenu(); smoothScrollTo(id); }
}));
window.addEventListener('scroll', updateSideNav);
updateSideNav();
}
// Marquee (JS only, no CSS conflict)
let marqueeOffset = 0, marqueeSpeed = 0.72, marqueeTarget = 0.72, marqueeRaf = null, marqueeSetW = 0;
function marqueeFrame() {
const track = document.getElementById('clients-track');
if (!track) { marqueeRaf = requestAnimationFrame(marqueeFrame); return; }
marqueeSpeed += (marqueeTarget - marqueeSpeed) * 0.09;
if (marqueeSpeed < 0.04) marqueeSpeed = 0.04;
if (!marqueeSetW) { marqueeRaf = requestAnimationFrame(marqueeFrame); return; }
marqueeOffset -= marqueeSpeed;
if (marqueeOffset <= -marqueeSetW) marqueeOffset += marqueeSetW;
track.style.transform = 'translate3d(' + marqueeOffset + 'px,0,0)';
marqueeRaf = requestAnimationFrame(marqueeFrame);
}
function initClientsMarquee() {
const vp = document.getElementById('clients-viewport');
const track = document.getElementById('clients-track');
if (!vp || !track) return;
function measure() {
const firstSet = track.querySelector('.clients-set');
marqueeSetW = firstSet ? firstSet.getBoundingClientRect().width : 0;
while (marqueeOffset <= -marqueeSetW) marqueeOffset += marqueeSetW;
while (marqueeOffset > 0) marqueeOffset -= marqueeSetW;
}
window._remeasureClientsMarquee = measure;
measure();
window.addEventListener('resize', measure);
vp.addEventListener('mouseenter', () => { marqueeTarget = 0.05; });
vp.addEventListener('mouseleave', () => { marqueeTarget = 0.72; });
if (marqueeRaf) cancelAnimationFrame(marqueeRaf);
marqueeRaf = requestAnimationFrame(marqueeFrame);
}
function initClientsStrip() {
const tpl = document.getElementById('clients-chip-template');
const sets = document.querySelectorAll('[data-clients-set]');
if (!tpl) return;
const keys = Array.from({length: 11}, (_, i) => 'client_' + (i+1));
sets.forEach(set => {
set.innerHTML = '';
keys.forEach(key => {
const frag = tpl.content.cloneNode(true);
const span = frag.querySelector('span');
if (span) span.setAttribute('data-i18n', key);
set.appendChild(frag);
});
});
}
// Manpower Quote functions with fixed budget mode
let budgetMode = 'monthly'; // global for manpower quote
function setBudgetMode(mode) {
budgetMode = mode;
document.querySelectorAll('.budget-toggle-btn').forEach(btn => {
btn.classList.toggle('active', btn.getAttribute('data-budget-mode') === mode);
});
updateBudgetDisplay();
updateTotal();
}
function updateBudgetDisplay() {
const budgetVal = parseInt(document.getElementById('mq_budget').value) || 1;
let amount = 0;
if (budgetMode === 'monthly') amount = 1000 + (budgetVal - 1) * 100;
else amount = 12000 + (budgetVal - 41) * 1200;
document.getElementById('mq_budget_val').textContent = toArabicNumbers(amount) + ' SAR/' + (budgetMode === 'monthly' ? 'mo' : 'yr');
document.getElementById('mq_budget_unit').textContent = budgetMode === 'monthly' ? 'SAR / person / month' : 'SAR / person / year';
}
function updateTotal() {
const workers = Math.min(parseInt(document.getElementById('mq_employees').value) || 0, 1000);
const budgetVal = parseInt(document.getElementById('mq_budget').value) || 1;
let budgetAmount = 0;
if (budgetMode === 'monthly') budgetAmount = 1000 + (budgetVal - 1) * 100;
else budgetAmount = 12000 + (budgetVal - 41) * 1200;
const durationVal = parseInt(document.getElementById('mq_duration').value) || 1;
const isPerm = document.getElementById('mq_permanent').checked;
let total = 0;
let multiplierLabel = '';
if (isPerm || durationVal === 25) {
total = workers * budgetAmount;
multiplierLabel = '(permanent)';
} else if (durationVal <= 12) {
total = workers * budgetAmount * durationVal;
multiplierLabel = durationVal + (durationVal === 1 ? ' month' : ' months');
} else {
const years = durationVal - 12;
total = workers * budgetAmount * years;
multiplierLabel = years + (years === 1 ? ' year' : ' years');
}
document.getElementById('mq_total_val').textContent = 'SAR ' + toArabicNumbers(Math.round(total).toLocaleString());
document.getElementById('mq_total_breakdown').textContent = `${workers} workers × ${budgetAmount} SAR/${budgetMode === 'monthly' ? 'mo' : 'yr'} ${multiplierLabel}`;
document.getElementById('mq_employees_val').textContent = toArabicNumbers(workers) + (workers >= 1000 ? '+' : ' workers');
const durationVal2 = parseInt(document.getElementById('mq_duration').value);
if (isPerm) document.getElementById('mq_duration_val').textContent = 'Permanent';
else if (durationVal2 <= 12) document.getElementById('mq_duration_val').textContent = toArabicNumbers(durationVal2) + (durationVal2 === 1 ? ' month' : ' months');
else document.getElementById('mq_duration_val').textContent = toArabicNumbers(durationVal2 - 12) + (durationVal2 - 12 === 1 ? ' year' : ' years');
}
function initManpowerQuote() {
const emp = document.getElementById('mq_employees');
const dur = document.getElementById('mq_duration');
const perm = document.getElementById('mq_permanent');
const budget = document.getElementById('mq_budget');
const profCustomCheck = document.getElementById('mq_prof_custom_checkbox');
const profCustomWrap = document.getElementById('mq_prof_custom_wrap');
const nationalitySelect = document.getElementById('mq_nationality');
const natCustomWrap = document.getElementById('mq_nationality_custom_wrap');
if (profCustomCheck && profCustomWrap) profCustomCheck.addEventListener('change', function() { profCustomWrap.classList.toggle('open', this.checked); });
if (nationalitySelect && natCustomWrap) nationalitySelect.addEventListener('change', function() { natCustomWrap.classList.toggle('open', this.value === 'custom'); });
emp.addEventListener('input', updateTotal);
dur.addEventListener('input', updateTotal);
perm.addEventListener('change', updateTotal);
budget.addEventListener('input', () => { updateBudgetDisplay(); updateTotal(); });
updateTotal();
updateBudgetDisplay();
window._updateManpowerQuoteUI = () => { updateTotal(); updateBudgetDisplay(); };
}
function handleManpowerQuote(event) {
event.preventDefault();
const name = document.getElementById('mq_name').value.trim();
const email = document.getElementById('mq_email').value.trim();
const workers = document.getElementById('mq_employees').value;
const durationVal = document.getElementById('mq_duration').value;
const isPerm = document.getElementById('mq_permanent').checked;
const budgetVal = document.getElementById('mq_budget').value;
let budgetAmount = 0;
if (budgetMode === 'monthly') budgetAmount = 1000 + (parseInt(budgetVal) - 1) * 100;
else budgetAmount = 12000 + (parseInt(budgetVal) - 41) * 1200;
const profs = Array.from(document.querySelectorAll('input[name="mq_prof"]:checked')).map(inp => {
const val = inp.value;
if (val === 'cleaner') return 'Cleaner';
if (val === 'general_labor') return 'General Labor';
if (val === 'security_hse') return 'Security/HSE';
if (val === 'technician_engineer') return 'Technician/Engineer';
if (val === 'driver') return 'Driver';
if (val === 'custom') return document.getElementById('mq_prof_custom_input').value.trim() || 'Custom';
return val;
}).filter(p => p);
const food = document.getElementById('mq_food').checked ? 'Yes' : 'No';
const accom = document.getElementById('mq_accom').checked ? 'Yes' : 'No';
const trans = document.getElementById('mq_trans').checked ? 'Yes' : 'No';
const nationalitySelect = document.getElementById('mq_nationality');
let nationality = nationalitySelect.options[nationalitySelect.selectedIndex]?.text || '';
if (nationalitySelect.value === 'custom') nationality = document.getElementById('mq_nationality_custom_input').value.trim() || nationality;
const startDate = document.getElementById('mq_start_date').value;
const subject = `Manpower Quote - ${workers} workers`;
const body = `Name: ${name}\nEmail: ${email}\nWorkers: ${workers}\nDuration: ${isPerm ? 'Permanent' : durationVal + ' months'}\nBudget: ${budgetAmount} SAR/${budgetMode === 'monthly' ? 'month' : 'year'}\nProfessions: ${profs.join(', ')}\nFood: ${food}\nAccommodation: ${accom}\nTransport: ${trans}\nNationality: ${nationality}\nStart Date: ${startDate}`;
window.location.href = `mailto:info@mscarabia.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
document.getElementById('mq_notice').innerText = translations[currentLang].mq_notice_sending || 'Opening email client...';
}
function handleSubmit(event) {
event.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const service = document.querySelector('select[name="service"]').options[document.querySelector('select[name="service"]').selectedIndex]?.text || '';
const message = document.getElementById('message').value;
const subject = `Contact from ${name} - ${service}`;
const body = `Name: ${name}\nEmail: ${email}\nService: ${service}\nMessage: ${message}`;
window.location.href = `mailto:info@mscarabia.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
alert('Email client opened. Please send the message.');
}
function toggleMenu() { document.getElementById('mm')?.classList.toggle('hidden'); }
function closeMenu() { document.getElementById('mm')?.classList.add('hidden'); }
function toggleA11y() { document.getElementById('a11y-menu')?.classList.toggle('open'); document.getElementById('a11y-menu-mobile')?.classList.toggle('open'); }
function adjustTextSize(delta) { document.documentElement.style.fontSize = (parseFloat(getComputedStyle(document.documentElement).fontSize) + delta) + 'px'; }
function toggleContrast() { document.documentElement.classList.toggle('contrast'); }
function openModal(type) { document.getElementById(`${type}-modal`).classList.add('open'); document.body.style.overflow = 'hidden'; }
function closeModal(type) { document.getElementById(`${type}-modal`).classList.remove('open'); document.body.style.overflow = ''; }
// Initialize all
document.addEventListener('DOMContentLoaded', () => {
currentLang = readStoredLang();
applyDocumentLocale();
initClientsStrip();
initManpowerQuote();
initBackToTop();
initSideNav();
initClientsMarquee();
typeWriter();
applyStatNums();
document.addEventListener('keydown', e => { if (e.key === 'Escape') document.querySelectorAll('.modal-overlay.open').forEach(m => closeModal(m.id.replace('-modal',''))); });
document.querySelectorAll('.modal-overlay').forEach(m => m.addEventListener('click', e => { if (e.target === m) closeModal(m.id.replace('-modal','')); }));
});
</script>
</body>
</html>
Raw
Live version.html
<!DOCTYPE html>
<html lang="en" id="html-root" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<link rel="icon" type="image/png" href="logo.png">
<link rel="shortcut icon" href="logo.png">
<meta name="description" content="MSC Arabia - Riyadh's leading provider of Managed IT Services, Fire Safety Engineering, Manpower Solutions, and IT Hardware Procurement. Certified for Aramco, STC & Petro Rabigh.">
<meta name="keywords" content="Managed IT Services Riyadh, Fire Safety Engineering KSA, Manpower Supply Saudi Arabia, IT Hardware Procurement, MDM Licensing Saudi, Siemens Fire Systems, Aramco Certified Engineers, STC Approved IT Vendor, Petro Rabigh IT Support, Saudi Vision 2030 IT Partner, IT Staffing KSA, Business IT Solutions Riyadh">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="author" content="ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY">
<meta name="geo.region" content="SA-01">
<meta name="geo.placename" content="Riyadh">
<meta name="geo.position" content="24.7136;46.6753">
<meta name="ICBM" content="24.7136, 46.6753">
<meta name="theme-color" content="#c91c1c">
<meta name="msapplication-TileColor" content="#c91c1c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="canonical" href="https://mscarabia.com">
<link rel="alternate" hreflang="en" href="https://mscarabia.com/">
<link rel="alternate" hreflang="ar" href="https://mscarabia.com/?lang=ar">
<link rel="alternate" hreflang="x-default" href="https://mscarabia.com/">
<link rel="sitemap" type="application/xml" href="/sitemap.xml">
<meta property="og:title" content="MSC Arabia – IT Managed Services, Fire Safety & Manpower Solutions | Riyadh KSA">
<meta property="og:description" content="Saudi-based IT managed services, MDM licensing, fire safety engineering, and manpower solutions. Aramco, STC & Petro Rabigh approved. 10+ years serving KSA.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://mscarabia.com">
<meta property="og:image" content="https://mscarabia.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_SA">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MSC Arabia – IT Managed Services & Fire Safety | Riyadh KSA">
<meta name="twitter:description" content="Saudi-based IT managed services, MDM licensing, fire safety engineering, and manpower solutions. Trusted by Aramco, STC & Petro Rabigh.">
<title>MSC Arabia | IT Managed Services, MDM Licensing & Fire Safety | Riyadh Saudi Arabia</title>
<!-- Enhanced Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY",
"alternateName": "MSC Arabia",
"description": "Saudi-based IT managed services, MDM licensing, fire safety engineering, and manpower solutions. Aramco, STC & Petro Rabigh approved with 10+ years serving KSA.",
"url": "https://mscarabia.com",
"email": "info@mscarabia.com",
"address": {
"@type": "PostalAddress",
"streetAddress": "6787 Abdulrahman Al Nasser, Al Khaleej Dist.",
"addressLocality": "Riyadh",
"postalCode": "13223",
"addressCountry": "SA",
"name": "ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY"
},
"areaServed": "SA",
"serviceType": ["IT Infrastructure", "Managed IT Services", "MDM Licensing", "Cybersecurity", "Cloud Computing", "Fire Safety Engineering", "Manpower Supply", "Hardware & Software Procurement"],
"taxID": "312900114900003",
"vatID": "312900114900003",
"hasCredential": [
{
"@type": "EducationalOccupationalCredential",
"name": "PMP Certification",
"credentialCategory": "Professional Certification"
},
{
"@type": "EducationalOccupationalCredential",
"name": "PMI-ACP Certification",
"credentialCategory": "Professional Certification"
},
{
"@type": "EducationalOccupationalCredential",
"name": "Siemens Fire Systems Certification",
"credentialCategory": "Technical Certification"
},
{
"@type": "EducationalOccupationalCredential",
"name": "BACnet Integration",
"credentialCategory": "Technical Certification"
}
],
"employee": {
"@type": "QuantitativeValue",
"minValue": 10,
"maxValue": 50,
"unitText": "employees"
},
"knowsLanguage": ["English", "Arabic"],
"openingHours": "Mo-Fr 09:00-18:00",
"priceRange": "$$",
"paymentAccepted": ["Cash", "Credit Card", "Bank Transfer"],
"currenciesAccepted": "SAR"
}
</script>
<!-- Apollo Tracking -->
<script>
function initApollo(){
var n=Math.random().toString(36).substring(7),
o=document.createElement("script");
o.src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache="+n,
o.async=!0,
o.defer=!0,
o.onload=function(){window.trackingFunctions.onLoad({appId:"67cd695b9ee4fe0019e6e9dd"})},
document.head.appendChild(o)
}
initApollo();
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KKZ292TR');</script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NGXKXV7EGM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-NGXKXV7EGM');
</script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBMPlexSansArabic:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
<script>
tailwind.config={
darkMode:"class",
theme:{
extend:{
colors:{
"surface":"#10131b",
"surface-low":"#181b23",
"surface-high":"#272a32",
"surface-highest":"#32353d",
"surface-lowest":"#0b0e15",
"primary":"#ffb4aa",
"primary-c":"#c91c1c",
"on-sv":"#9aa3b8"
},
fontFamily:{
sans:["Plus Jakarta Sans","IBM Plex Sans Arabic","sans-serif"],
mono:["DM Mono","monospace"]
}
}
}
}
</script>
<!-- Enhanced Styles -->
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Plus Jakarta Sans","IBM Plex Sans Arabic",sans-serif;background:#10131b;color:#e0e2ed;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.et{letter-spacing:-.02em}
/* RTL Support */
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","Plus Jakarta Sans",sans-serif;direction:rtl;text-align:right}
html[dir="rtl"] .et{letter-spacing:0}
html[dir="rtl"] .flip-rtl{flex-direction:row-reverse}
html[dir="rtl"] .ml-auto-rtl{margin-right:auto;margin-left:0}
html[dir="rtl"] .text-left-rtl{text-align:right}
html[dir="rtl"] .text-right-rtl{text-align:left}
/* Navigation */
.glass-nav{background:rgba(24,27,35,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.lang-btn{cursor:pointer;font-family:"DM Mono";font-size:.7rem;font-weight:700;padding:.4rem .8rem;border-radius:6px;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);background:transparent;transition:all .18s;letter-spacing:.06em;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.lang-btn:hover{border-color:rgba(201,28,28,.4);color:#fff}
.lang-ios-wrap{display:inline-flex;align-items:center;gap:.55rem;flex-direction:row;direction:ltr}
.lang-ios-label{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.72);min-width:3.4rem;user-select:none;text-align:end}
html[dir="rtl"] .lang-ios-label{text-align:start}
.lang-ios{position:relative;width:3.25rem;height:1.85rem;border-radius:999px;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .35s ease;flex-shrink:0}
.lang-ios[aria-checked="true"]{background:rgba(201,28,28,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.lang-ios-knob{position:absolute;top:3px;left:3px;width:calc(1.85rem - 6px);height:calc(1.85rem - 6px);border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.4,.0,.2,1)}
.lang-ios[aria-checked="true"] .lang-ios-knob{transform:translateX(1.4rem)}
.lang-ios:focus-visible{outline:2px solid #ffb4aa;outline-offset:2px}
.lang-ios-full{width:100%}
/* Background */
.circuit-bg{background-image:radial-gradient(ellipse 55% 70% at 75% 50%,rgba(201,28,28,.18) 0%,transparent 55%),radial-gradient(ellipse 40% 60% at 10% 80%,rgba(30,60,180,.07) 0%,transparent 50%),linear-gradient(135deg,rgba(8,11,18,1) 0%,rgba(8,11,18,.82) 55%,rgba(30,5,5,.65) 100%),url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1920&q=80");background-size:auto,auto,auto,cover;background-position:center}
.grid-overlay::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(201,28,28,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,28,28,.03) 1px,transparent 1px);background-size:52px 52px;pointer-events:none}
/* Premium UI - Scroll & Glass */
html { scroll-behavior: smooth; }
body { font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", sans-serif; background: #0b0e15; color: #e0e2ed; -webkit-font-smoothing: antialiased; }
.snap-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; }
/* Apple Liquid Glass Effects */
.glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); }
.glass-nav { background: rgba(11, 14, 21, 0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.svc-card, .stat-bar, .modal-box, .a11y-menu {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.svc-card:hover {
background: rgba(255, 255, 255, 0.06);
transform: translateY(-8px) scale(1.02);
border-color: rgba(201, 28, 28, 0.3);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 2rem;
left: 2rem;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: rgba(201, 28, 28, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(201, 28, 28, 0.2);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 90;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html[dir="rtl"] .back-to-top { left: auto; right: 2rem; }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #c91c1c; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(201, 28, 28, 0.3); }
/* Improved Carousel */
.clients-track { gap: 4rem; animation: marquee 60s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.clients-track:hover { animation-play-state: paused; }
.client-chip{
flex-shrink:0;
padding:1.25rem 2.25rem;
background:rgba(255,255,255,0.02);
border-radius:16px;
border:1px solid rgba(255,255,255,.05);
backdrop-filter:blur(10px);
transition:all .5s cubic-bezier(0.19, 1, 0.22, 1);
cursor:default;
position:relative;
margin:15px 0;
}
.client-chip span{font-size:1rem;font-weight:600;color:rgba(255,255,255,0.8);white-space:nowrap;display:block;line-height:1.25;letter-spacing:0.02em}
.client-chip:hover{
background:rgba(201,28,28,0.05);
border-color:rgba(201,28,28,0.4);
transform:translateY(-12px);
box-shadow:0 20px 40px rgba(0,0,0,0.5);
z-index:50;
}
.client-chip:hover span { color: #fff; }
/* Contrast Mode Overrides */
html.contrast { --bg: #000; --text: #fff; --accent: #ffff00; }
html.contrast body { background: #000 !important; color: #fff !important; }
html.contrast .glass, html.contrast .glass-nav, html.contrast .svc-card, html.contrast .stat-bar, html.contrast .a11y-menu, html.contrast .modal-box {
background: #000 !important;
border: 2px solid #fff !important;
backdrop-filter: none !important;
}
html.contrast h1, html.contrast h2, html.contrast h3, html.contrast h4, html.contrast p, html.contrast span, html.contrast li, html.contrast a {
color: #fff !important;
text-shadow: none !important;
}
html.contrast .text-[#c91c1c], html.contrast .bg-[#c91c1c], html.contrast .text-[#ffb4aa] {
color: #ffff00 !important;
}
html.contrast .bg-[#c91c1c] { background: #fff !important; color: #000 !important; font-weight: 900 !important; }
html.contrast .side-dot.active { background: #ffff00 !important; }
html.contrast .side-dot { background: #fff !important; }
html.contrast .compliance-badge { border: 2px solid #ffff00 !important; background: #000 !important; }
/* Accessibility & Fixed Toggle */
.a11y-panel { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 110; display: flex; flex-direction: column; align-items: flex-end; }
html[dir="rtl"] .a11y-panel { right: auto; left: 1.25rem; align-items: flex-start; }
.a11y-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #c91c1c; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px rgba(201,28,28,0.3); border: none; cursor: pointer; transition: all 0.3s; position: relative; z-index: 2; }
.a11y-btn:hover { transform: scale(1.1); }
.a11y-menu {
width: 180px;
padding: 0.5rem;
border-radius: 16px;
display: none;
flex-direction: column;
gap: 2px;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
background: rgba(24, 27, 35, 0.95);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
position: absolute;
top: calc(100% + 0.75rem);
right: 0;
}
html[dir="rtl"] .a11y-menu { right: auto; left: 0; }
.a11y-menu.open { display: flex; animation: fadeInDown 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
/* Horizontal Clients Carousel */
.clients-viewport { overflow: hidden; position: relative; width: 100%; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.clients-track { display: flex; width: max-content; gap: 3rem; animation: marquee 30s linear infinite; padding: 1rem 0; }
.clients-set { display: flex; gap: 3rem; align-items: center; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.clients-track:hover { animation-play-state: paused; }
.client-chip { flex-shrink: 0; padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.03); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); transition: all 0.3s; }
.client-chip:hover { background: rgba(201,28,28,0.1); border-color: rgba(201,28,28,0.3); transform: translateY(-5px); }
/* Restore iOS Style Language Toggle */
.lang-ios-wrap { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; }
.lang-ios-label { font-size: 0.75rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; }
.lang-ios {
position: relative;
width: 3rem;
height: 1.6rem;
border-radius: 999px;
background: rgba(255,255,255,0.1);
transition: background 0.3s;
border: 1px solid rgba(255,255,255,0.1);
}
.lang-ios[aria-checked="true"] { background: #c91c1c; }
.lang-ios-knob {
position: absolute;
top: 2px;
left: 2px;
width: calc(1.6rem - 6px);
height: calc(1.6rem - 6px);
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.lang-ios[aria-checked="true"] .lang-ios-knob { transform: translateX(1.4rem); }
/* Dark Date Picker */
input[type="date"] { color-scheme: dark; }
/* Remove Double Scrollbar */
.snap-container { height: auto; overflow: visible; scroll-snap-type: none; }
@media (max-width: 768px) {
.snap-section { min-height: auto; padding-top: 4rem; padding-bottom: 4rem; }
.side-nav { display: none !important; }
}
/* Utilities & Components */
.tw-cur{animation:blink .88s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.float-b{animation:fb 4s ease-in-out infinite}
@keyframes fb{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.btn-red{box-shadow:0 0 22px rgba(201,28,28,.3),0 4px 16px rgba(0,0,0,.4);position:relative;overflow:hidden}
.btn-red::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transform:translateX(-100%);transition:transform .5s}
.btn-red:hover::after{transform:translateX(100%)}
.ghost-b{border-color:rgba(92,64,60,.15)}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 0 rgba(201,28,28,.5)}60%{box-shadow:0 0 0 5px rgba(201,28,28,0)}}
.stat-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#c91c1c,transparent);opacity:.5}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fade{animation:fadeUp .6s ease forwards}
.fade-d1{animation:fadeUp .6s .1s ease both}
.fade-d2{animation:fadeUp .6s .2s ease both}
/* Form Elements */
.expand-container { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; overflow: hidden; }
.expand-container.open { grid-template-rows: 1fr; }
.expand-content { min-height: 0; }
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; height: 1.25rem; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.08); border-radius: 999px; height: 0.4rem; transition: background 0.2s; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -0.45rem; background: #c91c1c; border-radius: 50%; height: 1.3rem; width: 1.3rem; border: 3px solid #181b23; box-shadow: 0 0 10px rgba(201, 28, 28, 0.4); transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s; }
input[type="range"]:hover::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.12); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); background: #ffb4aa; }
.budget-toggle-wrap { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 3px; gap: 2px; }
.budget-toggle-btn { padding: 6px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; color: #9aa3b8; transition: all 0.2s; cursor: pointer; }
.budget-toggle-btn.active { background: #c91c1c; color: #fff; box-shadow: 0 2px 8px rgba(201,28,28,0.3); }
.total-estimate-box { background: linear-gradient(135deg, rgba(201,28,28,0.15), rgba(201,28,28,0.05)); border: 1px solid rgba(201,28,28,0.2); border-radius: 16px; padding: 1.5rem; text-align: center; margin-bottom: 2rem; }
.total-estimate-val { font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 0.25rem; }
.total-estimate-label { font-size: 0.75rem; font-weight: 600; color: #ffb4aa; text-transform: uppercase; tracking: 0.1em; }
/* Modal & Badge */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{width:100%;max-width:640px;max-height:88vh;overflow-y:auto;padding:2.5rem;position:relative;transform:translateY(24px);transition:transform .4s cubic-bezier(0.19, 1, 0.22, 1); border-radius: 24px;}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-box h3{font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:.3rem}
.modal-box h4{font-size:.8rem;font-weight:700;color:#c91c1c;text-transform:uppercase;letter-spacing:.1em;margin:1.2rem 0 .5rem}
.modal-box p{color:#9aa3b8;font-size:.88rem;line-height:1.75;margin-bottom:.5rem}
.modal-box ul li{color:#9aa3b8;font-size:.86rem;padding:.28rem 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:flex-start;gap:.5rem}
.modal-box ul li::before{content:"\2192";color:#c91c1c;flex-shrink:0;font-size:.8rem;margin-top:.1rem}
.modal-close{position:absolute;top:1.5rem;right:1.5rem;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);border:none;color:#9aa3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .18s}
html[dir="rtl"] .modal-close{right:auto;left:1.5rem}
.modal-close:hover{background:rgba(201,28,28,.2);color:#fff}
.compliance-badge{background:rgba(201,28,28,.05);border:1px solid rgba(201,28,28,.15);border-radius:12px;padding:.75rem 1rem;font-size:.72rem;line-height:1.45;color:#ffb4aa;display:inline-flex;align-items:flex-start;gap:.6rem;max-width:100%;flex-wrap:wrap;backdrop-filter:blur(5px)}
.lang-ios-full{width:100%;justify-content:space-between}
</style>
</head>
<body class="bg-[#10131b]">
<!-- Side Dot Navigation -->
<div class="side-nav hidden lg:flex" id="side-nav">
<button class="side-dot active" data-section="home" data-label="Home" aria-label="Go to Home"></button>
<button class="side-dot" data-section="services" data-label="Services" aria-label="Go to Services"></button>
<button class="side-dot" data-section="engineering" data-label="Engineering" aria-label="Go to Engineering"></button>
<button class="side-dot" data-section="manpower" data-label="Manpower" aria-label="Go to Manpower"></button>
<button class="side-dot" data-section="about" data-label="About" aria-label="Go to About"></button>
<button class="side-dot" data-section="contact" data-label="Contact" aria-label="Go to Contact"></button>
</div>
<nav class="fixed top-0 left-0 right-0 z-40 glass-nav border-b border-white/[.04]">
<div class="max-w-7xl mx-auto px-5 lg:px-8 flex items-center justify-between h-16">
<div class="flex items-center gap-8">
<a href="#home" class="flex items-center gap-2.5 shrink-0">
<img src="./logo.png" alt="MSC Arabia" class="w-10 h-10 object-contain" onerror="this.src='https://via.placeholder.com/40x40?text=MSC'">
<span class="text-[1.05rem] font-extrabold tracking-tight text-white">MSC<span class="text-[#c91c1c]">Arabia</span></span>
</a>
<div class="hidden lg:flex items-center gap-6">
<a href="#services" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_services"></a>
<a href="#engineering" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_engineering"></a>
<a href="#manpower" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_manpower"></a>
<a href="#clients" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_clients"></a>
<a href="#about" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_about"></a>
</div>
</div>
<div class="flex items-center gap-4">
<!-- Language Switcher (iOS Style) -->
<div class="hidden md:flex lang-ios-wrap" onclick="toggleLang()">
<span class="lang-ios-label" id="lang-ios-label">AR</span>
<button class="lang-ios" id="lang-ios" aria-checked="false" aria-label="Toggle language">
<div class="lang-ios-knob"></div>
</button>
</div>
<a href="#contact" class="hidden md:inline-flex items-center bg-[#c91c1c] text-white text-xs font-bold uppercase tracking-widest px-5 py-2.5 rounded-xl btn-red transition-all" data-i18n="nav_cta"></a>
<button class="hbg flex lg:hidden flex-col gap-[4px] cursor-pointer p-1.5 bg-transparent border-none" id="hbg" onclick="toggleMenu()" aria-label="Menu">
<span class="block w-5 h-0.5 bg-white rounded-sm"></span>
<span class="block w-5 h-0.5 bg-white rounded-sm"></span>
<span class="block w-5 h-0.5 bg-white rounded-sm"></span>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mm" class="border-t border-white/[.04] bg-[#181b23] px-5 py-2 hidden">
<a href="#services" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_services"></a>
<a href="#engineering" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_engineering"></a>
<a href="#manpower" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_manpower"></a>
<a href="#clients" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_clients"></a>
<a href="#about" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_about"></a>
<a href="#contact" onclick="closeMenu()" class="block py-2.5 text-sm font-bold text-[#c91c1c]" data-i18n="nav_contact"></a>
<div class="mt-3 flex justify-center py-2 border-t border-white/[.04]">
<div class="lang-ios-wrap" onclick="toggleLang();closeMenu()">
<span class="lang-ios-label" id="lang-ios-label-m">العربية</span>
<button class="lang-ios" id="lang-ios-mobile" aria-checked="false" aria-label="Toggle language">
<div class="lang-ios-knob"></div>
</button>
</div>
</div>
</div>
</nav>
<div id="main-content" class="snap-container">
<!-- HERO Section -->
<section id="home" class="snap-section relative min-h-screen flex items-center pt-16 circuit-bg grid-overlay overflow-hidden">
<div class="premium-glow premium-glow-1"></div>
<div class="premium-glow premium-glow-2"></div>
<div class="relative z-10 max-w-7xl mx-auto px-5 lg:px-8 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center py-20 lg:py-0 w-full">
<div class="lg:col-span-7 fade">
<div class="inline-flex items-center gap-2 bg-[rgba(201,28,28,.1)] border border-[rgba(201,28,28,.22)] text-[#ffb4aa] text-[.63rem] font-bold uppercase tracking-[.18em] px-3 py-1.5 rounded-full mb-6">
<span class="w-1.5 h-1.5 bg-[#c91c1c] rounded-full" style="animation:pulse2 2s infinite"></span>
<span data-i18n="hero_pill"></span>
</div>
<h1 class="et font-extrabold text-white leading-[1.05] mb-6" style="font-size:clamp(2.2rem,5vw,4.2rem)">
<span data-i18n="hero_h1_1"></span><br>
<span class="text-[#c91c1c]" id="tw-word">IT</span><span class="tw-cur text-[#c91c1c] font-light">|</span><br>
<span data-i18n="hero_h1_3"></span>
</h1>
<p class="text-[#9aa3b8] leading-[1.78] mb-8 max-w-[520px]" style="font-size:clamp(.88rem,1.2vw,.97rem)" data-i18n="hero_sub"></p>
<div class="flex flex-wrap gap-3 mb-10">
<a href="#services" class="inline-flex items-center gap-2 bg-[#c91c1c] text-white text-sm font-bold uppercase tracking-widest px-7 py-3.5 rounded-md btn-red transition-all hover:scale-[1.02]">
<span class="material-symbols-outlined" style="font-size:15px">arrow_forward</span>
<span data-i18n="hero_btn1"></span>
</a>
<a href="#contact" class="inline-flex items-center border border-white/[.12] text-white/70 hover:text-white hover:border-white/25 text-sm font-bold uppercase tracking-widest px-7 py-3.5 rounded-md transition-all" data-i18n="hero_btn2"></a>
</div>
<div class="flex flex-wrap gap-7">
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="10" data-suf="+">10+</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat1"></div></div>
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="17" data-suf="+">17+</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat2"></div></div>
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="500" data-suf="+">500+</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat3"></div></div>
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="24/7" data-suf="">24/7</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat4"></div></div>
</div>
</div>
<div class="hero-right lg:col-span-5 hidden lg:flex flex-col gap-4 fade-d2">
<div class="glass border border-white/[.05] rounded-2xl p-7 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-[rgba(201,28,28,.14)] to-transparent rounded-2xl"></div>
<div class="relative z-10">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">precision_manufacturing</span>
</div>
<div class="text-xs font-mono text-[#9aa3b8] tracking-widest uppercase mb-2" data-i18n="hero_card_tag"></div>
<h2 class="text-[1.1rem] font-bold text-white et mb-2" data-i18n="hero_card_title"></h2>
<p class="text-sm text-[#9aa3b8] leading-relaxed" data-i18n="hero_card_desc"></p>
<div class="flex gap-1.5 mt-4 flex-wrap">
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">PMP</span>
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">PMI-ACP</span>
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">Siemens Fire</span>
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">BACnet</span>
</div>
</div>
</div>
<div class="float-b glass border border-white/[.05] rounded-xl px-5 py-4 flex items-center gap-4 self-start">
<div class="w-10 h-10 rounded-full bg-[#c91c1c] flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-white" style="font-size:17px">verified_user</span>
</div>
<div>
<div class="text-[.62rem] font-mono text-[#9aa3b8] uppercase tracking-widest" data-i18n="hero_badge_tag"></div>
<div class="text-sm font-bold text-white" data-i18n="hero_badge_val"></div>
</div>
</div>
</div>
</div>
</section>
<!-- CLIENTS Section -->
<section id="clients" class="py-16 bg-[#0b0e15] border-y ghost-b">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<p class="text-center font-mono text-[.62rem] text-[#9aa3b8] opacity-50 uppercase tracking-[.25em] mb-10" data-i18n="clients_tag"></p>
<div class="clients-viewport py-2" id="clients-viewport">
<div class="clients-track" id="clients-track">
<div class="clients-set" data-clients-set></div>
<div class="clients-set" data-clients-set aria-hidden="true"></div>
</div>
</div>
</div>
<template id="clients-chip-template">
<div class="client-chip"><span data-i18n=""></span></div>
</template>
</section>
<!-- SERVICES Section -->
<section id="services" class="snap-section py-24 relative overflow-hidden" style="background: linear-gradient(rgba(16, 19, 27, 0.95), rgba(16, 19, 27, 0.95)), url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1920&q=80') center/cover fixed">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 bg-[rgba(201,28,28,.1)] border border-[rgba(201,28,28,.22)] text-[#ffb4aa] text-[.63rem] font-bold uppercase tracking-[.18em] px-3 py-1.5 rounded-full mb-6">
<span class="w-1.5 h-1.5 bg-[#c91c1c] rounded-full"></span>
<span data-i18n="services_pill"></span>
</div>
<h2 class="et font-extrabold text-white leading-[1.05] mb-6" style="font-size:clamp(2rem,4vw,3.2rem)" data-i18n="services_title"></h2>
<p class="text-[#9aa3b8] leading-[1.78] max-w-2xl mx-auto text-lg" data-i18n="services_sub"></p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">computer</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc1_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc1_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc1_item1"></li>
<li data-i18n="svc1_item2"></li>
<li data-i18n="svc1_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">devices</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc2_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc2_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc2_item1"></li>
<li data-i18n="svc2_item2"></li>
<li data-i18n="svc2_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">local_fire_department</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc3_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc3_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc3_item1"></li>
<li data-i18n="svc3_item2"></li>
<li data-i18n="svc3_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">groups</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc4_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc4_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc4_item1"></li>
<li data-i18n="svc4_item2"></li>
<li data-i18n="svc4_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">shopping_cart</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc5_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc5_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc5_item1"></li>
<li data-i18n="svc5_item2"></li>
<li data-i18n="svc5_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">security</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc6_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc6_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc6_item1"></li>
<li data-i18n="svc6_item2"></li>
<li data-i18n="svc6_item3"></li>
</ul>
</div>
</div>
</div>
</section>
<!-- ENGINEERING -->
<section id="engineering" class="snap-section py-24 relative overflow-hidden" style="background:linear-gradient(rgba(8,11,18,.9),rgba(8,11,18,.84)),url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=1920&q=75') center/cover">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="mb-10">
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="eng_tag"></div>
<h2 class="text-[2.2rem] font-extrabold text-white et mb-3" data-i18n="eng_h2"></h2>
<p class="text-[#9aa3b8] max-w-[500px] leading-relaxed text-sm" data-i18n="eng_desc"></p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 grid-2">
<div class="bg-[rgba(11,14,21,.85)] backdrop-blur-sm border border-white/[.05] rounded-xl p-7">
<h3 class="text-sm font-bold text-[#c91c1c] mb-4 uppercase tracking-wider" data-i18n="eng_s1_title"></h3>
<div class="flex flex-wrap gap-1.5 mb-5">
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XLS</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">Sinteso</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">Desigo</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">Cerberus</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XC1001-A</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XC1005-A</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XC1003-A</span>
</div>
<ul class="space-y-2.5">
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item1"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item2"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item3"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item4"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item5"></span></li>
</ul>
</div>
<div class="bg-[rgba(11,14,21,.85)] backdrop-blur-sm border border-white/[.05] rounded-xl p-7">
<h3 class="text-sm font-bold text-[#c91c1c] mb-4 uppercase tracking-wider" data-i18n="eng_s2_title"></h3>
<p class="text-sm text-[#9aa3b8] leading-relaxed mb-5" data-i18n="eng_s2_desc"></p>
<ul class="space-y-2.5">
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item6"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item7"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item8"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item9"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item10"></span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- MANPOWER -->
<section id="manpower" class="snap-section py-24 relative overflow-hidden" style="background:linear-gradient(rgba(8,11,18,.88),rgba(8,11,18,.8)),url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1920&q=75') center/cover">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="mb-10">
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="mp_tag"></div>
<h2 class="text-[2.2rem] font-extrabold text-white et mb-3" data-i18n="mp_h2"></h2>
<p class="text-[#9aa3b8] max-w-[500px] leading-relaxed text-sm" data-i18n="mp_desc"></p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/[.04] rounded-xl overflow-hidden mb-5 mp-3">
<div class="bg-[rgba(11,14,21,.9)] p-7">
<div class="font-mono text-[.64rem] text-[#c91c1c] uppercase tracking-[.12em] mb-5 flex items-center gap-2"><span data-i18n="mp_col1"></span><span class="flex-1 h-px bg-white/[.04]"></span></div>
<ul class="space-y-2">
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item1"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item2"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item3"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item4"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item5"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item6"></span></li>
</ul>
</div>
<div class="bg-[rgba(11,14,21,.9)] p-7">
<div class="font-mono text-[.64rem] text-[#c91c1c] uppercase tracking-[.12em] mb-5 flex items-center gap-2"><span data-i18n="mp_col2"></span><span class="flex-1 h-px bg-white/[.04]"></span></div>
<ul class="space-y-2">
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item7"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item8"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item9"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item10"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item11"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item12"></span></li>
</ul>
</div>
<div class="bg-[rgba(11,14,21,.9)] p-7">
<div class="font-mono text-[.64rem] text-[#c91c1c] uppercase tracking-[.12em] mb-5 flex items-center gap-2"><span data-i18n="mp_col3"></span><span class="flex-1 h-px bg-white/[.04]"></span></div>
<ul class="space-y-2">
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item13"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item14"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item15"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item16"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item17"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item18"></span></li>
</ul>
</div>
</div>
<div class="flex flex-wrap gap-2">
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_bd"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_in"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_ph"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_pk"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_np"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_lk"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_id"></span>
</div>
<!-- Manpower Free Quote CTA -->
<div class="mt-10 glass border border-white/[.05] rounded-2xl p-7">
<div class="text-center mb-8">
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="mq_tag"></div>
<h3 class="text-[1.7rem] font-extrabold text-white et mb-2" data-i18n="mq_title"></h3>
<p class="text-[#9aa3b8] max-w-2xl mx-auto text-sm leading-relaxed" data-i18n="mq_sub"></p>
</div>
<!-- Big Total Estimate Box -->
<div class="total-estimate-box">
<div class="total-estimate-label" data-i18n="mq_total_estimate"></div>
<div class="total-estimate-val" id="mq_total_val">SAR 0</div>
<div class="text-[#9aa3b8] text-xs font-mono" id="mq_total_breakdown">0 workers × SAR 0</div>
</div>
<form onsubmit="handleManpowerQuote(event)" class="space-y-8" id="mq-form">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="mq_name"></label>
<input type="text" id="mq_name" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="mq_email"></label>
<input type="email" id="mq_email" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
</div>
</div>
<div>
<div class="flex items-center justify-between mb-3">
<label class="block text-white text-sm font-medium" data-i18n="mq_employees"></label>
<div class="text-[#ffb4aa] text-sm font-bold" id="mq_employees_val"></div>
</div>
<input type="range" id="mq_employees" min="1" max="1001" step="1" value="50" class="w-full">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<div class="flex items-center justify-between mb-3">
<label class="block text-white text-sm font-medium" data-i18n="mq_duration"></label>
<div class="text-[#ffb4aa] text-sm font-bold" id="mq_duration_val"></div>
</div>
<div class="flex flex-wrap gap-3 mb-4">
<label class="inline-flex items-center gap-2 text-sm text-[#9aa3b8] cursor-pointer">
<input type="checkbox" id="mq_permanent" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span data-i18n="mq_permanent"></span>
</label>
</div>
<input type="range" id="mq_duration" min="1" max="25" step="1" value="3" class="w-full">
</div>
<div>
<label class="block text-white text-sm font-medium mb-3" data-i18n="mq_profession"></label>
<div class="flex flex-wrap gap-2">
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="cleaner" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_cleaner"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="general_labor" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_general_labor"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="security_hse" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_security_hse"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="technician_engineer" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_technician_engineer"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="driver" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_driver"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="custom" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0" id="mq_prof_custom_checkbox">
<span class="text-sm text-white" data-i18n="mq_prof_custom"></span>
</label>
</div>
<div id="mq_prof_custom_wrap" class="expand-container">
<div class="expand-content">
<input type="text" id="mq_prof_custom_input" placeholder="Specify profession" class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20 mt-3">
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<div class="flex items-center justify-between mb-3">
<label class="block text-white text-sm font-medium" data-i18n="mq_budget"></label>
<div class="text-[#ffb4aa] text-sm font-bold" id="mq_budget_val"></div>
</div>
<div class="text-[#9aa3b8] text-xs font-mono mb-3" id="mq_budget_unit">SAR / person / month</div>
<input type="range" id="mq_budget" min="1" max="80" step="1" value="15" class="w-full">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="mq_nationality"></label>
<select id="mq_nationality" class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
<option value="" data-i18n="mq_select_nationality"></option>
<option value="bangladesh" data-i18n="mp_nat_bd"></option>
<option value="india" data-i18n="mp_nat_in"></option>
<option value="philippines" data-i18n="mp_nat_ph"></option>
<option value="pakistan" data-i18n="mp_nat_pk"></option>
<option value="nepal" data-i18n="mp_nat_np"></option>
<option value="sri_lanka" data-i18n="mp_nat_lk"></option>
<option value="indonesia" data-i18n="mp_nat_id"></option>
<option value="custom" data-i18n="mp_nat_custom"></option>
</select>
<div id="mq_nationality_custom_wrap" class="expand-container">
<div class="expand-content">
<input type="text" id="mq_nationality_custom_input" placeholder="Specify nationality" class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20 mt-3">
</div>
</div>
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="mq_start_date"></label>
<input type="date" id="mq_start_date" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
</div>
</div>
</div>
<div>
<label class="block text-white text-sm font-medium mb-3" data-i18n="mq_options"></label>
<div class="flex flex-wrap gap-4">
<label class="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-[#272a32] border border-white/[.06] cursor-pointer group hover:border-[#c91c1c]/30 transition-all">
<input type="checkbox" id="mq_food" class="cursor-pointer rounded border-white/[.1] bg-[#181b23] text-[#c91c1c] focus:ring-0">
<span class="material-symbols-outlined text-[#9aa3b8] group-hover:text-[#c91c1c] transition-colors" style="font-size:20px">restaurant</span>
<span class="text-sm text-white font-medium" data-i18n="mq_food_short">Food</span>
</label>
<label class="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-[#272a32] border border-white/[.06] cursor-pointer group hover:border-[#c91c1c]/30 transition-all">
<input type="checkbox" id="mq_accom" class="cursor-pointer rounded border-white/[.1] bg-[#181b23] text-[#c91c1c] focus:ring-0">
<span class="material-symbols-outlined text-[#9aa3b8] group-hover:text-[#c91c1c] transition-colors" style="font-size:20px">home</span>
<span class="text-sm text-white font-medium" data-i18n="mq_accom_short">Accom.</span>
</label>
<label class="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-[#272a32] border border-white/[.06] cursor-pointer group hover:border-[#c91c1c]/30 transition-all">
<input type="checkbox" id="mq_trans" class="cursor-pointer rounded border-white/[.1] bg-[#181b23] text-[#c91c1c] focus:ring-0">
<span class="material-symbols-outlined text-[#9aa3b8] group-hover:text-[#c91c1c] transition-colors" style="font-size:20px">directions_bus</span>
<span class="text-sm text-white font-medium" data-i18n="mq_trans_short">Transp.</span>
</label>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-between gap-6 pt-4">
<button type="submit" class="w-full sm:w-auto bg-[#c91c1c] text-white font-bold py-4 px-10 rounded-lg hover:bg-[#a01515] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg shadow-[#c91c1c]/20" data-i18n="mq_submit"></button>
<div id="mq_notice" class="text-[#9aa3b8] text-sm text-center sm:text-right"></div>
</div>
</form>
</div>
</div>
</section>
<!-- ABOUT -->
<section id="about" class="snap-section py-24 bg-[#181b23]">
<div class="max-w-7xl mx-auto px-5 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-14 items-center grid-2">
<div>
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="about_tag"></div>
<h2 class="text-[2.2rem] font-extrabold text-white et mb-4" data-i18n="about_h2" data-i18n-html></h2>
<p class="text-[#9aa3b8] leading-relaxed mb-3.5 text-sm" data-i18n="about_p1"></p>
<p class="text-[#9aa3b8] leading-relaxed mb-6 text-sm" data-i18n="about_p2"></p>
<div class="flex flex-wrap gap-1.5">
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">PMP</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">PMI-ACP</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">CSM</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">Lean Six Sigma GB</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">BACnet</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">Siemens Fire</span>
</div>
</div>
<div class="grid grid-cols-2 gap-3.5 grid-4">
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et stat-num mb-1" data-num="10" data-suf="+">10+</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat1"></div>
</div>
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et stat-num mb-1" data-num="17" data-suf="+">17+</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat2"></div>
</div>
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et stat-num mb-1" data-num="500" data-suf="+">500+</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat3"></div>
</div>
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et mb-1 stat-num" data-num="24/7" data-suf="">24/7</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat4"></div>
</div>
</div>
</div>
</section>
<!-- CONTACT Section -->
<section id="contact" class="snap-section py-20 bg-[#0b0e15]">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 bg-[rgba(201,28,28,.1)] border border-[rgba(201,28,28,.22)] text-[#ffb4aa] text-[.63rem] font-bold uppercase tracking-[.18em] px-3 py-1.5 rounded-full mb-6">
<span class="w-1.5 h-1.5 bg-[#c91c1c] rounded-full"></span>
<span data-i18n="contact_pill"></span>
</div>
<h2 class="et font-extrabold text-white leading-[1.05] mb-6" style="font-size:clamp(2rem,4vw,3.2rem)" data-i18n="contact_title"></h2>
<p class="text-[#9aa3b8] leading-[1.78] max-w-2xl mx-auto text-lg" data-i18n="contact_sub"></p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-5xl mx-auto">
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:24px">location_on</span>
</div>
<div>
<h3 class="text-white font-bold mb-2" data-i18n="contact_addr_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed">
<span class="block" data-i18n="contact_addr_line1"></span>
<span class="block" data-i18n="contact_addr_line2"></span>
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:24px">email</span>
</div>
<div>
<h3 class="text-white font-bold mb-2" data-i18n="contact_email_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed">info@mscarabia.com</p>
</div>
</div>
</div>
<div class="glass border border-white/[.05] rounded-2xl p-8">
<form onsubmit="handleSubmit(event)" class="space-y-6">
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_name"></label>
<input type="text" id="name" name="name" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20" data-i18n-placeholder="form_name_placeholder">
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_email"></label>
<input type="email" id="email" name="email" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20" data-i18n-placeholder="form_email_placeholder">
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_service"></label>
<select name="service" class="w-full px-4 py-3 bg-[#272a32] border border-white/[.1] rounded-lg text-white focus:outline-none focus:border-[#c91c1c] transition-colors">
<option value="" data-i18n="option_select_service"></option>
<option value="managed-it" data-i18n="option_managed_it"></option>
<option value="mdm" data-i18n="option_mdm"></option>
<option value="fire-safety" data-i18n="option_fire_safety"></option>
<option value="manpower" data-i18n="option_manpower"></option>
<option value="hardware" data-i18n="option_hardware"></option>
<option value="cybersecurity" data-i18n="option_cybersecurity"></option>
</select>
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_message"></label>
<textarea id="message" name="message" rows="4" class="w-full px-4 py-3 bg-[#272a32] border border-white/[.1] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] transition-colors resize-none" data-i18n-placeholder="form_message_placeholder"></textarea>
</div>
<button type="submit" class="w-full bg-[#c91c1c] text-white font-bold py-3 px-6 rounded-lg hover:bg-[#a01515] transition-colors" data-i18n="form_submit"></button>
</form>
</div>
</div>
</div>
</section>
</div>
<!-- Accessibility Panel -->
<div class="a11y-panel">
<div class="a11y-menu" id="a11y-menu">
<button onclick="adjustTextSize(1)" class="a11y-item">
<span class="material-symbols-outlined">format_size</span>
<span>A+</span>
</button>
<button onclick="adjustTextSize(-1)" class="a11y-item">
<span class="material-symbols-outlined">text_fields</span>
<span>A-</span>
</button>
<button onclick="toggleContrast()" class="a11y-item">
<span class="material-symbols-outlined">contrast</span>
<span data-i18n="a11y_theme">Contrast</span>
</button>
</div>
<button onclick="toggleA11y()" class="a11y-btn" aria-label="Accessibility options">
<span class="material-symbols-outlined">accessibility_new</span>
</button>
</div>
<!-- Back to Top -->
<button class="back-to-top" id="back-to-top" onclick="window.scrollTo({top:0, behavior:'smooth'})" aria-label="Back to top">
<span class="material-symbols-outlined">arrow_upward</span>
</button>
<!-- FOOTER -->
<footer class="py-12 bg-[#0b0e15] border-t border-white/[.04]">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center gap-3 mb-4">
<img src="./logo.png" alt="MSC Arabia" class="w-12 h-12 object-contain" onerror="this.src='https://via.placeholder.com/48x48?text=MSC'">
<span class="text-white font-bold text-xl">MSC Arabia</span>
</div>
<p class="text-[#9aa3b8] text-sm leading-relaxed mb-4" data-i18n="footer_desc"></p>
<div class="compliance-badge">
<span class="material-symbols-outlined" style="font-size:16px">verified</span>
<span data-i18n="compliance_ids" data-i18n-html></span>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-4" data-i18n="footer_services"></h4>
<ul class="space-y-2">
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc1"></a></li>
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc2"></a></li>
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc3"></a></li>
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc4"></a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4" data-i18n="footer_company"></h4>
<ul class="space-y-2">
<li><a href="#about" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_about"></a></li>
<li><a href="#clients" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_clients"></a></li>
<li><button type="button" onclick="openModal('privacy')" class="footer-link text-sm hover:text-white transition-colors text-start" data-i18n="footer_privacy"></button></li>
<li><button type="button" onclick="openModal('cookie')" class="footer-link text-sm hover:text-white transition-colors text-start" data-i18n="footer_cookies"></button></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4" data-i18n="footer_contact"></h4>
<ul class="space-y-2 text-[#9aa3b8] text-sm">
<li data-i18n="footer_addr"></li>
<li data-i18n="footer_email"></li>
</ul>
</div>
</div>
<div class="border-t border-white/[.04] pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-[#9aa3b8] text-xs">© 2026 MSC Arabia. All rights reserved.</p>
<div class="flex items-center gap-4">
<span class="text-[#9aa3b8] text-xs font-mono uppercase tracking-widest" data-i18n="footer_compliance"></span>
</div>
</div>
</div>
</footer>
<!-- PRIVACY POLICY MODAL -->
<div id="privacy-modal" class="modal-overlay">
<div class="modal-box">
<button class="modal-close" onclick="closeModal('privacy')">×</button>
<div class="modal-tag" data-i18n="modal_privacy_tag"></div>
<h3 data-i18n="modal_privacy_title"></h3>
<p data-i18n="modal_privacy_updated"></p>
<p data-i18n="modal_privacy_effective"></p>
<p data-i18n="modal_privacy_intro"></p>
<h4 data-i18n="modal_privacy_collect_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_privacy_collect_list" data-i18n-html></div>
<h4 data-i18n="modal_privacy_use_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_privacy_use_list" data-i18n-html></div>
<h4 data-i18n="modal_privacy_protection_title"></h4>
<p data-i18n="modal_privacy_protection_desc"></p>
<h4 data-i18n="modal_privacy_rights_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_privacy_rights_list" data-i18n-html></div>
<h4 data-i18n="modal_privacy_contact_title"></h4>
<p data-i18n="modal_privacy_contact_desc"></p>
</div>
</div>
<!-- COOKIE POLICY MODAL -->
<div id="cookie-modal" class="modal-overlay">
<div class="modal-box">
<button class="modal-close" onclick="closeModal('cookie')">×</button>
<div class="modal-tag" data-i18n="modal_cookie_tag"></div>
<h3 data-i18n="modal_cookie_title"></h3>
<p data-i18n="modal_cookie_effective"></p>
<p data-i18n="modal_cookie_updated"></p>
<h4 data-i18n="modal_cookie_what_title"></h4>
<p data-i18n="modal_cookie_what_desc"></p>
<h4 data-i18n="modal_cookie_how_title"></h4>
<p data-i18n="modal_cookie_how_desc"></p>
<h4 data-i18n="modal_cookie_types_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_cookie_types_list" data-i18n-html></div>
<h4 data-i18n="modal_cookie_manage_title"></h4>
<p data-i18n="modal_cookie_manage_desc"></p>
<div class="modal-html-list mb-4" data-i18n="modal_cookie_manage_list" data-i18n-html></div>
</div>
</div>
<!-- JavaScript -->
<script>
// Language (default English; optional ?lang=ar or localStorage msc_lang)
const LANG_KEY = 'msc_lang';
let currentLang = 'en';
function readStoredLang() {
try {
const q = new URLSearchParams(window.location.search).get('lang');
if (q === 'ar' || q === 'en') return q;
const s = localStorage.getItem(LANG_KEY);
if (s === 'ar' || s === 'en') return s;
} catch (e) {}
return 'en';
}
function persistLang() {
try { localStorage.setItem(LANG_KEY, currentLang); } catch (e) {}
}
function updateLangSwitchUI() {
const btns = ['lang-btn-en', 'lang-btn-ar', 'lang-btn-en-m', 'lang-btn-ar-m'];
btns.forEach(id => {
const btn = document.getElementById(id);
if (btn) {
const btnLang = id.includes('ar') ? 'ar' : 'en';
btn.classList.toggle('active', currentLang === btnLang);
}
});
}
function setLang(lang) {
if (currentLang === lang) return;
currentLang = lang;
persistLang();
applyDocumentLocale();
}
function initBackToTop() {
const btt = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 500) {
btt.classList.add('show');
} else {
btt.classList.remove('show');
}
});
}
function initSideNav() {
const sideDots = document.querySelectorAll('.side-dot');
const sections = document.querySelectorAll('section[id], footer');
function updateSideNav() {
const y = window.pageYOffset;
const navHeight = 80;
let current = 'home';
sections.forEach(section => {
const sectionTop = section.offsetTop - navHeight;
if (y >= sectionTop) {
current = section.id || 'home';
}
});
sideDots.forEach(dot => {
const sectionId = dot.getAttribute('data-section');
dot.classList.toggle('active', sectionId === current);
const labelKey = 'nav_' + sectionId;
if (translations[currentLang][labelKey]) {
dot.setAttribute('data-label', translations[currentLang][labelKey].replace(' →', ''));
}
});
}
// Unified Smooth Scroll Logic
function smoothScrollTo(targetId) {
const target = document.getElementById(targetId);
if (target) {
const navHeight = 64;
const targetPosition = target.offsetTop - navHeight;
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
}
}
sideDots.forEach(dot => {
dot.addEventListener('click', (e) => {
e.preventDefault();
smoothScrollTo(dot.getAttribute('data-section'));
});
});
// Attach to all anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const id = this.getAttribute('href').substring(1);
if (id) {
e.preventDefault();
closeMenu();
smoothScrollTo(id);
}
});
});
window.addEventListener('scroll', updateSideNav);
updateSideNav();
}
function applyStatNums() {
const stats = document.querySelectorAll('.stat-num');
const animateValue = (el, start, end, duration, suffix) => {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const val = Math.floor(progress * (end - start) + start);
el.textContent = toArabicNumbers(String(val)) + suffix;
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
if (el.getAttribute('data-animated') === 'true') return;
const raw = el.getAttribute('data-num') || '';
const suf = el.getAttribute('data-suf') || '';
// Handle non-numeric stats like 24/7
if (raw.includes('/')) {
el.textContent = toArabicNumbers(raw) + suf;
} else {
const endValue = parseInt(raw);
if (!isNaN(endValue)) {
animateValue(el, 0, endValue, 1200, suf);
} else {
el.textContent = toArabicNumbers(raw) + suf;
}
}
el.setAttribute('data-animated', 'true');
}
});
}, { threshold: 0.2 });
stats.forEach(stat => observer.observe(stat));
}
function applyDocumentLocale() {
document.documentElement.lang = currentLang;
document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
// Remove individual class toggles that might conflict with Tailwind's dir:
// var root = document.getElementById('html-root');
// if (root) root.classList.toggle('rtl', currentLang === 'ar');
document.querySelectorAll('[data-i18n]').forEach(applyI18nElement);
document.querySelectorAll('[data-i18n-placeholder]').forEach(function (element) {
var key = element.getAttribute('data-i18n-placeholder');
if (key && translations[currentLang][key]) {
element.placeholder = translations[currentLang][key];
}
});
document.querySelectorAll('option[data-i18n]').forEach(function (element) {
var key = element.getAttribute('data-i18n');
if (key && translations[currentLang][key]) {
element.textContent = translations[currentLang][key];
}
});
// Reset animations for stats on language change
document.querySelectorAll('.stat-num').forEach(el => el.removeAttribute('data-animated'));
applyStatNums();
updateLangSwitchUI();
if (typeof window._remeasureClientsMarquee === 'function') window._remeasureClientsMarquee();
if (typeof window._updateManpowerQuoteUI === 'function') window._updateManpowerQuoteUI();
}
const translations = {
en: {
nav_home: 'Home',
nav_services: 'Services',
nav_engineering: 'Engineering',
nav_manpower: 'Manpower',
nav_clients: 'Clients',
nav_about: 'About',
nav_contact: 'Contact',
nav_cta: 'Get in Touch',
hero_pill: "Saudi Arabia's Local IT Partner",
hero_h1_1: 'End‑to‑End',
hero_h1_3: 'Solutions',
hero_sub: 'Saudi-based managed IT services, MDM licensing, hardware & software procurement, fire safety engineering, and workforce solutions — trusted by Saudi Arabia\'s leading enterprises.',
hero_btn1: 'Explore Services',
hero_btn2: 'Schedule a Call',
hero_stat1: 'Years in KSA',
hero_stat2: 'Enterprise Clients',
hero_stat3: 'Workers Placed',
hero_stat4: 'Managed Support',
hero_card_tag: 'Saudi Vision 2030 Aligned',
hero_card_title: 'Precision Engineering & IT',
hero_card_desc: 'Certified for Aramco, STC & Petro Rabigh. PMP, PMI-ACP, Siemens Fire Systems, BACnet Integration.',
hero_badge_tag: 'Aramco Permanent ID',
hero_badge_val: 'STC & Petro Rabigh Access',
clients_tag: 'Trusted by Saudi Arabia\'s Leading Organisations',
services_pill: 'Our Core Services',
services_title: 'Comprehensive IT & Engineering Solutions',
services_sub: 'End-to-end services designed to accelerate your digital transformation and ensure operational excellence.',
svc1_title: 'Managed IT Services',
svc1_desc: '24/7 proactive monitoring, support, and maintenance of your IT infrastructure to ensure maximum uptime and performance.',
svc2_title: 'MDM Licensing',
svc2_desc: 'Mobile Device Management solutions for secure enterprise mobility and device lifecycle management.',
svc3_title: 'Fire Safety Engineering',
svc3_desc: 'Certified fire safety systems design, installation, and maintenance for industrial and commercial facilities.',
svc4_title: 'Manpower Solutions',
svc4_desc: 'Skilled IT and engineering professionals for temporary and permanent positions across Saudi Arabia.',
svc5_title: 'IT Hardware & Licensing',
svc5_desc: 'Procurement and deployment of enterprise-grade laptops, desktops, and licensed software solutions.',
svc5_item1: '• Laptops & Desktops',
svc5_item2: '• Windows & MS Office Licenses',
svc5_item3: '• Servers & Storage',
svc6_title: 'Cloud & Infrastructure',
svc6_desc: 'Scalable cloud infrastructure with migration, management, and optimization across leading providers.',
svc1_item1: '• Server & Network Management',
svc1_item2: '• Cloud Infrastructure',
svc1_item3: '• Help Desk Support',
svc2_item1: '• Apple Business Manager',
svc2_item2: '• Microsoft Intune',
svc2_item3: '• Enterprise Security',
svc3_item1: '• Siemens Fire Systems',
svc3_item2: '• BACnet Integration',
svc3_item3: '• Safety Compliance',
svc4_item1: '• Skilled Staffing',
svc4_item2: '• Engineering Resources',
svc4_item3: '• General Labor Teams',
svc5_item1: '• Dell, HP & Lenovo Authorized',
svc5_item2: '• Microsoft Volume Licensing',
svc5_item3: '• Rack & Blade Servers',
svc6_item1: '• AWS, Azure & Google Cloud',
svc6_item2: '• Migration & workload modernization',
svc6_item3: '• Managed operations & cost optimization',
svc1_details: 'Our Managed IT Services provide 24/7 proactive monitoring, support, and maintenance of your IT infrastructure. We ensure maximum uptime and performance through regular updates, security patches, and rapid response to issues.',
svc2_details: 'MDM Licensing provides comprehensive mobile device management with licensing solutions. We ensure compliance, security, and efficient management of all mobile devices in your organization.',
svc3_details: 'Fire Safety Engineering offers Siemens-certified fire alarm systems with design, installation, testing, and commissioning. Our engineers are Aramco-approved with permanent access IDs.',
svc4_details: 'Manpower Solutions provides skilled and unskilled workforce from South and Southeast Asia. We handle complete visa processing and documentation for deployment.',
svc5_details: 'IT Hardware & Licensing services provide enterprise-grade laptops, desktops, and licensed software solutions. We ensure procurement and deployment of hardware and software.',
svc6_details: 'Cloud Services offer scalable infrastructure with migration, management, and optimization. We support AWS, Azure, and Google Cloud platforms.',
contact_pill: 'Get In Touch',
contact_title: 'Let\'s Transform Your Business Together',
contact_sub: 'هل أنت مستعد لتسريع تحولك الرقمي؟ اتصل بفريق خبرائنا اليوم.',
contact_addr_title: 'عنوان المكتب',
contact_phone_title: 'الهاتف',
contact_email_title: 'البريد الإلكتروني',
contact_form_title: 'أرسل لنا رسالة',
form_name: 'الاسم الكامل',
form_email: 'البريد الإلكتروني',
form_service: 'الخدمة المطلوبة',
form_message: 'الرسالة',
form_submit: 'إرسال الرسالة',
form_name_placeholder: 'محمد',
form_email_placeholder: 'mohammed@example.com',
option_managed_it: 'خدمات تقنية المعلومات المدارة',
option_mdm: 'ترخيص إدارة الأجهزة المحمولة',
option_fire_safety: 'هندسة السلامة من الحرائق',
option_manpower: 'حلول القوى العاملة',
option_hardware: 'أجهزة تكنولوجيا المعلومات والتراخيص',
option_cybersecurity: 'السحابة والبنية التحتية',
option_select_service: 'اختر خدمة',
form_message_placeholder: 'أخبرنا عن متطلباتك...',
footer_desc: 'شريكك الموثوق للحلول التكنولوجية الشاملة وخدمات الهندسة في المملكة العربية السعودية.',
footer_services: 'Services',
footer_services_title: 'Services',
footer_svc1: 'Managed IT Services',
footer_svc2: 'Fire Safety Engineering',
footer_svc3: 'Manpower Solutions',
footer_svc4: 'Hardware, Software & Cloud',
footer_company: 'Company',
footer_contact: 'Contact',
footer_about: 'About Us',
footer_clients: 'Our Clients',
footer_privacy: 'Privacy Policy',
footer_cookies: 'Cookie Policy',
footer_copyright: '© 2026 MSC Arabia. All rights reserved.',
a11y_theme: 'Contrast Mode',
a11y_lang: 'Change Language',
footer_compliance: 'ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY',
compliance_ids: 'CR: <strong>1010643911</strong><br>VAT: <strong>312900114900003</strong>',
contact_addr_line1: '6787 Abdulrahman Al Nasser, Al Khaleej Dist.',
contact_addr_line2: 'Riyadh 13223, Saudi Arabia',
client_1: 'Amsa Hospitality',
client_2: 'TSS Advertising',
client_3: 'Arab Fire Safety & Security Academy',
client_4: 'Kudu Company',
client_5: 'EHIC',
client_6: 'Ebtekar Al-Taknouchia',
client_7: 'Aklaniat Technologies',
client_8: 'Al Bayan Model School',
client_9: '4 Dimensions Advertising',
client_10: 'Yenepoya Intl School KSA',
client_11: 'Hellmann Worldwide Logistics',
mp_nat_bd: 'Bangladesh',
mp_nat_in: 'India',
mp_nat_ph: 'Philippines',
mp_nat_pk: 'Pakistan',
mp_nat_np: 'Nepal',
mp_nat_lk: 'Sri Lanka',
mp_nat_id: 'Indonesia',
mp_nat_custom: 'Other (Specify in Message)',
// Manpower Quote CTA
mq_tag: 'Free Manpower Quote',
mq_title: 'Request a Free Manpower Quote',
mq_sub: 'Send your requirements and we will get back within 1–2 business days.',
mq_name: 'Your Name',
mq_email: 'Your Email',
mq_employees: 'Number of workers',
mq_workers: 'workers',
mq_workers_plus: '1000+ workers',
mq_duration: 'Contract duration',
mq_months: 'months',
mq_month: 'month',
mq_years: 'years',
mq_year: 'year',
mq_permanent: 'Permanent',
mq_permanent_label: 'Permanent',
mq_profession: 'Profession(s)',
mq_prof_cleaner: 'Cleaner',
mq_prof_general_labor: 'General Labor',
mq_prof_security_hse: 'Security & HSE',
mq_prof_technician_engineer: 'Technician / Engineer',
mq_prof_driver: 'Driver',
mq_prof_custom: 'Other (Specify below)',
mq_options: 'Options',
mq_food: 'Food included',
mq_accommodation: 'Accommodation included',
mq_budget: 'Ideal budget per person',
mq_budget_monthly: 'Monthly',
mq_budget_yearly: 'Yearly',
mq_budget_per: 'SAR / person / month',
mq_budget_per_year: 'SAR / person / year',
mq_total_estimate: 'Estimated Total',
mq_nationality: 'Nationality',
mq_select_nationality: 'Select nationality',
mq_start_date: 'Desired start date',
mq_submit: 'Request Quote',
mq_food_short: 'Food',
mq_accom_short: 'Accom.',
mq_trans_short: 'Transp.',
mq_notice_sending: 'Opening your email client... we will reply within 1–2 business days.',
mq_subject: 'Manpower Free Quote Request',
mq_yes: 'Yes',
mq_no: 'No',
mq_not_specified: 'Not specified',
// Modal translations
modal_privacy_tag: 'Privacy Policy',
modal_privacy_title: 'Privacy Policy',
modal_privacy_updated: 'Last Updated: March 26, 2026',
modal_privacy_effective: 'Effective Date: March 26, 2026',
modal_privacy_intro: 'This Privacy Policy describes how ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY collects, uses, and protects your information when you use our website.',
modal_privacy_collect_title: 'Information We Collect',
modal_privacy_collect_list: '• Name and contact information<br>• Company and job title<br>• Service requirements<br>• Device and browser information<br>• IP address and location data',
modal_privacy_use_title: 'How We Use Your Information',
modal_privacy_use_list: '• To provide our services and respond to inquiries<br>• To improve our website and services<br>• To communicate with you about our services<br>• To comply with legal obligations',
modal_privacy_protection_title: 'Data Protection',
modal_privacy_protection_desc: 'We implement appropriate security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.',
modal_privacy_rights_title: 'Your Rights',
modal_privacy_rights_list: '• Access to your personal information<br>• Correction of inaccurate information<br>• Deletion of your personal information<br>• Opt-out of marketing communications',
modal_privacy_contact_title: 'Contact Us',
modal_privacy_contact_desc: 'If you have any questions about this Privacy Policy, please contact us at info@mscarabia.com.',
modal_cookie_tag: 'Cookie Policy',
modal_cookie_title: 'Cookie Policy',
modal_cookie_effective: 'Effective date: March 26, 2026',
modal_cookie_updated: 'Last updated: March 26, 2026',
modal_cookie_what_title: 'What are cookies?',
modal_cookie_what_desc: 'Cookies are small text files used to store small pieces of information on your device when you visit our website.',
modal_cookie_how_title: 'How do we use cookies?',
modal_cookie_how_desc: 'We use cookies to ensure our website functions properly, enhance security, provide a better user experience, and analyze performance.',
modal_cookie_types_title: 'Types of cookies we use',
modal_cookie_types_list: '• Essential Cookies: Required for the website to function properly<br>• Analytics Cookies: Help us understand how visitors interact with our website<br>• Marketing Cookies: Used to track visitors across websites<br>• Functional Cookies: Enable enhanced functionality and personalization',
modal_cookie_manage_title: 'Manage cookie preferences',
modal_cookie_manage_desc: 'You can modify your cookie settings anytime through your browser settings.',
modal_cookie_manage_list: '• Chrome: https://support.google.com/accounts/answer/32050<br>• Safari, Firefox, Edge: Please refer to respective browser documentation',
footer_addr: 'Riyadh 13223, Saudi Arabia',
footer_email: 'info@mscarabia.com',
eng_tag: 'Engineering Services',
eng_h2: 'Fire Safety Testing & Commissioning',
eng_desc: 'Siemens-certified engineers. A decade of execution on Aramco, STC, and Petro Rabigh projects.',
eng_s1_title: 'Testing & Commissioning',
eng_s2_title: 'Fire Alarm System Design',
eng_s2_desc: 'NFPA & Saudi Fire Code compliant design from site survey to final handover and AutoCAD documentation.',
eng_item1: 'Gas system accuracy verification',
eng_item2: 'Logical-function programming',
eng_item3: 'Device addressing & loop termination',
eng_item4: 'Full Pre-FAT and FAT testing',
eng_item5: 'BACnet integration & commissioning',
eng_item6: 'Site surveys & hazard assessment',
eng_item7: 'Conventional, addressable & wireless systems',
eng_item8: 'Equipment placement & zoning strategy',
eng_item9: 'Integration with suppression, BMS & safety systems',
eng_item10: 'Full documentation & AutoCAD drawings',
mp_tag: 'Manpower Solutions',
mp_h2: 'Any Role. Any Scale.',
mp_desc: 'Skilled and unskilled workforce from South and Southeast Asia, deployed with full visa processing.',
mp_col1: 'Unskilled & General',
mp_col2: 'Semi-Skilled',
mp_col3: 'Skilled & Professional',
mp_item1: 'Factory & production workers',
mp_item2: 'Cleaners & housekeeping',
mp_item3: 'General helpers & labourers',
mp_item4: 'Catering & kitchen helpers',
mp_item5: 'Landscape & garden workers',
mp_item6: 'Agricultural workers',
mp_item7: 'Drivers (light, heavy, buses)',
mp_item8: 'Security guards & HSE officers',
mp_item9: 'Healthcare assistants & nurses',
mp_item10: 'Warehouse & forklift operators',
mp_item11: 'Painters, masons & tilers',
mp_item12: 'Welders & scaffolders',
mp_item13: 'Engineers & technicians',
mp_item14: 'IT professionals',
mp_item15: 'Medical staff & specialists',
mp_item16: 'Project managers (PMP)',
mp_item17: 'Admin & document controllers',
mp_item18: 'Procurement specialists',
about_tag: 'About Us',
about_h2: 'Saudi-Based.<br>Globally Certified.',
about_p1: 'MSC Arabia is a Riyadh-based company delivering IT managed services, MDM licensing, hardware & software procurement, fire safety engineering, and manpower solutions across Saudi Arabia.',
about_p2: 'Our engineers hold permanent access IDs for Aramco, STC, and Petro Rabigh — combining international certifications with deep Saudi market expertise built over a decade of execution.',
about_stat1: 'Years of Operation in KSA',
about_stat2: 'Active Enterprise Clients',
about_stat3: 'Successfully Placed Workers',
about_stat4: 'Managed IT Support Coverage'
},
ar: {
nav_home: 'الرئيسية',
nav_services: 'الخدمات',
nav_engineering: 'الهندسة',
nav_manpower: 'القوى العاملة',
nav_clients: 'العملاء',
nav_about: 'من نحن',
nav_contact: 'اتصل بنا',
nav_cta: 'تواصل معنا',
hero_pill: 'شريك التقنية المحلي في المملكة العربية السعودية',
hero_h1_1: 'شامل',
hero_h1_3: 'الحلول',
hero_sub: 'خدمات تكنولوجيا المعلومات المدارة، ترخيص إدارة الأجهزة المحمولة، procurement للأجهزة والبرامج، هندسة السلامة من الحرائق، وحلول القوى العاملة في المملكة العربية السعودية.',
hero_btn1: 'استكشف الخدمات',
hero_btn2: 'احصل على عرض سعر',
hero_stat1: 'سنوات في المملكة',
hero_stat2: 'عملاء مؤسسيون',
hero_stat3: 'عاملين تم توظيفهم',
hero_stat4: 'دعم مُدار',
hero_card_tag: 'متوافق مع رؤية المملكة 2030',
hero_card_title: 'هندسة دقيقة وتكنولوجيا المعلومات',
hero_card_desc: 'معتمد لأرامكو، stc وبترو رابغ. PMP، PMI-ACP، أنظمة سيمنز للسلامة من الحرائق، تكامل BACnet.',
hero_badge_tag: 'معرف دائم لأرامكو',
hero_badge_val: 'وصول stc وبترو رابغ',
clients_tag: 'موثوق من قبل المنظمات الرائدة في المملكة العربية السعودية',
services_pill: 'خدماتنا الأساسية',
services_title: 'حلول تكنولوجيا المعلومات والهندسة الشاملة',
services_sub: 'خدمات شاملة مصممة لتسريع التحول الرقمي وضمان التشغيل المتميز.',
svc1_title: 'خدمات تكنولوجيا المعلومات المدارة',
svc1_desc: 'مراقبة استباقية على مدار الساعة طوال أيام الأسبوع، ودعم، وصيانة لبنيتك التحتية لتكنولوجيا المعلومات لضمان أقصى وقت تشغيل وأداء.',
svc2_title: 'ترخيص إدارة الأجهزة المحمولة',
svc2_desc: 'إدارة شاملة للأجهزة المحمولة مع توفير التراخيص لضمان الامتثال والأمان.',
svc3_title: 'هندسة السلامة من الحرائق',
svc3_desc: 'أنظمة إنذار وإطفاء الحرائق المعتمدة من سيمنز مع التركيب والصيانة.',
svc4_title: 'حلول القوى العاملة',
svc4_desc: 'توفير القوى العاملة الماهرة وغير الماهرة من جنوب وجنوب شرق آسيا.',
svc5_title: 'أجهزة تكنولوجيا المعلومات والتراخيص',
svc5_desc: 'توفير ونشر أجهزة الكمبيوتر المحمولة والمكتبية وحلول البرمجيات المرخصة للمؤسسات.',
svc5_item1: '• أجهزة الكمبيوتر المحمولة والمكتبية',
svc5_item2: '• تراخيص Windows و MS Office',
svc5_item3: '• الخوادم والتخزين',
svc6_title: 'السحابة والبنية التحتية',
svc6_desc: 'بنية تحتية سحابية قابلة للتطوير مع الهجرة والإدارة والتحسين عبر كبار المزودين.',
svc1_item1: '• إدارة الخوادم والشبكات',
svc1_item2: '• البنية التحتية السحابية',
svc1_item3: '• دعم مكتب المساعدة',
svc2_item1: '• مدير أعمال أبل',
svc2_item2: '• Microsoft Intune',
svc2_item3: '• أمان المؤسسات',
svc3_item1: '• أنظمة سيمنز للحرائق',
svc3_item2: '• تكامل BACnet',
svc3_item3: '• الامتثال للسلامة',
svc4_item1: '• توظيف الكوادر الماهرة',
svc4_item2: '• موارد الهندسة',
svc4_item3: '• فرق العمالة العامة',
svc5_item1: '• Dell و HP و Lenovo موزع معتمد',
svc5_item2: '• تراخيص Microsoft للمؤسسات',
svc5_item3: '• خوادم Rack و Blade',
svc6_item1: '• AWS و Azure و Google Cloud',
svc6_item2: '• الهجرة وتحديث أعباء العمل',
svc6_item3: '• العمليات المدارة وتحسين التكاليف',
option_cybersecurity: 'السحابة والبنية التحتية',
option_select_service: 'اختر خدمة',
form_message_placeholder: 'أخبرنا عن متطلباتك...',
footer_desc: 'شريكك الموثوق للحلول التكنولوجية الشاملة وخدمات الهندسة في المملكة العربية السعودية.',
footer_services: 'الخدمات',
footer_services_title: 'الخدمات',
footer_svc1: 'خدمات تقنية المعلومات المدارة',
footer_svc2: 'هندسة السلامة من الحرائق',
footer_svc3: 'حلول القوى العاملة',
footer_svc4: 'الأجهزة والبرامج والسحابة',
footer_company: 'الشركة',
footer_contact: 'اتصل',
footer_about: 'من نحن',
footer_clients: 'عملاؤنا',
footer_privacy: 'سياسة الخصوصية',
footer_cookies: 'سياسة ملفات تعريف الارتباط',
footer_copyright: '© 2026 MSC Arabia. جميع الحقوق محفوظة.',
a11y_theme: 'وضع التباين',
a11y_lang: 'تغيير اللغة',
footer_compliance: 'مؤسسة مرساة الحلول لتقنية المعلومات',
compliance_ids: 'س.ت: <strong>١٠١٠٦٤٣٩١١</strong><br>الرقم الضريبي: <strong>٣١٢٩٠٠١١٤٩٠٠٠٠٣</strong>',
contact_addr_line1: '6787 Abdulrahman Al Nasser, Al Khaleej Dist.',
contact_addr_line2: 'Riyadh 13223, Saudi Arabia',
client_1: 'أمسا للضيافة',
client_2: 'تي إس إس للإعلان',
client_3: 'أكاديمية العرب للسلامة والأمن من الحرائق',
client_4: 'شركة كودو',
client_5: 'إيه إتش آي سي',
client_6: 'ابتكار التكنوشيا',
client_7: 'أكلانيات للتقنيات',
client_8: 'مدرسة البيان النموذجية',
client_9: 'فور ديمنشنز للإعلان',
client_10: 'مدرسة ينبع الدولية – السعودية',
client_11: 'هيلمان للوجستيات العالمية',
mp_nat_bd: 'بنغلادش',
mp_nat_in: 'الهند',
mp_nat_ph: 'الفلبين',
mp_nat_pk: 'باكستان',
mp_nat_np: 'نيبال',
mp_nat_lk: 'سريلانكا',
mp_nat_id: 'إندونيسيا',
mp_nat_custom: 'أخرى (حدد في الرسالة)',
// Manpower Quote CTA
mq_tag: 'عرض القوى العاملة مجاناً',
mq_title: 'اطلب عرضاً مجانياً للقوى العاملة',
mq_sub: 'شارك احتياجاتك وسنرد خلال 1–2 يوم عمل.',
mq_name: 'الاسم',
mq_email: 'البريد الإلكتروني',
mq_employees: 'عدد العمال',
mq_workers: 'عامل',
mq_workers_plus: '+١٠٠٠ عامل',
mq_duration: 'مدة العقد',
mq_months: 'أشهر',
mq_month: 'شهر',
mq_years: 'سنوات',
mq_year: 'سنة',
mq_permanent: 'دائم',
mq_permanent_label: 'دائم',
mq_profession: 'المهن المطلوبة',
mq_prof_cleaner: 'عامل تنظيف',
mq_prof_general_labor: 'عمال عامون',
mq_prof_security_hse: 'حراس أمن وسلامة',
mq_prof_technician_engineer: 'فني/مهندس',
mq_prof_driver: 'سائق',
mq_prof_custom: 'أخرى (حدد أدناه)',
mq_options: 'الخيارات',
mq_food: 'الوجبات مشمولة',
mq_accommodation: 'الإقامة مشمولة',
mq_budget: 'الميزانية المثالية لكل شخص',
mq_budget_monthly: 'شهرياً',
mq_budget_yearly: 'سنوياً',
mq_budget_per: 'ر.س / شخص / شهر',
mq_budget_per_year: 'ر.س / شخص / سنة',
mq_total_estimate: 'الإجمالي التقديري',
mq_nationality: 'الجنسية',
mq_select_nationality: 'اختر الجنسية',
mq_start_date: 'متى تريد بدء تزويد العمالة؟',
mq_submit: 'اطلب عرض السعر',
mq_notice_sending: 'جارٍ فتح البريد الإلكتروني... سنرد خلال ١-٢ يوم عمل.',
mq_subject: 'طلب عرض سعر للقوى العاملة',
mq_yes: 'نعم',
mq_no: 'لا',
mq_not_specified: 'غير محدد',
// Modal translations
modal_privacy_tag: 'سياسة الخصوصية',
modal_privacy_title: 'سياسة الخصوصية',
modal_privacy_updated: 'آخر تحديث: 26 مارس 2026',
modal_privacy_effective: 'تاريخ السريان: 26 مارس 2026',
modal_privacy_intro: 'تصف سياسة الخصوصية هذه كيفية جمع مؤسسة مرساة الحلول لتقنية المعلومات واستخدامها وحماية معلوماتك عند استخدامك لموقعنا الإلكتروني.',
modal_privacy_collect_title: 'المعلومات التي نجمعها',
modal_privacy_collect_list: '• الاسم ومعلومات الاتصال<br>• الشركة والمنصب<br>• متطلبات الخدمة<br>• معلومات الجهاز والمتصفح<br>• عنوان IP وموقع البيانات',
modal_privacy_use_title: 'كيف نستخدم معلوماتك',
modal_privacy_use_list: '• لتقديم خدماتنا والرد على الاستفسارات<br>• لتحسين موقعنا الإلكتروني وخدماتنا<br>• للتواصل معك بشأن خدماتنا<br>• للامتثال للالتزامات القانونية',
modal_privacy_protection_title: 'حماية البيانات',
modal_privacy_protection_desc: 'نحن نطبق تدابير أمنية مناسبة لحماية معلوماتك الشخصية من الوصول غير المصرح به أو التعديل أو الكشف أو التدمير.',
modal_privacy_rights_title: 'حقوقك',
modal_privacy_rights_list: '• الوصول إلى معلوماتك الشخصية<br>• تصحيح المعلومات غير الدقيقة<br>• حذف معلوماتك الشخصية<br>• إلغاء الاشتراك في الاتصالات التسويقية',
modal_privacy_contact_title: 'اتصل بنا',
modal_privacy_contact_desc: 'إذا كان لديك أي أسئلة حول سياسة الخصوصية هذه، يرجى الاتصال بنا على info@mscarabia.com.',
modal_cookie_tag: 'سياسة ملفات تعريف الارتباط',
modal_cookie_title: 'سياسة ملفات تعريف الارتباط',
modal_cookie_effective: 'تاريخ السريان: 26 مارس 2026',
modal_cookie_updated: 'آخر تحديث: 26 مارس 2026',
modal_cookie_what_title: 'ما هي ملفات تعريف الارتباط؟',
modal_cookie_what_desc: 'ملفات تعريف الارتباط هي ملفات نصية صغيرة تستخدم لتخزين أجزاء صغيرة من المعلومات على جهازك عند زيارة موقعنا الإلكتروني.',
modal_cookie_how_title: 'كيف نستخدم ملفات تعريف الارتباط؟',
modal_cookie_how_desc: 'نحن نستخدم ملفات تعريف الارتباط لضمان عمل موقعنا الإلكتروني بشكل صحيح، وتعزيز الأمان، وتوفير تجربة مستخدم أفضل، وتحليل الأداء.',
modal_cookie_types_title: 'أنواع ملفات تعريف الارتباط التي نستخدمها',
modal_cookie_types_list: '• ملفات تعريف الارتباط الأساسية: مطلوبة لعمل الموقع الإلكتروني بشكل صحيح<br>• ملفات تعريف الارتباط التحليلية: تساعدنا على فهم كيفية تفاعل الزوار مع موقعنا الإلكتروني<br>• ملفات تعريف الارتباط التسويقية: تستخدم لتتبع الزوار عبر مواقع الويب<br>• ملفات تعريف الارتباط الوظيفية: تمكن الوظائف المحسنة والتخصيص',
modal_cookie_manage_title: 'إدارة تفضيلات ملفات تعريف الارتباط',
modal_cookie_manage_desc: 'يمكنك تعديل إعدادات ملفات تعريف الارتباط في أي وقت من خلال إعدادات المتصفح.',
modal_cookie_manage_list: '• Chrome: https://support.google.com/accounts/answer/32050<br>• Safari، Firefox، Edge: يرجى الرجوع إلى وثائق المتصفح المعنية',
eng_tag: 'خدمات الهندسة',
eng_h2: 'اختبار ووضع منظومات السلامة من الحرائق',
eng_desc: 'مهندسون معتمدون من سيمنز مع عقد من الخبرة في مشاريع أرامكو، stc وبترو رابغ.',
eng_s1_title: 'الاختبار والوضع',
eng_s2_title: 'تصميم منظومات إنذار الحريق',
eng_s2_desc: 'تصميم متوافق مع NFPA وكود الحريق السعودي من مسح الموقع إلى التسليم النهائي وتوثيق AutoCAD.',
eng_item1: 'التحقق من دقة نظام الغاز',
eng_item2: 'برمجة الوظائف المنطقية',
eng_item3: 'عنونة الأجهزة وإنهاء الحلقة',
eng_item4: 'اختبار Pre-FAT و FAT الكامل',
eng_item5: 'التكامل مع BACnet والوضع',
eng_item6: 'مسح المواقع وتقييم المخاطر',
eng_item7: 'أنظمة تقليدية وقابلة للعنونة ولاسلكية',
eng_item8: 'استراتيجية وضع المعدات والتقسيم',
eng_item9: 'التكامل مع نظام الإطفاء وأنظمة إدارة المباني والسلامة',
eng_item10: 'التوثيق الكامل ورسومات AutoCAD',
mp_tag: 'حلول القوى العاملة',
mp_h2: 'أي دور. أي مقياس.',
mp_desc: 'قوى عاملة ماهرة وغير ماهرة من جنوب وجنوب شرق آسيا، يتم نشرها مع إجراءات التأشيرة والتوثيق الكاملة.',
mp_col1: 'غير ماهر وعام',
mp_col2: 'شبه ماهر',
mp_col3: 'ماهر واحترافي',
mp_item1: 'عمال المصانع والإنتاج',
mp_item2: 'النظافة والخدمات الفندقية',
mp_item3: 'المساعدون والعمالة العامة',
mp_item4: 'مساعدو الطبخ والمطابخ',
mp_item5: 'عمال المناظر الطبيعية والحدائق',
mp_item6: 'العمال الزراعيون',
mp_item7: 'السائقون (خفيفة، ثقيلة، حافلات)',
mp_item8: 'حراس الأمن وضباط السلامة',
mp_item9: 'مساعدو الرعاية الصحية والممرضات',
mp_item10: 'مشغلو المستودعات والرافعات',
mp_item11: 'الرسامون والبناؤون وبلطيون',
mp_item12: 'لحامون وعمّال سقالات',
mp_item13: 'المهندسون والفنيون',
mp_item14: 'محترفو تكنولوجيا المعلومات',
mp_item15: 'الطاقم الطبي والمتخصصون',
mp_item16: 'مديرو المشاريع (PMP)',
mp_item17: 'موظفو الإدارة والمراقبة',
mp_item18: 'متخصصو المشتريات',
about_tag: 'من نحن',
about_h2: 'سعودية الأساس.<br>معتمدة عالمياً.',
about_p1: 'MSC Arabia هي شركة مقرها الرياض تقدم خدمات تكنولوجيا المعلومات المدارة، ترخيص إدارة الأجهزة المحمولة، وتوريد الأجهزة والبرامج، وهندسة السلامة من الحرائق، وحلول القوى العاملة في جميع أنحاء المملكة العربية السعودية.',
about_p2: 'يحمل مهندسونا معرفات وصول دائمة لأرامكو، stc وبترو رابغ، ويجمعون بين الشهادات الدولية وخبرة عميقة في السوق السعودي.',
about_stat1: 'سنوات التشغيل في المملكة العربية السعودية',
about_stat2: 'عملاء مؤسسيون نشطون',
about_stat3: 'عاملين تم توظيفهم بنجاح',
about_stat4: 'تغطية دعم تكنولوجيا المعلومات المُدار',
footer_addr: 'Riyadh 13223, Saudi Arabia',
footer_email: 'info@mscarabia.com'
}
};
function initClientsStrip() {
var tpl = document.getElementById('clients-chip-template');
var sets = document.querySelectorAll('[data-clients-set]');
if (!tpl || !sets.length) return;
var keys = [];
for (var i = 1; i <= 11; i++) keys.push('client_' + i);
sets.forEach(function (set) {
set.innerHTML = '';
keys.forEach(function (key) {
var frag = tpl.content.cloneNode(true);
var span = frag.querySelector('span');
if (span) span.setAttribute('data-i18n', key);
set.appendChild(frag);
});
});
}
var marqueeOffset = 0;
var marqueeSpeed = 0.72;
var marqueeTarget = 0.72;
var marqueeRaf = null;
var marqueeSetW = 0;
function marqueeFrame() {
var track = document.getElementById('clients-track');
if (!track) {
marqueeRaf = requestAnimationFrame(marqueeFrame);
return;
}
marqueeSpeed += (marqueeTarget - marqueeSpeed) * 0.09;
if (marqueeSpeed < 0.04) marqueeSpeed = 0.04;
if (!marqueeSetW) {
marqueeRaf = requestAnimationFrame(marqueeFrame);
return;
}
marqueeOffset -= marqueeSpeed;
if (marqueeOffset <= -marqueeSetW) marqueeOffset += marqueeSetW;
track.style.transform = 'translate3d(' + marqueeOffset + 'px,0,0)';
marqueeRaf = requestAnimationFrame(marqueeFrame);
}
function initClientsMarquee() {
var vp = document.getElementById('clients-viewport');
var track = document.getElementById('clients-track');
if (!vp || !track) return;
function measure() {
var firstSet = track.querySelector('.clients-set');
marqueeSetW = firstSet ? firstSet.getBoundingClientRect().width : 0;
if (marqueeSetW) {
while (marqueeOffset <= -marqueeSetW) marqueeOffset += marqueeSetW;
while (marqueeOffset > 0) marqueeOffset -= marqueeSetW;
}
}
window._remeasureClientsMarquee = measure;
measure();
window.addEventListener('resize', measure);
vp.addEventListener('mouseenter', function () { marqueeTarget = 0.05; });
vp.addEventListener('mouseleave', function () { marqueeTarget = 0.72; });
if (marqueeRaf) cancelAnimationFrame(marqueeRaf);
marqueeRaf = requestAnimationFrame(marqueeFrame);
}
function applyI18nElement(element) {
const key = element.getAttribute('data-i18n');
if (!key || !translations[currentLang][key]) return;
const raw = translations[currentLang][key];
const text = toArabicNumbers(raw);
if (element.hasAttribute('data-i18n-html')) {
element.innerHTML = text;
} else {
element.textContent = text;
}
}
function toggleLang() {
const content = document.getElementById('main-content');
if (content) content.classList.add('lang-transition');
setTimeout(() => {
currentLang = currentLang === 'en' ? 'ar' : 'en';
persistLang();
wordIndex = 0;
charIndex = 0;
isDeleting = false;
clearTimeout(typeWriterTimeout);
applyDocumentLocale();
typeWriter();
if (content) {
setTimeout(() => {
content.classList.remove('lang-transition');
}, 30);
}
}, 250);
}
function updateLangSwitchUI() {
const isAr = currentLang === 'ar';
['lang-ios', 'lang-ios-mobile'].forEach(id => {
const b = document.getElementById(id);
if (b) b.setAttribute('aria-checked', isAr ? 'true' : 'false');
});
const labAr = 'العربية';
const labEn = 'English';
const el = document.getElementById('lang-ios-label');
const em = document.getElementById('lang-ios-label-m');
if (el) el.textContent = isAr ? labEn : labAr;
if (em) em.textContent = isAr ? labEn : labAr;
}
function toggleA11y() {
document.getElementById('a11y-menu').classList.toggle('open');
}
function adjustTextSize(delta) {
const html = document.documentElement;
const currentSize = parseFloat(getComputedStyle(html).fontSize);
html.style.fontSize = (currentSize + delta) + 'px';
}
function toggleTheme() {
const isLight = document.documentElement.classList.toggle('light');
document.documentElement.classList.remove('contrast');
document.documentElement.classList.toggle('dark', !isLight);
localStorage.setItem('msc_theme', isLight ? 'light' : 'dark');
}
function toggleContrast() {
const isContrast = document.documentElement.classList.toggle('contrast');
if (isContrast) {
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}
localStorage.setItem('msc_theme', isContrast ? 'contrast' : (document.documentElement.classList.contains('light') ? 'light' : 'dark'));
}
// Add to init/DOMContentLoaded
const savedTheme = localStorage.getItem('msc_theme') || 'dark';
document.documentElement.classList.toggle('light', savedTheme === 'light');
document.documentElement.classList.toggle('dark', savedTheme === 'dark' || savedTheme === 'contrast');
document.documentElement.classList.toggle('contrast', savedTheme === 'contrast');
// Modal Functions
function openModal(type) {
document.getElementById(`${type}-modal`).classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeModal(type) {
document.getElementById(`${type}-modal`).classList.remove('open');
document.body.style.overflow = '';
}
// Mobile menu toggle
function toggleMenu() {
const mm = document.getElementById('mm');
const hbg = document.getElementById('hbg');
const mobileMenu = document.getElementById('mobile-menu');
mm.classList.toggle('hidden');
mobileMenu.classList.toggle('hidden');
hbg.classList.toggle('active');
}
function closeMenu() {
const mm = document.getElementById('mm');
const hbg = document.getElementById('hbg');
const mobileMenu = document.getElementById('mobile-menu');
mm.classList.add('hidden');
mobileMenu.classList.add('hidden');
hbg.classList.remove('active');
}
// Form Submission
function handleSubmit(event) {
event.preventDefault();
var form = event.target;
var nameEl = document.getElementById('name');
var emailEl = document.getElementById('email');
var serviceEl = form.querySelector('select[name="service"]');
var messageEl = document.getElementById('message');
var submitBtn = form.querySelector('button[type="submit"]');
if (!nameEl || !emailEl || !submitBtn) return;
var name = nameEl.value.trim();
var email = emailEl.value.trim();
var service = serviceEl ? serviceEl.value : '';
var serviceText = serviceEl ? serviceEl.options[serviceEl.selectedIndex].textContent.trim() : '';
var message = messageEl ? messageEl.value.trim() : '';
var originalBtnText = submitBtn.textContent;
submitBtn.disabled = true;
submitBtn.textContent = translations[currentLang].mq_notice_sending || 'Sending...';
var formData = new FormData();
formData.append('name', name);
formData.append('email', email);
formData.append('service', serviceText);
formData.append('message', message);
formData.append('subject', 'MSC Arabia Contact — ' + (serviceText || 'General'));
fetch('contact.php', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
alert(currentLang === 'ar' ? 'تم الإرسال بنجاح!' : 'Message sent successfully!');
form.reset();
} else {
throw new Error('Server error');
}
})
.catch(error => {
// Fallback to mailto if PHP fails or not available
var subject = 'MSC Arabia Contact — ' + (serviceText || 'General');
var body = 'Name: ' + name + '\nEmail: ' + email + '\nService: ' + serviceText + '\n\nMessage:\n' + message;
window.location.href = 'mailto:info@mscarabia.com?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
})
.finally(() => {
submitBtn.disabled = false;
submitBtn.textContent = originalBtnText;
});
}
// Manpower Free Quote (mailto generator)
const MQ_PROF_MAP = {
cleaner: 'mq_prof_cleaner',
general_labor: 'mq_prof_general_labor',
security_hse: 'mq_prof_security_hse',
technician_engineer: 'mq_prof_technician_engineer',
driver: 'mq_prof_driver',
custom: 'mq_prof_custom'
};
function initManpowerQuote() {
var employeesEl = document.getElementById('mq_employees');
var employeesValEl = document.getElementById('mq_employees_val');
var durationEl = document.getElementById('mq_duration');
var durationValEl = document.getElementById('mq_duration_val');
var permanentEl = document.getElementById('mq_permanent');
var budgetEl = document.getElementById('mq_budget');
var budgetValEl = document.getElementById('mq_budget_val');
var budgetUnitEl = document.getElementById('mq_budget_unit');
var totalValEl = document.getElementById('mq_total_val');
var totalBreakdownEl = document.getElementById('mq_total_breakdown');
var transEl = document.getElementById('mq_trans');
var profCustomCheckbox = document.getElementById('mq_prof_custom_checkbox');
var profCustomInput = document.getElementById('mq_prof_custom_input');
var nationalitySelect = document.getElementById('mq_nationality');
var nationalityCustomInput = document.getElementById('mq_nationality_custom_input');
if (!employeesEl || !employeesValEl || !durationEl || !durationValEl || !budgetEl || !budgetValEl || !totalValEl) return;
var budgetMode = 'monthly'; // 'monthly' or 'yearly'
// Toggle custom profession input visibility
if (profCustomCheckbox && profCustomInput) {
var profWrap = document.getElementById('mq_prof_custom_wrap');
profCustomCheckbox.addEventListener('change', function() {
if (this.checked) {
profWrap.classList.add('open');
profCustomInput.focus();
} else {
profWrap.classList.remove('open');
profCustomInput.value = '';
}
});
}
// Toggle custom nationality input visibility
if (nationalitySelect && nationalityCustomInput) {
var natWrap = document.getElementById('mq_nationality_custom_wrap');
nationalitySelect.addEventListener('change', function() {
if (this.value === 'custom') {
natWrap.classList.add('open');
nationalityCustomInput.focus();
} else {
natWrap.classList.remove('open');
nationalityCustomInput.value = '';
}
});
}
function updateEmployees() {
var v = parseInt(employeesEl.value) || 0;
if (v > 1000) {
employeesValEl.textContent = translations[currentLang].mq_workers_plus || '1000+ workers';
} else {
var suffix = translations[currentLang].mq_workers || 'workers';
employeesValEl.textContent = toArabicNumbers(String(v)) + ' ' + suffix;
}
updateTotal();
}
function updateDuration() {
var perm = permanentEl && permanentEl.checked;
durationEl.disabled = !!perm;
if (perm) {
durationValEl.textContent = translations[currentLang].mq_permanent_label || translations[currentLang].mq_permanent || 'Permanent';
updateTotal();
return;
}
var v = parseInt(durationEl.value) || 1;
var label = '';
if (v <= 12) {
// 1 to 12 months
var unitKey = v === 1 ? 'mq_month' : 'mq_months';
label = toArabicNumbers(String(v)) + ' ' + (translations[currentLang][unitKey] || 'months');
} else if (v >= 13 && v <= 24) {
// 1 to 12 years (Value 13 is 1 year, 14 is 2 years, etc.)
var years = v - 12;
var unitKey = years === 1 ? 'mq_year' : 'mq_years';
label = toArabicNumbers(String(years)) + ' ' + (translations[currentLang][unitKey] || 'years');
} else {
// 25 is permanent
label = translations[currentLang].mq_permanent_label || translations[currentLang].mq_permanent || 'Permanent';
}
durationValEl.textContent = label;
updateTotal();
}
function updateBudget() {
var v = parseInt(budgetEl.value) || 1;
var realValue = 0;
if (v <= 40) {
budgetMode = 'monthly';
realValue = 1000 + (v - 1) * 100; // 1000 to 4900... actually let's make it 5000
if (v === 40) realValue = 5000;
budgetUnitEl.textContent = translations[currentLang].mq_budget_per || 'SAR / person / month';
} else {
budgetMode = 'yearly';
realValue = 12000 + (v - 41) * 1200; // 12000 to 60000
budgetUnitEl.textContent = translations[currentLang].mq_budget_per_year || 'SAR / person / year';
}
budgetValEl.textContent = toArabicNumbers(String(realValue)) + ' ' + (budgetMode === 'monthly' ? 'SAR/mo' : 'SAR/yr');
updateTotal();
}
function updateTotal() {
var workers = parseInt(employeesEl.value) || 0;
var vBudget = parseInt(budgetEl.value) || 1;
var budget = 0;
if (vBudget <= 40) {
budget = 1000 + (vBudget - 1) * 100;
if (vBudget === 40) budget = 5000;
} else {
budget = 12000 + (vBudget - 41) * 1200;
}
var durationVal = parseInt(durationEl.value) || 1;
var perm = permanentEl && permanentEl.checked;
// If 1000+, we treat as 1000 for estimate
var calcWorkers = workers > 1000 ? 1000 : workers;
var total = 0;
var multiplier = 1;
if (perm || durationVal === 25) {
// Permanent: show monthly cost as base or just total for 1 month
total = calcWorkers * (vBudget <= 40 ? budget : budget / 12);
} else if (durationVal <= 12) {
// Months
var months = durationVal;
total = calcWorkers * (vBudget <= 40 ? budget * months : (budget / 12) * months);
multiplier = months;
} else {
// Years
var years = durationVal - 12;
total = calcWorkers * (vBudget <= 40 ? budget * (years * 12) : budget * years);
multiplier = years;
}
var formattedTotal = new Intl.NumberFormat(currentLang === 'ar' ? 'ar-SA' : 'en-US', {
maximumFractionDigits: 0
}).format(total);
totalValEl.textContent = 'SAR ' + toArabicNumbers(formattedTotal) + (workers > 1000 ? '+' : '');
var breakdownText = '';
if (perm || durationVal === 25) {
breakdownText = toArabicNumbers(String(workers > 1000 ? '1000+' : workers)) + ' ' +
(translations[currentLang].mq_workers || 'workers') + ' × SAR ' +
toArabicNumbers(String(budget)) + ' (' + (vBudget <= 40 ? 'Monthly' : 'Yearly') + ')';
} else {
breakdownText = toArabicNumbers(String(workers > 1000 ? '1000+' : workers)) + ' ' +
(translations[currentLang].mq_workers || 'workers') + ' × SAR ' +
toArabicNumbers(String(budget)) + ' × ' + toArabicNumbers(String(multiplier)) + ' ' +
(durationVal <= 12 ? (translations[currentLang].mq_months || 'months') : (translations[currentLang].mq_years || 'years'));
}
totalBreakdownEl.textContent = breakdownText;
}
employeesEl.addEventListener('input', updateEmployees);
durationEl.addEventListener('input', updateDuration);
if (permanentEl) permanentEl.addEventListener('change', updateDuration);
budgetEl.addEventListener('input', updateBudget);
// Expose to language toggler
window._updateManpowerQuoteUI = function() {
updateEmployees();
updateDuration();
// Update budget unit based on mode
if (budgetMode === 'monthly') {
budgetUnitEl.textContent = translations[currentLang].mq_budget_per || 'SAR / person / month';
} else {
budgetUnitEl.textContent = translations[currentLang].mq_budget_per_year || 'SAR / person / year';
}
updateBudget();
updateTotal();
};
window._updateManpowerQuoteUI();
}
function handleManpowerQuote(event) {
event.preventDefault();
var form = event.target;
var notice = document.getElementById('mq_notice');
var submitBtn = form.querySelector('button[type="submit"]');
if (notice) notice.textContent = (translations[currentLang].mq_notice_sending || 'Opening your email client...');
var nameEl = document.getElementById('mq_name');
var emailEl = document.getElementById('mq_email');
var employeesEl = document.getElementById('mq_employees');
var durationEl = document.getElementById('mq_duration');
var permanentEl = document.getElementById('mq_permanent');
var budgetEl = document.getElementById('mq_budget');
var nationalityEl = document.getElementById('mq_nationality');
var startDateEl = document.getElementById('mq_start_date');
if (!nameEl || !emailEl || !employeesEl || !durationEl || !budgetEl || !startDateEl) return;
var mqName = (nameEl.value || '').trim();
var mqEmail = (emailEl.value || '').trim();
var workers = parseInt(employeesEl.value) || 0;
var workersLabel = workers > 1000 ? '1000+' : String(workers);
var durationVal = parseInt(durationEl.value);
var durationLabel = '';
if (permanentEl && permanentEl.checked) {
durationLabel = translations[currentLang].mq_permanent_label || 'Permanent';
} else if (durationVal <= 12) {
durationLabel = toArabicNumbers(String(durationVal)) + ' ' + (translations[currentLang][durationVal === 1 ? 'mq_month' : 'mq_months'] || 'months');
} else if (durationVal >= 13 && durationVal <= 24) {
var yrs = durationVal - 12;
durationLabel = toArabicNumbers(String(yrs)) + ' ' + (translations[currentLang][yrs === 1 ? 'mq_year' : 'mq_years'] || 'years');
} else {
durationLabel = translations[currentLang].mq_permanent_label || 'Permanent';
}
var profs = [];
var profInputs = document.querySelectorAll('input[name="mq_prof"]:checked');
profInputs.forEach(function (inp) {
var key = MQ_PROF_MAP[inp.value];
if (key && translations[currentLang][key]) profs.push(translations[currentLang][key]);
});
// Add custom profession if checked and filled
var profCustomCheckbox = document.getElementById('mq_prof_custom_checkbox');
var profCustomInput = document.getElementById('mq_prof_custom_input');
if (profCustomCheckbox && profCustomCheckbox.checked && profCustomInput && profCustomInput.value.trim()) {
profs.push(profCustomInput.value.trim());
}
if (!profs.length) profs = [translations[currentLang].mq_not_specified || 'Not specified'];
var foodYesNo = (document.getElementById('mq_food') || {}).checked ? (translations[currentLang].mq_yes || 'Yes') : (translations[currentLang].mq_no || 'No');
var accomYesNo = (document.getElementById('mq_accom') || {}).checked ? (translations[currentLang].mq_yes || 'Yes') : (translations[currentLang].mq_no || 'No');
var transYesNo = (document.getElementById('mq_trans') || {}).checked ? (translations[currentLang].mq_yes || 'Yes') : (translations[currentLang].mq_no || 'No');
var budget = budgetEl.value || '0';
var budgetMode = document.getElementById('budget_monthly_btn').classList.contains('active') ? 'Monthly' : 'Yearly';
var budgetPer = budgetMode === 'Monthly' ?
(translations[currentLang].mq_budget_per || 'SAR / person / month') :
(translations[currentLang].mq_budget_per_year || 'SAR / person / year');
var nationality = nationalityEl ? nationalityEl.options[nationalityEl.selectedIndex].text : '-';
// If custom nationality is selected, use the custom input value
var nationalityCustomInput = document.getElementById('mq_nationality_custom_input');
if (nationalityEl && nationalityEl.value === 'custom' && nationalityCustomInput && nationalityCustomInput.value.trim()) {
nationality = nationalityCustomInput.value.trim();
}
var startDate = startDateEl.value || '-';
var subject = (translations[currentLang].mq_subject || 'Manpower Free Quote Request') + ' — ' + toArabicNumbers(workersLabel) + ' ' + (translations[currentLang].mq_workers || 'workers');
var body =
'Name: ' + (mqName || '-') + '\n' +
'Email: ' + (mqEmail || '-') + '\n' +
'Nationality: ' + (nationality || '-') + '\n\n' +
(translations[currentLang].mq_employees || 'Workers') + ': ' + toArabicNumbers(workersLabel) + '\n' +
(translations[currentLang].mq_duration || 'Duration') + ': ' + durationLabel + '\n' +
(translations[currentLang].mq_profession || 'Profession') + ': ' + profs.join(', ') + '\n' +
(translations[currentLang].mq_food || 'Food') + ': ' + foodYesNo + '\n' +
(translations[currentLang].mq_accommodation || 'Accommodation') + ': ' + accomYesNo + '\n' +
(translations[currentLang].mq_trans_short || 'Transportation') + ': ' + transYesNo + '\n' +
(translations[currentLang].mq_budget || 'Budget') + ': ' + toArabicNumbers(String(budget)) + ' ' + budgetPer + '\n' +
(translations[currentLang].mq_start_date || 'Start date') + ': ' + startDate;
var originalBtnText = submitBtn ? submitBtn.textContent : '';
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.textContent = translations[currentLang].mq_notice_sending || 'Sending...';
}
var formData = new FormData();
formData.append('name', mqName);
formData.append('email', mqEmail);
formData.append('workers', workersLabel);
formData.append('duration', durationLabel);
formData.append('profession', profs.join(', '));
formData.append('food', foodYesNo);
formData.append('accommodation', accomYesNo);
formData.append('transportation', transYesNo);
formData.append('budget', budget + ' ' + budgetPer);
formData.append('nationality', nationality);
formData.append('start_date', startDate);
formData.append('subject', subject);
fetch('contact.php', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
alert(currentLang === 'ar' ? 'تم طلب عرض السعر بنجاح!' : 'Quote request sent successfully!');
form.reset();
if (typeof window._updateManpowerQuoteUI === 'function') window._updateManpowerQuoteUI();
} else {
throw new Error('Server error');
}
})
.catch(error => {
// Fallback to mailto
window.location.href = 'mailto:info@mscarabia.com?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
})
.finally(() => {
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.textContent = originalBtnText;
}
});
}
// Arabic Number Converter
function toArabicNumbers(str) {
if (currentLang !== 'ar') return str;
const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
return str.toString().replace(/[0-9]/g, (digit) => arabicNumbers[parseInt(digit)]);
}
// Typewriter Effect
const words = {
en: ['IT', 'Engineering', 'Security', 'Cloud'],
ar: ['تقنية', 'هندسة', 'أمان', 'سحابة']
};
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
let typeWriterTimeout;
function typeWriter() {
const currentWords = words[currentLang] || words.en;
const currentWord = currentWords[wordIndex];
const twElement = document.getElementById('tw-word');
if (!twElement || !currentWord) return;
if (isDeleting) {
twElement.textContent = currentWord.substring(0, charIndex - 1);
charIndex--;
} else {
twElement.textContent = currentWord.substring(0, charIndex + 1);
charIndex++;
}
if (!isDeleting && charIndex === currentWord.length) {
isDeleting = true;
typeWriterTimeout = setTimeout(typeWriter, 2000);
} else if (isDeleting && charIndex === 0) {
isDeleting = false;
wordIndex = (wordIndex + 1) % currentWords.length;
typeWriterTimeout = setTimeout(typeWriter, 500);
} else {
typeWriterTimeout = setTimeout(typeWriter, isDeleting ? 50 : 100);
}
}
// Initialize
document.addEventListener('DOMContentLoaded', function() {
initClientsStrip();
currentLang = readStoredLang();
applyDocumentLocale();
initManpowerQuote();
initBackToTop();
initSideNav();
requestAnimationFrame(function () {
initClientsMarquee();
});
typeWriter();
// Close modals on escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.modal-overlay.open').forEach(modal => {
const type = modal.id.replace('-modal', '');
closeModal(type);
});
}
});
// Close modals on background click
document.querySelectorAll('.modal-overlay').forEach(modal => {
modal.addEventListener('click', function(e) {
if (e.target === modal) {
const type = modal.id.replace('-modal', '');
closeModal(type);
}
});
});
});
// Tawk.to Chatbot
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/69cfa6ea8153c41c3b4dd284/1jl9i81c0';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
</body>
</html>
Raw
Manus version.html
<!DOCTYPE html>
<html lang="en" id="html-root" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<link rel="icon" type="image/png" href="logo.png">
<link rel="shortcut icon" href="logo.png">
<meta name="description" content="MSC Arabia - Riyadh's leading provider of Managed IT Services, Fire Safety Engineering, Manpower Solutions, and IT Hardware Procurement. Certified for Aramco, STC & Petro Rabigh.">
<meta name="keywords" content="Managed IT Services Riyadh, Fire Safety Engineering KSA, Manpower Supply Saudi Arabia, IT Hardware Procurement, MDM Licensing Saudi, Siemens Fire Systems, Aramco Certified Engineers, STC Approved IT Vendor, Petro Rabigh IT Support, Saudi Vision 2030 IT Partner, IT Staffing KSA, Business IT Solutions Riyadh">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="author" content="ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY">
<meta name="geo.region" content="SA-01">
<meta name="geo.placename" content="Riyadh">
<meta name="geo.position" content="24.7136;46.6753">
<meta name="ICBM" content="24.7136, 46.6753">
<meta name="theme-color" content="#c91c1c">
<meta name="msapplication-TileColor" content="#c91c1c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="canonical" href="https://mscarabia.com">
<link rel="alternate" hreflang="en" href="https://mscarabia.com/">
<link rel="alternate" hreflang="ar" href="https://mscarabia.com/?lang=ar">
<link rel="alternate" hreflang="x-default" href="https://mscarabia.com/">
<link rel="sitemap" type="application/xml" href="/sitemap.xml">
<meta property="og:title" content="MSC Arabia – IT Managed Services, Fire Safety & Manpower Solutions | Riyadh KSA">
<meta property="og:description" content="Saudi-based IT managed services, MDM licensing, fire safety engineering, and manpower solutions. Aramco, STC & Petro Rabigh approved. 10+ years serving KSA.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://mscarabia.com">
<meta property="og:image" content="https://mscarabia.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_SA">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MSC Arabia – IT Managed Services & Fire Safety | Riyadh KSA">
<meta name="twitter:description" content="Saudi-based IT managed services, MDM licensing, fire safety engineering, and manpower solutions. Trusted by Aramco, STC & Petro Rabigh.">
<title>MSC Arabia | IT Managed Services, MDM Licensing & Fire Safety | Riyadh Saudi Arabia</title>
<!-- Enhanced Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY",
"alternateName": "MSC Arabia",
"description": "Saudi-based IT managed services, MDM licensing, fire safety engineering, and manpower solutions. Aramco, STC & Petro Rabigh approved with 10+ years serving KSA.",
"url": "https://mscarabia.com",
"email": "info@mscarabia.com",
"address": {
"@type": "PostalAddress",
"streetAddress": "6787 Abdulrahman Al Nasser, Al Khaleej Dist.",
"addressLocality": "Riyadh",
"postalCode": "13223",
"addressCountry": "SA",
"name": "ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY"
},
"areaServed": "SA",
"serviceType": ["IT Infrastructure", "Managed IT Services", "MDM Licensing", "Cybersecurity", "Cloud Computing", "Fire Safety Engineering", "Manpower Supply", "Hardware & Software Procurement"],
"taxID": "312900114900003",
"vatID": "312900114900003",
"hasCredential": [
{
"@type": "EducationalOccupationalCredential",
"name": "PMP Certification",
"credentialCategory": "Professional Certification"
},
{
"@type": "EducationalOccupationalCredential",
"name": "PMI-ACP Certification",
"credentialCategory": "Professional Certification"
},
{
"@type": "EducationalOccupationalCredential",
"name": "Siemens Fire Systems Certification",
"credentialCategory": "Technical Certification"
},
{
"@type": "EducationalOccupationalCredential",
"name": "BACnet Integration",
"credentialCategory": "Technical Certification"
}
],
"employee": {
"@type": "QuantitativeValue",
"minValue": 10,
"maxValue": 50,
"unitText": "employees"
},
"knowsLanguage": ["English", "Arabic"],
"openingHours": "Mo-Fr 09:00-18:00",
"priceRange": "$$",
"paymentAccepted": ["Cash", "Credit Card", "Bank Transfer"],
"currenciesAccepted": "SAR"
}
</script>
<!-- Apollo Tracking -->
<script>
function initApollo(){
var n=Math.random().toString(36).substring(7),
o=document.createElement("script");
o.src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache="+n,
o.async=!0,
o.defer=!0,
o.onload=function(){window.trackingFunctions.onLoad({appId:"67cd695b9ee4fe0019e6e9dd"})},
document.head.appendChild(o)
}
initApollo();
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KKZ292TR');</script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NGXKXV7EGM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-NGXKXV7EGM');
</script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBMPlexSansArabic:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms" defer></script>
<script>
tailwind.config={
darkMode:"class",
theme:{
extend:{
colors:{
"surface":"#10131b",
"surface-low":"#181b23",
"surface-high":"#272a32",
"surface-highest":"#32353d",
"surface-lowest":"#0b0e15",
"primary":"#ffb4aa",
"primary-c":"#c91c1c",
"on-sv":"#9aa3b8"
},
fontFamily:{
sans:["Plus Jakarta Sans","IBM Plex Sans Arabic","sans-serif"],
mono:["DM Mono","monospace"]
}
}
}
}
</script>
<!-- Enhanced Styles -->
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Plus Jakarta Sans","IBM Plex Sans Arabic",sans-serif;background:#10131b;color:#e0e2ed;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.et{letter-spacing:-.02em}
/* RTL Support */
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","Plus Jakarta Sans",sans-serif;direction:rtl;text-align:right}
html[dir="rtl"] .et{letter-spacing:0}
html[dir="rtl"] .flip-rtl{flex-direction:row-reverse}
html[dir="rtl"] .ml-auto-rtl{margin-right:auto;margin-left:0}
html[dir="rtl"] .text-left-rtl{text-align:right}
html[dir="rtl"] .text-right-rtl{text-align:left}
/* Navigation */
.glass-nav{background:rgba(24,27,35,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.lang-btn{cursor:pointer;font-family:"DM Mono";font-size:.7rem;font-weight:700;padding:.4rem .8rem;border-radius:6px;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);background:transparent;transition:all .18s;letter-spacing:.06em;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.lang-btn:hover{border-color:rgba(201,28,28,.4);color:#fff}
.lang-ios-wrap{display:inline-flex;align-items:center;gap:.55rem;flex-direction:row;direction:ltr}
.lang-ios-label{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.72);min-width:3.4rem;user-select:none;text-align:end}
html[dir="rtl"] .lang-ios-label{text-align:start}
.lang-ios{position:relative;width:3.25rem;height:1.85rem;border-radius:999px;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .35s ease;flex-shrink:0}
.lang-ios[aria-checked="true"]{background:rgba(201,28,28,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.lang-ios-knob{position:absolute;top:3px;left:3px;width:calc(1.85rem - 6px);height:calc(1.85rem - 6px);border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.4,.0,.2,1)}
.lang-ios[aria-checked="true"] .lang-ios-knob{transform:translateX(1.4rem)}
.lang-ios:focus-visible{outline:2px solid #ffb4aa;outline-offset:2px}
.lang-ios-full{width:100%}
/* Background */
.circuit-bg{background-image:radial-gradient(ellipse 55% 70% at 75% 50%,rgba(201,28,28,.18) 0%,transparent 55%),radial-gradient(ellipse 40% 60% at 10% 80%,rgba(30,60,180,.07) 0%,transparent 50%),linear-gradient(135deg,rgba(8,11,18,1) 0%,rgba(8,11,18,.82) 55%,rgba(30,5,5,.65) 100%),url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1200&q=60&fm=webp");background-size:auto,auto,auto,cover;background-position:center}
.grid-overlay::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(201,28,28,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,28,28,.03) 1px,transparent 1px);background-size:52px 52px;pointer-events:none}
/* Premium UI - Scroll & Glass */
html { scroll-behavior: smooth; }
body { font-family: "IBM Plex Sans Arabic", "Plus Jakarta Sans", sans-serif; background: #0b0e15; color: #e0e2ed; -webkit-font-smoothing: antialiased; }
.snap-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; }
/* Premium UI - Restored with Layer Isolation to fix Glitching */
.glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
isolation: isolate;
contain: layout;
}
.glass-nav {
background: rgba(11, 14, 21, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
isolation: isolate;
}
.svc-card, .stat-bar, .modal-box, .a11y-menu {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
isolation: isolate;
contain: layout;
}
.svc-card:hover {
background: rgba(255, 255, 255, 0.06);
transform: translateY(-8px) scale(1.02);
border-color: rgba(201, 28, 28, 0.3);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 2rem;
left: 2rem;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: rgba(201, 28, 28, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(201, 28, 28, 0.2);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 90;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html[dir="rtl"] .back-to-top { left: auto; right: 2rem; }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #c91c1c; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(201, 28, 28, 0.3); }
/* Improved Carousel */
.clients-track { gap: 4rem; animation: marquee 60s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.clients-track:hover { animation-play-state: paused; }
.client-chip{
flex-shrink:0;
padding:1.25rem 2.25rem;
background:rgba(255,255,255,0.02);
border-radius:16px;
border:1px solid rgba(255,255,255,.05);
backdrop-filter:blur(10px);
transition:all .5s cubic-bezier(0.19, 1, 0.22, 1);
cursor:default;
position:relative;
margin:15px 0;
}
.client-chip span{font-size:1rem;font-weight:600;color:rgba(255,255,255,0.8);white-space:nowrap;display:block;line-height:1.25;letter-spacing:0.02em}
.client-chip:hover{
background:rgba(201,28,28,0.05);
border-color:rgba(201,28,28,0.4);
transform:translateY(-12px);
box-shadow:0 20px 40px rgba(0,0,0,0.5);
z-index:50;
}
.client-chip:hover span { color: #fff; }
/* Contrast Mode Overrides */
html.contrast { --bg: #000; --text: #fff; --accent: #ffff00; }
html.contrast body { background: #000 !important; color: #fff !important; }
html.contrast .glass, html.contrast .glass-nav, html.contrast .svc-card, html.contrast .stat-bar, html.contrast .a11y-menu, html.contrast .modal-box {
background: #000 !important;
border: 2px solid #fff !important;
backdrop-filter: none !important;
}
html.contrast h1, html.contrast h2, html.contrast h3, html.contrast h4, html.contrast p, html.contrast span, html.contrast li, html.contrast a {
color: #fff !important;
text-shadow: none !important;
}
html.contrast .text-[#c91c1c], html.contrast .bg-[#c91c1c], html.contrast .text-[#ffb4aa] {
color: #ffff00 !important;
}
html.contrast .bg-[#c91c1c] { background: #fff !important; color: #000 !important; font-weight: 900 !important; }
html.contrast .side-dot.active { background: #ffff00 !important; }
html.contrast .side-dot { background: #fff !important; }
html.contrast .compliance-badge { border: 2px solid #ffff00 !important; background: #000 !important; }
/* Accessibility & Fixed Toggle */
.a11y-panel { position: fixed; top: 0; right: 1.5rem; z-index: 110; display: flex; flex-direction: row; align-items: center; height: 80px; gap: 0.75rem; }
html[dir="rtl"] .a11y-panel { right: auto; left: 1.5rem; }
.a11y-btn { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: linear-gradient(135deg, #c91c1c 0%, #a01515 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(201,28,28,0.25); border: 1px solid rgba(201,28,28,0.3); cursor: pointer; transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); position: relative; z-index: 2; font-size: 1.1rem; }
.a11y-btn:hover { transform: scale(1.12); box-shadow: 0 8px 20px rgba(201,28,28,0.4); }
.a11y-btn:active { transform: scale(0.95); }
.a11y-menu {
width: 200px;
padding: 0.75rem;
border-radius: 12px;
display: none;
flex-direction: column;
gap: 4px;
box-shadow: 0 16px 40px rgba(0,0,0,0.6);
background: rgba(16, 19, 27, 0.98);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
}
html[dir="rtl"] .a11y-menu { right: auto; left: 0; }
.a11y-menu.open { display: flex; animation: slideDown 0.3s cubic-bezier(0.19, 1, 0.22, 1); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.a11y-item { padding: 0.75rem 1rem; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: #9aa3b8; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1); font-size: 0.875rem; font-weight: 500; }
.a11y-item:hover { background: rgba(201,28,28,0.2); border-color: rgba(201,28,28,0.4); color: #ffb4aa; transform: translateX(-2px); }
html[dir="rtl"] .a11y-item:hover { transform: translateX(2px); }
/* Horizontal Clients Carousel */
.clients-viewport { overflow: hidden; position: relative; width: 100%; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.clients-track { display: flex; width: max-content; gap: 3rem; animation: marquee 30s linear infinite; padding: 1rem 0; }
.clients-set { display: flex; gap: 3rem; align-items: center; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.clients-track:hover { animation-play-state: paused; }
.client-chip { flex-shrink: 0; padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.03); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); transition: all 0.3s; }
.client-chip:hover { background: rgba(201,28,28,0.1); border-color: rgba(201,28,28,0.3); transform: translateY(-5px); }
/* Restore iOS Style Language Toggle */
.lang-ios-wrap { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; }
.lang-ios-label { font-size: 0.75rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; }
.lang-ios {
position: relative;
width: 3rem;
height: 1.6rem;
border-radius: 999px;
background: rgba(255,255,255,0.1);
transition: background 0.3s;
border: 1px solid rgba(255,255,255,0.1);
}
.lang-ios[aria-checked="true"] { background: #c91c1c; }
.lang-ios-knob {
position: absolute;
top: 2px;
left: 2px;
width: calc(1.6rem - 6px);
height: calc(1.6rem - 6px);
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.lang-ios[aria-checked="true"] .lang-ios-knob { transform: translateX(1.4rem); }
/* Dark Date Picker */
input[type="date"] { color-scheme: dark; }
/* Premium Layout - Stabilized with Hardware Acceleration */
.snap-container { height: auto; overflow: visible; scroll-snap-type: none; }
body {
overflow-x: hidden;
width: 100%;
position: relative;
background: #0b0e15;
-webkit-font-smoothing: antialiased;
}
/* Force Hardware Acceleration on all major sections to prevent flickering */
section, footer, nav {
transform: translateZ(0);
will-change: transform;
contain: layout;
}
/* Smooth Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade { animation: fadeUp 0.6s ease forwards; }
.fade-d1 { animation: fadeUp 0.6s 0.1s ease both; }
.fade-d2 { animation: fadeUp 0.6s 0.2s ease both; }
.svc-card:hover { transform: translateY(-8px) scale(1.02); }
.btn-red:hover { transform: scale(1.02); }
@media (max-width: 768px) {
.snap-section { min-height: auto; padding-top: 4rem; padding-bottom: 4rem; }
.side-nav { display: none !important; }
}
/* Utilities & Components */
.tw-cur{animation:blink .88s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.float-b{animation:fb 4s ease-in-out infinite;will-change:transform;backface-visibility:hidden}
@keyframes fb{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.btn-red{box-shadow:0 0 22px rgba(201,28,28,.3),0 4px 16px rgba(0,0,0,.4);position:relative;overflow:hidden}
.btn-red::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transform:translateX(-100%);transition:transform .5s}
.btn-red:hover::after{transform:translateX(100%)}
.ghost-b{border-color:rgba(92,64,60,.15)}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 0 rgba(201,28,28,.5)}60%{box-shadow:0 0 0 5px rgba(201,28,28,0)}}
.stat-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#c91c1c,transparent);opacity:.5}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fade{animation:fadeUp .6s ease forwards;will-change:transform,opacity;backface-visibility:hidden}
.fade-d1{animation:fadeUp .6s .1s ease both;will-change:transform,opacity;backface-visibility:hidden}
.fade-d2{animation:fadeUp .6s .2s ease both;will-change:transform,opacity;backface-visibility:hidden}
/* Form Elements */
.expand-container { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; overflow: hidden; }
.expand-container.open { grid-template-rows: 1fr; }
.expand-content { min-height: 0; }
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; height: 1.25rem; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.08); border-radius: 999px; height: 0.4rem; transition: background 0.2s; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -0.45rem; background: #c91c1c; border-radius: 50%; height: 1.3rem; width: 1.3rem; border: 3px solid #181b23; box-shadow: 0 0 10px rgba(201, 28, 28, 0.4); transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s; }
input[type="range"]:hover::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.12); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); background: #ffb4aa; }
.budget-toggle-wrap { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 3px; gap: 2px; }
.budget-toggle-btn { padding: 6px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; color: #9aa3b8; transition: all 0.2s; cursor: pointer; }
.budget-toggle-btn.active { background: #c91c1c; color: #fff; box-shadow: 0 2px 8px rgba(201,28,28,0.3); }
.total-estimate-box { background: linear-gradient(135deg, rgba(201,28,28,0.15), rgba(201,28,28,0.05)); border: 1px solid rgba(201,28,28,0.2); border-radius: 16px; padding: 1.5rem; text-align: center; margin-bottom: 2rem; }
.total-estimate-val { font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 0.25rem; }
.total-estimate-label { font-size: 0.75rem; font-weight: 600; color: #ffb4aa; text-transform: uppercase; tracking: 0.1em; }
/* Modal & Badge */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{width:100%;max-width:640px;max-height:88vh;overflow-y:auto;padding:2.5rem;position:relative;transform:translateY(24px);transition:transform .4s cubic-bezier(0.19, 1, 0.22, 1); border-radius: 24px;}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-box h3{font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:.3rem}
.modal-box h4{font-size:.8rem;font-weight:700;color:#c91c1c;text-transform:uppercase;letter-spacing:.1em;margin:1.2rem 0 .5rem}
.modal-box p{color:#9aa3b8;font-size:.88rem;line-height:1.75;margin-bottom:.5rem}
.modal-box ul li{color:#9aa3b8;font-size:.86rem;padding:.28rem 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:flex-start;gap:.5rem}
.modal-box ul li::before{content:"\2192";color:#c91c1c;flex-shrink:0;font-size:.8rem;margin-top:.1rem}
.modal-close{position:absolute;top:1.5rem;right:1.5rem;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);border:none;color:#9aa3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .18s}
html[dir="rtl"] .modal-close{right:auto;left:1.5rem}
.modal-close:hover{background:rgba(201,28,28,.2);color:#fff}
.compliance-badge{background:rgba(201,28,28,.05);border:1px solid rgba(201,28,28,.15);border-radius:12px;padding:.75rem 1rem;font-size:.72rem;line-height:1.45;color:#ffb4aa;display:inline-flex;align-items:flex-start;gap:.6rem;max-width:100%;flex-wrap:wrap;backdrop-filter:blur(5px)}
.lang-ios-full{width:100%;justify-content:space-between}
html.contrast input::placeholder, html.contrast textarea::placeholder {
color: #fff !important;
opacity: 0.7 !important;
}
html.contrast input, html.contrast textarea, html.contrast select {
border: 2px solid #fff !important;
background: #000 !important;
color: #ffff00 !important;
}
</style>
</head>
<body class="bg-[#10131b]">
<!-- Side Dot Navigation -->
<div class="side-nav hidden lg:flex" id="side-nav">
<button class="side-dot active" data-section="home" data-label="Home" aria-label="Go to Home"></button>
<button class="side-dot" data-section="services" data-label="Services" aria-label="Go to Services"></button>
<button class="side-dot" data-section="engineering" data-label="Engineering" aria-label="Go to Engineering"></button>
<button class="side-dot" data-section="manpower" data-label="Manpower" aria-label="Go to Manpower"></button>
<button class="side-dot" data-section="about" data-label="About" aria-label="Go to About"></button>
<button class="side-dot" data-section="contact" data-label="Contact" aria-label="Go to Contact"></button>
</div>
<nav class="fixed top-0 left-0 right-0 z-40 glass-nav border-b border-white/[.04]">
<div class="max-w-7xl mx-auto px-5 lg:px-8 flex items-center justify-between h-16">
<div class="flex items-center gap-8">
<a href="#home" class="flex items-center gap-2.5 shrink-0">
<img src="./logo.png" alt="MSC Arabia" class="w-10 h-10 object-contain" onerror="this.src='https://via.placeholder.com/40x40?text=MSC'">
<span class="text-[1.05rem] font-extrabold tracking-tight text-white">MSC<span class="text-[#c91c1c]">Arabia</span></span>
</a>
<div class="hidden lg:flex items-center gap-6">
<a href="#services" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_services"></a>
<a href="#engineering" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_engineering"></a>
<a href="#manpower" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_manpower"></a>
<a href="#clients" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_clients"></a>
<a href="#about" class="text-[#9aa3b8] hover:text-white text-sm font-medium transition-colors" data-i18n="nav_about"></a>
</div>
</div>
<div class="flex items-center gap-4">
<!-- Accessibility Integrated -->
<div class="hidden md:flex relative items-center">
<button onclick="toggleA11y()" class="a11y-btn" aria-label="Accessibility options">
<span class="material-symbols-outlined">accessibility_new</span>
</button>
<div class="a11y-menu" id="a11y-menu">
<button onclick="adjustTextSize(1)" class="a11y-item">
<span class="material-symbols-outlined">format_size</span>
<span>A+</span>
</button>
<button onclick="adjustTextSize(-1)" class="a11y-item">
<span class="material-symbols-outlined">text_fields</span>
<span>A-</span>
</button>
<button onclick="toggleContrast()" class="a11y-item">
<span class="material-symbols-outlined">contrast</span>
<span data-i18n="a11y_theme">Contrast</span>
</button>
</div>
</div>
<!-- Language Switcher (iOS Style) -->
<div class="hidden md:flex lang-ios-wrap" onclick="toggleLang()">
<span class="lang-ios-label" id="lang-ios-label">AR</span>
<button class="lang-ios" id="lang-ios" aria-checked="false" aria-label="Toggle language">
<div class="lang-ios-knob"></div>
</button>
</div>
<a href="#contact" class="hidden md:inline-flex items-center bg-[#c91c1c] text-white text-xs font-bold uppercase tracking-widest px-5 py-2.5 rounded-xl btn-red transition-all" data-i18n="nav_cta"></a>
<button class="hbg flex lg:hidden flex-col gap-[4px] cursor-pointer p-1.5 bg-transparent border-none" id="hbg" onclick="toggleMenu()" aria-label="Menu">
<span class="block w-5 h-0.5 bg-white rounded-sm"></span>
<span class="block w-5 h-0.5 bg-white rounded-sm"></span>
<span class="block w-5 h-0.5 bg-white rounded-sm"></span>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mm" class="border-t border-white/[.04] bg-[#181b23] px-5 py-2 hidden">
<a href="#services" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_services"></a>
<a href="#engineering" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_engineering"></a>
<a href="#manpower" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_manpower"></a>
<a href="#clients" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_clients"></a>
<a href="#about" onclick="closeMenu()" class="block py-2.5 text-sm text-[#9aa3b8] hover:text-white border-b border-white/[.04]" data-i18n="nav_about"></a>
<a href="#contact" onclick="closeMenu()" class="block py-2.5 text-sm font-bold text-[#c91c1c]" data-i18n="nav_contact"></a>
<div class="mt-3 flex justify-center py-2 border-t border-white/[.04]">
<div class="lang-ios-wrap" onclick="toggleLang();closeMenu()">
<span class="lang-ios-label" id="lang-ios-label-m">العربية</span>
<button class="lang-ios" id="lang-ios-mobile" aria-checked="false" aria-label="Toggle language">
<div class="lang-ios-knob"></div>
</button>
</div>
</div>
</div>
</nav>
<div id="main-content" class="snap-container">
<!-- HERO Section -->
<section id="home" class="snap-section relative min-h-screen flex items-center pt-16 circuit-bg grid-overlay overflow-hidden">
<div class="premium-glow premium-glow-1"></div>
<div class="premium-glow premium-glow-2"></div>
<div class="relative z-10 max-w-7xl mx-auto px-5 lg:px-8 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center py-20 lg:py-0 w-full">
<div class="lg:col-span-7 fade">
<div class="inline-flex items-center gap-2 bg-[rgba(201,28,28,.1)] border border-[rgba(201,28,28,.22)] text-[#ffb4aa] text-[.63rem] font-bold uppercase tracking-[.18em] px-3 py-1.5 rounded-full mb-6">
<span class="w-1.5 h-1.5 bg-[#c91c1c] rounded-full" style="animation:pulse2 2s infinite"></span>
<span data-i18n="hero_pill"></span>
</div>
<h1 class="et font-extrabold text-white leading-[1.05] mb-6" style="font-size:clamp(2.2rem,5vw,4.2rem)">
<span data-i18n="hero_h1_1"></span><br>
<span class="text-[#c91c1c]" id="tw-word">IT</span><span class="tw-cur text-[#c91c1c] font-light">|</span><br>
<span data-i18n="hero_h1_3"></span>
</h1>
<p class="text-[#9aa3b8] leading-[1.78] mb-8 max-w-[520px]" style="font-size:clamp(.88rem,1.2vw,.97rem)" data-i18n="hero_sub"></p>
<div class="flex flex-wrap gap-3 mb-10">
<a href="#services" class="inline-flex items-center gap-2 bg-[#c91c1c] text-white text-sm font-bold uppercase tracking-widest px-7 py-3.5 rounded-md btn-red transition-all hover:scale-[1.02]">
<span class="material-symbols-outlined" style="font-size:15px">arrow_forward</span>
<span data-i18n="hero_btn1"></span>
</a>
<a href="#contact" class="inline-flex items-center border border-white/[.12] text-white/70 hover:text-white hover:border-white/25 text-sm font-bold uppercase tracking-widest px-7 py-3.5 rounded-md transition-all" data-i18n="hero_btn2"></a>
</div>
<div class="flex flex-wrap gap-7">
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="10" data-suf="+">10+</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat1"></div></div>
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="17" data-suf="+">17+</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat2"></div></div>
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="500" data-suf="+">500+</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat3"></div></div>
<div><div class="text-[1.65rem] font-extrabold text-white et stat-num" data-num="24/7" data-suf="">24/7</div><div class="font-mono text-[.62rem] text-[#9aa3b8] tracking-widest uppercase mt-0.5" data-i18n="hero_stat4"></div></div>
</div>
</div>
<div class="hero-right lg:col-span-5 hidden lg:flex flex-col gap-4 fade-d2">
<div class="glass border border-white/[.05] rounded-2xl p-7 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-[rgba(201,28,28,.14)] to-transparent rounded-2xl"></div>
<div class="relative z-10">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">precision_manufacturing</span>
</div>
<div class="text-xs font-mono text-[#9aa3b8] tracking-widest uppercase mb-2" data-i18n="hero_card_tag"></div>
<h2 class="text-[1.1rem] font-bold text-white et mb-2" data-i18n="hero_card_title"></h2>
<p class="text-sm text-[#9aa3b8] leading-relaxed" data-i18n="hero_card_desc"></p>
<div class="flex gap-1.5 mt-4 flex-wrap">
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">PMP</span>
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">PMI-ACP</span>
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">Siemens Fire</span>
<span class="font-mono text-[.62rem] bg-[#272a32] text-[#9aa3b8] px-2 py-1 rounded">BACnet</span>
</div>
</div>
</div>
<div class="float-b glass border border-white/[.05] rounded-xl px-5 py-4 flex items-center gap-4 self-start">
<div class="w-10 h-10 rounded-full bg-[#c91c1c] flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-white" style="font-size:17px">verified_user</span>
</div>
<div>
<div class="text-[.62rem] font-mono text-[#9aa3b8] uppercase tracking-widest" data-i18n="hero_badge_tag"></div>
<div class="text-sm font-bold text-white" data-i18n="hero_badge_val"></div>
</div>
</div>
</div>
</div>
</section>
<!-- CLIENTS Section -->
<section id="clients" class="py-16 bg-[#0b0e15] border-y ghost-b">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<p class="text-center font-mono text-[.62rem] text-[#9aa3b8] opacity-50 uppercase tracking-[.25em] mb-10" data-i18n="clients_tag"></p>
<div class="clients-viewport py-2" id="clients-viewport">
<div class="clients-track" id="clients-track">
<div class="clients-set" data-clients-set></div>
<div class="clients-set" data-clients-set aria-hidden="true"></div>
</div>
</div>
</div>
<template id="clients-chip-template">
<div class="client-chip"><span data-i18n=""></span></div>
</template>
</section>
<!-- SERVICES Section -->
<section id="services" class="snap-section py-24 relative overflow-hidden" style="background: linear-gradient(rgba(16, 19, 27, 0.95), rgba(16, 19, 27, 0.95)), url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1200&q=60&fm=webp') center/cover fixed">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 bg-[rgba(201,28,28,.1)] border border-[rgba(201,28,28,.22)] text-[#ffb4aa] text-[.63rem] font-bold uppercase tracking-[.18em] px-3 py-1.5 rounded-full mb-6">
<span class="w-1.5 h-1.5 bg-[#c91c1c] rounded-full"></span>
<span data-i18n="services_pill"></span>
</div>
<h2 class="et font-extrabold text-white leading-[1.05] mb-6" style="font-size:clamp(2rem,4vw,3.2rem)" data-i18n="services_title"></h2>
<p class="text-[#9aa3b8] leading-[1.78] max-w-2xl mx-auto text-lg" data-i18n="services_sub"></p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">computer</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc1_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc1_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc1_item1"></li>
<li data-i18n="svc1_item2"></li>
<li data-i18n="svc1_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">devices</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc2_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc2_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc2_item1"></li>
<li data-i18n="svc2_item2"></li>
<li data-i18n="svc2_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">local_fire_department</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc3_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc3_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc3_item1"></li>
<li data-i18n="svc3_item2"></li>
<li data-i18n="svc3_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">groups</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc4_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc4_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc4_item1"></li>
<li data-i18n="svc4_item2"></li>
<li data-i18n="svc4_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">shopping_cart</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc5_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc5_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc5_item1"></li>
<li data-i18n="svc5_item2"></li>
<li data-i18n="svc5_item3"></li>
</ul>
</div>
<div class="svc-card glass border border-white/[.05] rounded-2xl p-7">
<div class="w-14 h-14 rounded-xl bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center mb-5">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:28px">security</span>
</div>
<h3 class="text-[1.3rem] font-bold text-white et mb-3" data-i18n="svc6_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed mb-4" data-i18n="svc6_desc"></p>
<ul class="space-y-2 text-sm text-[#9aa3b8]">
<li data-i18n="svc6_item1"></li>
<li data-i18n="svc6_item2"></li>
<li data-i18n="svc6_item3"></li>
</ul>
</div>
</div>
</div>
</section>
<!-- ENGINEERING -->
<section id="engineering" class="snap-section py-24 relative overflow-hidden" style="background:linear-gradient(rgba(8,11,18,.9),rgba(8,11,18,.84)),url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=1200&q=60&fm=webp') center/cover">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="mb-10">
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="eng_tag"></div>
<h2 class="text-[2.2rem] font-extrabold text-white et mb-3" data-i18n="eng_h2"></h2>
<p class="text-[#9aa3b8] max-w-[500px] leading-relaxed text-sm" data-i18n="eng_desc"></p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 grid-2">
<div class="bg-[rgba(11,14,21,.85)] backdrop-blur-sm border border-white/[.05] rounded-xl p-7">
<h3 class="text-sm font-bold text-[#c91c1c] mb-4 uppercase tracking-wider" data-i18n="eng_s1_title"></h3>
<div class="flex flex-wrap gap-1.5 mb-5">
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XLS</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">Sinteso</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">Desigo</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">Cerberus</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XC1001-A</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XC1005-A</span>
<span class="font-mono text-[.64rem] bg-[rgba(37,99,235,.1)] border border-[rgba(37,99,235,.2)] text-[#93c5fd] px-2.5 py-1 rounded">XC1003-A</span>
</div>
<ul class="space-y-2.5">
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item1"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item2"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item3"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item4"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item5"></span></li>
</ul>
</div>
<div class="bg-[rgba(11,14,21,.85)] backdrop-blur-sm border border-white/[.05] rounded-xl p-7">
<h3 class="text-sm font-bold text-[#c91c1c] mb-4 uppercase tracking-wider" data-i18n="eng_s2_title"></h3>
<p class="text-sm text-[#9aa3b8] leading-relaxed mb-5" data-i18n="eng_s2_desc"></p>
<ul class="space-y-2.5">
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item6"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item7"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item8"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item9"></span></li>
<li class="eng-li flex items-start gap-2.5 text-sm text-[#9aa3b8]"><span class="eng-arrow text-[#c91c1c] shrink-0 mt-0.5" aria-hidden="true">&#8594;</span><span data-i18n="eng_item10"></span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- MANPOWER -->
<section id="manpower" class="snap-section py-24 relative overflow-hidden" style="background:linear-gradient(rgba(8,11,18,.88),rgba(8,11,18,.8)),url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1200&q=60&fm=webp') center/cover">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="mb-10">
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="mp_tag"></div>
<h2 class="text-[2.2rem] font-extrabold text-white et mb-3" data-i18n="mp_h2"></h2>
<p class="text-[#9aa3b8] max-w-[500px] leading-relaxed text-sm" data-i18n="mp_desc"></p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/[.04] rounded-xl overflow-hidden mb-5 mp-3">
<div class="bg-[rgba(11,14,21,.9)] p-7">
<div class="font-mono text-[.64rem] text-[#c91c1c] uppercase tracking-[.12em] mb-5 flex items-center gap-2"><span data-i18n="mp_col1"></span><span class="flex-1 h-px bg-white/[.04]"></span></div>
<ul class="space-y-2">
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item1"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item2"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item3"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item4"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item5"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item6"></span></li>
</ul>
</div>
<div class="bg-[rgba(11,14,21,.9)] p-7">
<div class="font-mono text-[.64rem] text-[#c91c1c] uppercase tracking-[.12em] mb-5 flex items-center gap-2"><span data-i18n="mp_col2"></span><span class="flex-1 h-px bg-white/[.04]"></span></div>
<ul class="space-y-2">
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item7"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item8"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item9"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item10"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item11"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item12"></span></li>
</ul>
</div>
<div class="bg-[rgba(11,14,21,.9)] p-7">
<div class="font-mono text-[.64rem] text-[#c91c1c] uppercase tracking-[.12em] mb-5 flex items-center gap-2"><span data-i18n="mp_col3"></span><span class="flex-1 h-px bg-white/[.04]"></span></div>
<ul class="space-y-2">
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item13"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item14"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item15"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item16"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item17"></span></li>
<li class="flex items-center gap-2 text-sm text-[#9aa3b8]"><span class="w-1 h-1 rounded-full bg-[#c91c1c] shrink-0" aria-hidden="true"></span><span data-i18n="mp_item18"></span></li>
</ul>
</div>
</div>
<div class="flex flex-wrap gap-2">
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_bd"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_in"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_ph"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_pk"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_np"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_lk"></span>
<span class="font-mono text-[.68rem] bg-[rgba(255,255,255,.04)] border border-white/[.06] text-[#9aa3b8] px-3 py-1.5 rounded-full" data-i18n="mp_nat_id"></span>
</div>
<!-- Manpower Free Quote CTA -->
<div class="mt-10 glass border border-white/[.05] rounded-2xl p-7">
<div class="text-center mb-8">
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="mq_tag"></div>
<h3 class="text-[1.7rem] font-extrabold text-white et mb-2" data-i18n="mq_title"></h3>
<p class="text-[#9aa3b8] max-w-2xl mx-auto text-sm leading-relaxed" data-i18n="mq_sub"></p>
</div>
<!-- Big Total Estimate Box -->
<div class="total-estimate-box">
<div class="total-estimate-label" data-i18n="mq_total_estimate"></div>
<div class="total-estimate-val" id="mq_total_val">SAR 0</div>
<div class="text-[#9aa3b8] text-xs font-mono" id="mq_total_breakdown">0 workers × SAR 0</div>
</div>
<form onsubmit="handleManpowerQuote(event)" class="space-y-8" id="mq-form">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="mq_name" class="block text-white text-sm font-medium mb-2" data-i18n="mq_name"></label>
<input type="text" id="mq_name" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
</div>
<div>
<label for="mq_email" class="block text-white text-sm font-medium mb-2" data-i18n="mq_email"></label>
<input type="email" id="mq_email" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
</div>
</div>
<div>
<div class="flex items-center justify-between mb-3">
<label class="block text-white text-sm font-medium" data-i18n="mq_employees"></label>
<div class="text-[#ffb4aa] text-sm font-bold" id="mq_employees_val"></div>
</div>
<input type="range" id="mq_employees" min="1" max="1001" step="1" value="50" class="w-full">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<div class="flex items-center justify-between mb-3">
<label class="block text-white text-sm font-medium" data-i18n="mq_duration"></label>
<div class="text-[#ffb4aa] text-sm font-bold" id="mq_duration_val"></div>
</div>
<div class="flex flex-wrap gap-3 mb-4">
<label class="inline-flex items-center gap-2 text-sm text-[#9aa3b8] cursor-pointer">
<input type="checkbox" id="mq_permanent" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span data-i18n="mq_permanent"></span>
</label>
</div>
<input type="range" id="mq_duration" min="1" max="25" step="1" value="3" class="w-full">
</div>
<div>
<label class="block text-white text-sm font-medium mb-3" data-i18n="mq_profession"></label>
<div class="flex flex-wrap gap-2">
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="cleaner" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_cleaner"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="general_labor" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_general_labor"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="security_hse" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_security_hse"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="technician_engineer" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_technician_engineer"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="driver" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0">
<span class="text-sm text-white" data-i18n="mq_prof_driver"></span>
</label>
<label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-[#272a32] border border-white/[.06] cursor-pointer hover:border-[#c91c1c]/30 transition-colors">
<input type="checkbox" name="mq_prof" value="custom" class="cursor-pointer rounded border-white/[.1] bg-[#272a32] text-[#c91c1c] focus:ring-0" id="mq_prof_custom_checkbox">
<span class="text-sm text-white" data-i18n="mq_prof_custom"></span>
</label>
</div>
<div id="mq_prof_custom_wrap" class="expand-container">
<div class="expand-content">
<input type="text" id="mq_prof_custom_input" placeholder="Specify profession" class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20 mt-3">
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<div class="flex items-center justify-between mb-3">
<label class="block text-white text-sm font-medium" data-i18n="mq_budget"></label>
<div class="text-[#ffb4aa] text-sm font-bold" id="mq_budget_val"></div>
</div>
<div class="text-[#9aa3b8] text-xs font-mono mb-3" id="mq_budget_unit">SAR / person / month</div>
<input type="range" id="mq_budget" min="1" max="80" step="1" value="15" class="w-full">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="mq_nationality"></label>
<select id="mq_nationality" class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
<option value="" data-i18n="mq_select_nationality"></option>
<option value="bangladesh" data-i18n="mp_nat_bd"></option>
<option value="india" data-i18n="mp_nat_in"></option>
<option value="philippines" data-i18n="mp_nat_ph"></option>
<option value="pakistan" data-i18n="mp_nat_pk"></option>
<option value="nepal" data-i18n="mp_nat_np"></option>
<option value="sri_lanka" data-i18n="mp_nat_lk"></option>
<option value="indonesia" data-i18n="mp_nat_id"></option>
<option value="custom" data-i18n="mp_nat_custom"></option>
</select>
<div id="mq_nationality_custom_wrap" class="expand-container">
<div class="expand-content">
<input type="text" id="mq_nationality_custom_input" placeholder="Specify nationality" class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20 mt-3">
</div>
</div>
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="mq_start_date"></label>
<input type="date" id="mq_start_date" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20">
</div>
</div>
</div>
<div>
<label class="block text-white text-sm font-medium mb-3" data-i18n="mq_options"></label>
<div class="flex flex-wrap gap-4">
<label class="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-[#272a32] border border-white/[.06] cursor-pointer group hover:border-[#c91c1c]/30 transition-all">
<input type="checkbox" id="mq_food" class="cursor-pointer rounded border-white/[.1] bg-[#181b23] text-[#c91c1c] focus:ring-0">
<span class="material-symbols-outlined text-[#9aa3b8] group-hover:text-[#c91c1c] transition-colors" style="font-size:20px">restaurant</span>
<span class="text-sm text-white font-medium" data-i18n="mq_food_short">Food</span>
</label>
<label class="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-[#272a32] border border-white/[.06] cursor-pointer group hover:border-[#c91c1c]/30 transition-all">
<input type="checkbox" id="mq_accom" class="cursor-pointer rounded border-white/[.1] bg-[#181b23] text-[#c91c1c] focus:ring-0">
<span class="material-symbols-outlined text-[#9aa3b8] group-hover:text-[#c91c1c] transition-colors" style="font-size:20px">home</span>
<span class="text-sm text-white font-medium" data-i18n="mq_accom_short">Accom.</span>
</label>
<label class="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-[#272a32] border border-white/[.06] cursor-pointer group hover:border-[#c91c1c]/30 transition-all">
<input type="checkbox" id="mq_trans" class="cursor-pointer rounded border-white/[.1] bg-[#181b23] text-[#c91c1c] focus:ring-0">
<span class="material-symbols-outlined text-[#9aa3b8] group-hover:text-[#c91c1c] transition-colors" style="font-size:20px">directions_bus</span>
<span class="text-sm text-white font-medium" data-i18n="mq_trans_short">Transp.</span>
</label>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-between gap-6 pt-4">
<button type="submit" class="w-full sm:w-auto bg-[#c91c1c] text-white font-bold py-4 px-10 rounded-lg hover:bg-[#a01515] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg shadow-[#c91c1c]/20" data-i18n="mq_submit"></button>
<div id="mq_notice" class="text-[#9aa3b8] text-sm text-center sm:text-right"></div>
</div>
</form>
</div>
</div>
</section>
<!-- ABOUT -->
<section id="about" class="snap-section py-24 bg-[#181b23]">
<div class="max-w-7xl mx-auto px-5 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-14 items-center grid-2">
<div>
<div class="font-mono text-[.65rem] text-[#c91c1c] uppercase tracking-[.14em] mb-2.5" data-i18n="about_tag"></div>
<h2 class="text-[2.2rem] font-extrabold text-white et mb-4" data-i18n="about_h2" data-i18n-html></h2>
<p class="text-[#9aa3b8] leading-relaxed mb-3.5 text-sm" data-i18n="about_p1"></p>
<p class="text-[#9aa3b8] leading-relaxed mb-6 text-sm" data-i18n="about_p2"></p>
<div class="flex flex-wrap gap-1.5">
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">PMP</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">PMI-ACP</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">CSM</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">Lean Six Sigma GB</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">BACnet</span>
<span class="font-mono text-[.63rem] bg-[#32353d] border border-white/[.05] text-[#9aa3b8] px-2.5 py-1 rounded">Siemens Fire</span>
</div>
</div>
<div class="grid grid-cols-2 gap-3.5 grid-4">
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et stat-num mb-1" data-num="10" data-suf="+">10+</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat1"></div>
</div>
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et stat-num mb-1" data-num="17" data-suf="+">17+</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat2"></div>
</div>
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et stat-num mb-1" data-num="500" data-suf="+">500+</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat3"></div>
</div>
<div class="stat-bar relative bg-[#32353d] rounded-xl p-6 border border-white/[.04] hover:border-[rgba(201,28,28,.2)] transition-colors overflow-hidden">
<div class="text-[2.1rem] font-extrabold text-[#c91c1c] et mb-1 stat-num" data-num="24/7" data-suf="">24/7</div>
<div class="text-sm text-[#9aa3b8] leading-snug" data-i18n="about_stat4"></div>
</div>
</div>
</div>
</section>
<!-- CONTACT Section -->
<section id="contact" class="snap-section py-20 bg-[#0b0e15]">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="text-center mb-16">
<div class="inline-flex items-center gap-2 bg-[rgba(201,28,28,.1)] border border-[rgba(201,28,28,.22)] text-[#ffb4aa] text-[.63rem] font-bold uppercase tracking-[.18em] px-3 py-1.5 rounded-full mb-6">
<span class="w-1.5 h-1.5 bg-[#c91c1c] rounded-full"></span>
<span data-i18n="contact_pill"></span>
</div>
<h2 class="et font-extrabold text-white leading-[1.05] mb-6" style="font-size:clamp(2rem,4vw,3.2rem)" data-i18n="contact_title"></h2>
<p class="text-[#9aa3b8] leading-[1.78] max-w-2xl mx-auto text-lg" data-i18n="contact_sub"></p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-5xl mx-auto">
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:24px">location_on</span>
</div>
<div>
<h3 class="text-white font-bold mb-2" data-i18n="contact_addr_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed">
<span class="block" data-i18n="contact_addr_line1"></span>
<span class="block" data-i18n="contact_addr_line2"></span>
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-[rgba(201,28,28,.18)] border border-[rgba(201,28,28,.2)] flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-[#c91c1c]" style="font-size:24px">email</span>
</div>
<div>
<h3 class="text-white font-bold mb-2" data-i18n="contact_email_title"></h3>
<p class="text-[#9aa3b8] leading-relaxed">info@mscarabia.com</p>
</div>
</div>
</div>
<div class="glass border border-white/[.05] rounded-2xl p-8">
<form onsubmit="handleSubmit(event)" class="space-y-6">
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_name"></label>
<input type="text" id="name" name="name" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20" data-i18n-placeholder="form_name_placeholder">
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_email"></label>
<input type="email" id="email" name="email" required class="w-full px-4 py-3 bg-[#181b23] border border-white/[.08] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] focus:ring-1 focus:ring-[#c91c1c]/20" data-i18n-placeholder="form_email_placeholder">
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_service"></label>
<select name="service" class="w-full px-4 py-3 bg-[#272a32] border border-white/[.1] rounded-lg text-white focus:outline-none focus:border-[#c91c1c] transition-colors">
<option value="" data-i18n="option_select_service"></option>
<option value="managed-it" data-i18n="option_managed_it"></option>
<option value="mdm" data-i18n="option_mdm"></option>
<option value="fire-safety" data-i18n="option_fire_safety"></option>
<option value="manpower" data-i18n="option_manpower"></option>
<option value="hardware" data-i18n="option_hardware"></option>
<option value="cybersecurity" data-i18n="option_cybersecurity"></option>
</select>
</div>
<div>
<label class="block text-white text-sm font-medium mb-2" data-i18n="form_message"></label>
<textarea id="message" name="message" rows="4" class="w-full px-4 py-3 bg-[#272a32] border border-white/[.1] rounded-lg text-white placeholder-[#9aa3b8] focus:outline-none focus:border-[#c91c1c] transition-colors resize-none" data-i18n-placeholder="form_message_placeholder"></textarea>
</div>
<button type="submit" class="w-full bg-[#c91c1c] text-white font-bold py-3 px-6 rounded-lg hover:bg-[#a01515] transition-colors" data-i18n="form_submit"></button>
</form>
</div>
</div>
</div>
</section>
</div>
<!-- Accessibility Panel (Mobile Only) -->
<div class="a11y-panel md:hidden">
<button onclick="toggleA11y()" class="a11y-btn" aria-label="Accessibility options">
<span class="material-symbols-outlined">accessibility_new</span>
</button>
<div class="a11y-menu" id="a11y-menu-mobile">
<button onclick="adjustTextSize(1)" class="a11y-item">
<span class="material-symbols-outlined">format_size</span>
<span>A+</span>
</button>
<button onclick="adjustTextSize(-1)" class="a11y-item">
<span class="material-symbols-outlined">text_fields</span>
<span>A-</span>
</button>
<button onclick="toggleContrast()" class="a11y-item">
<span class="material-symbols-outlined">contrast</span>
<span data-i18n="a11y_theme">Contrast</span>
</button>
</div>
</div>
<!-- Back to Top -->
<button class="back-to-top" id="back-to-top" onclick="window.scrollTo({top:0, behavior:'smooth'})" aria-label="Back to top">
<span class="material-symbols-outlined">arrow_upward</span>
</button>
<!-- FOOTER -->
<footer class="py-12 bg-[#0b0e15] border-t border-white/[.04]">
<div class="max-w-7xl mx-auto px-5 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center gap-3 mb-4">
<img src="./logo.png" alt="MSC Arabia" class="w-12 h-12 object-contain" onerror="this.src='https://via.placeholder.com/48x48?text=MSC'">
<span class="text-white font-bold text-xl">MSC Arabia</span>
</div>
<p class="text-[#9aa3b8] text-sm leading-relaxed mb-4" data-i18n="footer_desc"></p>
<div class="compliance-badge">
<span class="material-symbols-outlined" style="font-size:16px">verified</span>
<span data-i18n="compliance_ids" data-i18n-html></span>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-4" data-i18n="footer_services"></h4>
<ul class="space-y-2">
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc1"></a></li>
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc2"></a></li>
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc3"></a></li>
<li><a href="#services" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_svc4"></a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4" data-i18n="footer_company"></h4>
<ul class="space-y-2">
<li><a href="#about" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_about"></a></li>
<li><a href="#clients" class="footer-link text-sm hover:text-white transition-colors" data-i18n="footer_clients"></a></li>
<li><button type="button" onclick="openModal('privacy')" class="footer-link text-sm hover:text-white transition-colors text-start" data-i18n="footer_privacy"></button></li>
<li><button type="button" onclick="openModal('cookie')" class="footer-link text-sm hover:text-white transition-colors text-start" data-i18n="footer_cookies"></button></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4" data-i18n="footer_contact"></h4>
<ul class="space-y-2 text-[#9aa3b8] text-sm">
<li data-i18n="footer_addr"></li>
<li data-i18n="footer_email"></li>
</ul>
</div>
</div>
<div class="border-t border-white/[.04] pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-[#9aa3b8] text-xs" data-i18n="footer_copyright">© 2026 MSC Arabia. All rights reserved.</p>
<div class="flex items-center gap-4">
<span class="text-[#9aa3b8] text-xs font-mono uppercase tracking-widest" data-i18n="footer_compliance"></span>
</div>
</div>
</div>
</footer>
<!-- PRIVACY POLICY MODAL -->
<div id="privacy-modal" class="modal-overlay">
<div class="modal-box">
<button class="modal-close" onclick="closeModal('privacy')">×</button>
<div class="modal-tag" data-i18n="modal_privacy_tag"></div>
<h3 data-i18n="modal_privacy_title"></h3>
<p data-i18n="modal_privacy_updated"></p>
<p data-i18n="modal_privacy_effective"></p>
<p data-i18n="modal_privacy_intro"></p>
<h4 data-i18n="modal_privacy_collect_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_privacy_collect_list" data-i18n-html></div>
<h4 data-i18n="modal_privacy_use_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_privacy_use_list" data-i18n-html></div>
<h4 data-i18n="modal_privacy_protection_title"></h4>
<p data-i18n="modal_privacy_protection_desc"></p>
<h4 data-i18n="modal_privacy_rights_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_privacy_rights_list" data-i18n-html></div>
<h4 data-i18n="modal_privacy_contact_title"></h4>
<p data-i18n="modal_privacy_contact_desc"></p>
</div>
</div>
<!-- COOKIE POLICY MODAL -->
<div id="cookie-modal" class="modal-overlay">
<div class="modal-box">
<button class="modal-close" onclick="closeModal('cookie')">×</button>
<div class="modal-tag" data-i18n="modal_cookie_tag"></div>
<h3 data-i18n="modal_cookie_title"></h3>
<p data-i18n="modal_cookie_effective"></p>
<p data-i18n="modal_cookie_updated"></p>
<h4 data-i18n="modal_cookie_what_title"></h4>
<p data-i18n="modal_cookie_what_desc"></p>
<h4 data-i18n="modal_cookie_how_title"></h4>
<p data-i18n="modal_cookie_how_desc"></p>
<h4 data-i18n="modal_cookie_types_title"></h4>
<div class="modal-html-list mb-4" data-i18n="modal_cookie_types_list" data-i18n-html></div>
<h4 data-i18n="modal_cookie_manage_title"></h4>
<p data-i18n="modal_cookie_manage_desc"></p>
<div class="modal-html-list mb-4" data-i18n="modal_cookie_manage_list" data-i18n-html></div>
</div>
</div>
<!-- JavaScript -->
<script>
// Language (default English; optional ?lang=ar or localStorage msc_lang)
const LANG_KEY = 'msc_lang';
let currentLang = 'en';
function readStoredLang() {
try {
const q = new URLSearchParams(window.location.search).get('lang');
if (q === 'ar' || q === 'en') return q;
const s = localStorage.getItem(LANG_KEY);
if (s === 'ar' || s === 'en') return s;
} catch (e) {}
return 'en';
}
function persistLang() {
try { localStorage.setItem(LANG_KEY, currentLang); } catch (e) {}
}
function updateLangSwitchUI() {
const btns = ['lang-btn-en', 'lang-btn-ar', 'lang-btn-en-m', 'lang-btn-ar-m'];
btns.forEach(id => {
const btn = document.getElementById(id);
if (btn) {
const btnLang = id.includes('ar') ? 'ar' : 'en';
btn.classList.toggle('active', currentLang === btnLang);
}
});
}
function setLang(lang) {
if (currentLang === lang) return;
currentLang = lang;
persistLang();
applyDocumentLocale();
}
function initBackToTop() {
const btt = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 500) {
btt.classList.add('show');
} else {
btt.classList.remove('show');
}
});
}
function initSideNav() {
const sideDots = document.querySelectorAll('.side-dot');
const sections = document.querySelectorAll('section[id], footer');
function updateSideNav() {
const y = window.pageYOffset;
const navHeight = 80;
let current = 'home';
sections.forEach(section => {
const sectionTop = section.offsetTop - navHeight;
if (y >= sectionTop) {
current = section.id || 'home';
}
});
sideDots.forEach(dot => {
const sectionId = dot.getAttribute('data-section');
dot.classList.toggle('active', sectionId === current);
const labelKey = 'nav_' + sectionId;
if (translations[currentLang][labelKey]) {
dot.setAttribute('data-label', translations[currentLang][labelKey].replace(' →', ''));
}
});
}
// Unified Smooth Scroll Logic
function smoothScrollTo(targetId) {
const target = document.getElementById(targetId);
if (target) {
const navHeight = 64;
const targetPosition = target.offsetTop - navHeight;
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
}
}
sideDots.forEach(dot => {
dot.addEventListener('click', (e) => {
e.preventDefault();
smoothScrollTo(dot.getAttribute('data-section'));
});
});
// Attach to all anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const id = this.getAttribute('href').substring(1);
if (id) {
e.preventDefault();
closeMenu();
smoothScrollTo(id);
}
});
});
window.addEventListener('scroll', updateSideNav);
updateSideNav();
}
function applyStatNums() {
const stats = document.querySelectorAll('.stat-num');
const animateValue = (el, start, end, duration, suffix) => {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const val = Math.floor(progress * (end - start) + start);
el.textContent = toArabicNumbers(String(val)) + suffix;
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
if (el.getAttribute('data-animated') === 'true') return;
const raw = el.getAttribute('data-num') || '';
const suf = el.getAttribute('data-suf') || '';
// Handle non-numeric stats like 24/7
if (raw.includes('/')) {
el.textContent = toArabicNumbers(raw) + suf;
} else {
const endValue = parseInt(raw);
if (!isNaN(endValue)) {
animateValue(el, 0, endValue, 1200, suf);
} else {
el.textContent = toArabicNumbers(raw) + suf;
}
}
el.setAttribute('data-animated', 'true');
}
});
}, { threshold: 0.2 });
stats.forEach(stat => observer.observe(stat));
}
function applyDocumentLocale() {
document.documentElement.lang = currentLang;
document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
document.querySelectorAll('[data-i18n]').forEach(applyI18nElement);
document.querySelectorAll('[data-i18n-placeholder]').forEach(function (element) {
var key = element.getAttribute('data-i18n-placeholder');
if (key && translations[currentLang] && translations[currentLang][key]) {
element.placeholder = translations[currentLang][key];
}
});
document.querySelectorAll('option[data-i18n]').forEach(function (element) {
var key = element.getAttribute('data-i18n');
if (key && translations[currentLang] && translations[currentLang][key]) {
element.textContent = translations[currentLang][key];
}
});
// Reset animations for stats on language change
document.querySelectorAll('.stat-num').forEach(el => el.removeAttribute('data-animated'));
applyStatNums();
// Update SEO Meta Tags for Arabic
if (currentLang === 'ar') {
document.title = "MSC Arabia | خدمات تقنية المعلومات المدارة والسلامة من الحرائق | الرياض";
document.querySelector('meta[name="description"]').setAttribute("content", "خدمات تكنولوجيا المعلومات المدارة، ترخيص إدارة الأجهزة المحمولة، هندسة السلامة من الحرائق، وحلول القوى العاملة في المملكة العربية السعودية.");
} else {
document.title = "MSC Arabia | IT Managed Services, MDM Licensing & Fire Safety | Riyadh Saudi Arabia";
document.querySelector('meta[name="description"]').setAttribute("content", "MSC Arabia - Riyadh's leading provider of Managed IT Services, Fire Safety Engineering, Manpower Solutions, and IT Hardware Procurement.");
}
updateLangSwitchUI();
if (typeof window._remeasureClientsMarquee === 'function') window._remeasureClientsMarquee();
if (typeof window._updateManpowerQuoteUI === 'function') window._updateManpowerQuoteUI();
}
const translations = {
en: {
nav_home: 'Home',
nav_services: 'Services',
nav_engineering: 'Engineering',
nav_manpower: 'Manpower',
nav_clients: 'Clients',
nav_about: 'About',
nav_contact: 'Contact',
nav_cta: 'Get in Touch',
hero_pill: "Saudi Arabia's Local IT Partner",
hero_h1_1: 'End‑to‑End',
hero_h1_3: 'Solutions',
hero_sub: 'Saudi-based managed IT services, MDM licensing, hardware & software procurement, fire safety engineering, and workforce solutions — trusted by Saudi Arabia\'s leading enterprises.',
hero_btn1: 'Explore Services',
hero_btn2: 'Schedule a Call',
hero_stat1: 'Years in KSA',
hero_stat2: 'Enterprise Clients',
hero_stat3: 'Workers Placed',
hero_stat4: 'Managed Support',
hero_card_tag: 'Saudi Vision 2030 Aligned',
hero_card_title: 'Precision Engineering & IT',
hero_card_desc: 'Certified for Aramco, STC & Petro Rabigh. PMP, PMI-ACP, Siemens Fire Systems, BACnet Integration.',
hero_badge_tag: 'Aramco Permanent ID',
hero_badge_val: 'STC & Petro Rabigh Access',
clients_tag: 'Trusted by Saudi Arabia\'s Leading Organisations',
services_pill: 'Our Core Services',
services_title: 'Comprehensive IT & Engineering Solutions',
services_sub: 'End-to-end services designed to accelerate your digital transformation and ensure operational excellence.',
svc1_title: 'Managed IT Services',
svc1_desc: '24/7 proactive monitoring, support, and maintenance of your IT infrastructure to ensure maximum uptime and performance.',
svc2_title: 'MDM Licensing',
svc2_desc: 'Mobile Device Management solutions for secure enterprise mobility and device lifecycle management.',
svc3_title: 'Fire Safety Engineering',
svc3_desc: 'Certified fire safety systems design, installation, and maintenance for industrial and commercial facilities.',
svc4_title: 'Manpower Solutions',
svc4_desc: 'Skilled IT and engineering professionals for temporary and permanent positions across Saudi Arabia.',
svc5_title: 'IT Hardware & Licensing',
svc5_desc: 'Procurement and deployment of enterprise-grade laptops, desktops, and licensed software solutions.',
svc5_item1: '• Laptops & Desktops',
svc5_item2: '• Windows & MS Office Licenses',
svc5_item3: '• Servers & Storage',
svc6_title: 'Cloud & Infrastructure',
svc6_desc: 'Scalable cloud infrastructure with migration, management, and optimization across leading providers.',
svc1_item1: '• Server & Network Management',
svc1_item2: '• Cloud Infrastructure',
svc1_item3: '• Help Desk Support',
svc2_item1: '• Apple Business Manager',
svc2_item2: '• Microsoft Intune',
svc2_item3: '• Enterprise Security',
svc3_item1: '• Siemens Fire Systems',
svc3_item2: '• BACnet Integration',
svc3_item3: '• Safety Compliance',
svc4_item1: '• Skilled Staffing',
svc4_item2: '• Engineering Resources',
svc4_item3: '• General Labor Teams',
svc5_item1: '• Dell, HP & Lenovo Authorized',
svc5_item2: '• Microsoft Volume Licensing',
svc5_item3: '• Rack & Blade Servers',
svc6_item1: '• AWS, Azure & Google Cloud',
svc6_item2: '• Migration & workload modernization',
svc6_item3: '• Managed operations & cost optimization',
svc1_details: 'Our Managed IT Services provide 24/7 proactive monitoring, support, and maintenance of your IT infrastructure. We ensure maximum uptime and performance through regular updates, security patches, and rapid response to issues.',
svc2_details: 'MDM Licensing provides comprehensive mobile device management with licensing solutions. We ensure compliance, security, and efficient management of all mobile devices in your organization.',
svc3_details: 'Fire Safety Engineering offers Siemens-certified fire alarm systems with design, installation, testing, and commissioning. Our engineers are Aramco-approved with permanent access IDs.',
svc4_details: 'Manpower Solutions provides skilled and unskilled workforce from South and Southeast Asia. We handle complete visa processing and documentation for deployment.',
svc5_details: 'IT Hardware & Licensing services provide enterprise-grade laptops, desktops, and licensed software solutions. We ensure procurement and deployment of hardware and software.',
svc6_details: 'Cloud Services offer scalable infrastructure with migration, management, and optimization. We support AWS, Azure, and Google Cloud platforms.',
contact_pill: 'Get In Touch',
contact_title: 'Let\'s Transform Your Business Together',
contact_sub: 'Ready to accelerate your digital transformation? Contact our expert team today.',
contact_addr_title: 'Office Address',
contact_phone_title: 'Phone',
contact_email_title: 'Email',
contact_form_title: 'Send us a message',
form_name: 'Full Name',
form_email: 'Email Address',
form_service: 'Service Required',
form_message: 'Message',
form_submit: 'Send Message',
form_name_placeholder: 'e.g. John Doe',
form_email_placeholder: 'john@example.com',
option_managed_it: 'Managed IT Services',
option_mdm: 'MDM Licensing',
option_fire_safety: 'Fire Safety Engineering',
option_manpower: 'Manpower Solutions',
option_hardware: 'IT Hardware & Licensing',
option_cybersecurity: 'Cloud & Infrastructure',
option_select_service: 'Select a service',
form_message_placeholder: 'Tell us about your requirements...',
footer_desc: 'Your trusted partner for comprehensive technology solutions and engineering services in Saudi Arabia.',
footer_services: 'Services',
footer_services_title: 'Services',
footer_svc1: 'Managed IT Services',
footer_svc2: 'Fire Safety Engineering',
footer_svc3: 'Manpower Solutions',
footer_svc4: 'Hardware, Software & Cloud',
footer_company: 'Company',
footer_contact: 'Contact',
footer_about: 'About Us',
footer_clients: 'Our Clients',
footer_privacy: 'Privacy Policy',
footer_cookies: 'Cookie Policy',
footer_copyright: '© 2026 MSC Arabia. All rights reserved.',
a11y_theme: 'Contrast Mode',
a11y_lang: 'Change Language',
footer_compliance: 'ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY',
compliance_ids: 'CR: <strong>1010643911</strong><br>VAT: <strong>312900114900003</strong>',
contact_addr_line1: '6787 Abdulrahman Al Nasser, Al Khaleej Dist.',
contact_addr_line2: 'Riyadh 13223, Saudi Arabia',
client_1: 'Amsa Hospitality',
client_2: 'TSS Advertising',
client_3: 'Arab Fire Safety & Security Academy',
client_4: 'Kudu Company',
client_5: 'EHIC',
client_6: 'Ebtekar Al-Taknouchia',
client_7: 'Aklaniat Technologies',
client_8: 'Al Bayan Model School',
client_9: '4 Dimensions Advertising',
client_10: 'Yenepoya Intl School KSA',
client_11: 'Hellmann Worldwide Logistics',
mp_nat_bd: 'Bangladesh',
mp_nat_in: 'India',
mp_nat_ph: 'Philippines',
mp_nat_pk: 'Pakistan',
mp_nat_np: 'Nepal',
mp_nat_lk: 'Sri Lanka',
mp_nat_id: 'Indonesia',
mp_nat_custom: 'Other (Specify in Message)',
// Manpower Quote CTA
mq_tag: 'Free Manpower Quote',
mq_title: 'Request a Free Manpower Quote',
mq_sub: 'Send your requirements and we will get back within 1–2 business days.',
mq_name: 'Your Name',
mq_email: 'Your Email',
mq_employees: 'Number of workers',
mq_workers: 'workers',
mq_workers_plus: '1000+ workers',
mq_duration: 'Contract duration',
mq_months: 'months',
mq_month: 'month',
mq_years: 'years',
mq_year: 'year',
mq_permanent: 'Permanent',
mq_permanent_label: 'Permanent',
mq_profession: 'Profession(s)',
mq_prof_cleaner: 'Cleaner',
mq_prof_general_labor: 'General Labor',
mq_prof_security_hse: 'Security & HSE',
mq_prof_technician_engineer: 'Technician / Engineer',
mq_prof_driver: 'Driver',
mq_prof_custom: 'Other (Specify below)',
mq_options: 'Options',
mq_food: 'Food included',
mq_accommodation: 'Accommodation included',
mq_budget: 'Ideal budget per person',
mq_budget_monthly: 'Monthly',
mq_budget_yearly: 'Yearly',
mq_budget_per: 'SAR / person / month',
mq_budget_per_year: 'SAR / person / year',
mq_total_estimate: 'Estimated Total',
mq_nationality: 'Nationality',
mq_select_nationality: 'Select nationality',
mq_start_date: 'Desired start date',
mq_submit: 'Request Quote',
mq_food: 'Food',
mq_accom: 'Accommodation',
mq_trans: 'Transport',
mq_food_short: 'Food',
mq_accom_short: 'Accom.',
mq_trans_short: 'Transp.',
mq_notice_sending: 'Opening your email client... we will reply within 1–2 business days.',
mq_subject: 'Manpower Free Quote Request',
mq_yes: 'Yes',
mq_no: 'No',
mq_not_specified: 'Not specified',
// Modal translations
modal_privacy_tag: 'Privacy Policy',
modal_privacy_title: 'Privacy Policy',
modal_privacy_updated: 'Last Updated: March 26, 2026',
modal_privacy_effective: 'Effective Date: March 26, 2026',
modal_privacy_intro: 'This Privacy Policy describes how ESTABLISHMENT MARSAH ALHALLOUL FOR INFORMATION TECHNOLOGY collects, uses, and protects your information when you use our website.',
modal_privacy_collect_title: 'Information We Collect',
modal_privacy_collect_list: '• Name and contact information<br>• Company and job title<br>• Service requirements<br>• Device and browser information<br>• IP address and location data',
modal_privacy_use_title: 'How We Use Your Information',
modal_privacy_use_list: '• To provide our services and respond to inquiries<br>• To improve our website and services<br>• To communicate with you about our services<br>• To comply with legal obligations',
modal_privacy_protection_title: 'Data Protection',
modal_privacy_protection_desc: 'We implement appropriate security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.',
modal_privacy_rights_title: 'Your Rights',
modal_privacy_rights_list: '• Access to your personal information<br>• Correction of inaccurate information<br>• Deletion of your personal information<br>• Opt-out of marketing communications',
modal_privacy_contact_title: 'Contact Us',
modal_privacy_contact_desc: 'If you have any questions about this Privacy Policy, please contact us at info@mscarabia.com.',
modal_cookie_tag: 'Cookie Policy',
modal_cookie_title: 'Cookie Policy',
modal_cookie_effective: 'Effective date: March 26, 2026',
modal_cookie_updated: 'Last updated: March 26, 2026',
modal_cookie_what_title: 'What are cookies?',
modal_cookie_what_desc: 'Cookies are small text files used to store small pieces of information on your device when you visit our website.',
modal_cookie_how_title: 'How do we use cookies?',
modal_cookie_how_desc: 'We use cookies to ensure our website functions properly, enhance security, provide a better user experience, and analyze performance.',
modal_cookie_types_title: 'Types of cookies we use',
modal_cookie_types_list: '• Essential Cookies: Required for the website to function properly<br>• Analytics Cookies: Help us understand how visitors interact with our website<br>• Marketing Cookies: Used to track visitors across websites<br>• Functional Cookies: Enable enhanced functionality and personalization',
modal_cookie_manage_title: 'Manage cookie preferences',
modal_cookie_manage_desc: 'You can modify your cookie settings anytime through your browser settings.',
modal_cookie_manage_list: '• Chrome: https://support.google.com/accounts/answer/32050<br>• Safari, Firefox, Edge: Please refer to respective browser documentation',
footer_addr: 'Riyadh 13223, Saudi Arabia',
footer_email: 'info@mscarabia.com',
eng_tag: 'Engineering Services',
eng_h2: 'Fire Safety Testing & Commissioning',
eng_desc: 'Siemens-certified engineers. A decade of execution on Aramco, STC, and Petro Rabigh projects.',
eng_s1_title: 'Testing & Commissioning',
eng_s2_title: 'Fire Alarm System Design',
eng_s2_desc: 'NFPA & Saudi Fire Code compliant design from site survey to final handover and AutoCAD documentation.',
eng_item1: 'Gas system accuracy verification',
eng_item2: 'Logical-function programming',
eng_item3: 'Device addressing & loop termination',
eng_item4: 'Full Pre-FAT and FAT testing',
eng_item5: 'BACnet integration & commissioning',
eng_item6: 'Site surveys & hazard assessment',
eng_item7: 'Conventional, addressable & wireless systems',
eng_item8: 'Equipment placement & zoning strategy',
eng_item9: 'Integration with suppression, BMS & safety systems',
eng_item10: 'Full documentation & AutoCAD drawings',
mp_tag: 'Manpower Solutions',
mp_h2: 'Any Role. Any Scale.',
mp_desc: 'Skilled and unskilled workforce from South and Southeast Asia, deployed with full visa processing.',
mp_col1: 'Unskilled & General',
mp_col2: 'Semi-Skilled',
mp_col3: 'Skilled & Professional',
mp_item1: 'Factory & production workers',
mp_item2: 'Cleaners & housekeeping',
mp_item3: 'General helpers & labourers',
mp_item4: 'Catering & kitchen helpers',
mp_item5: 'Landscape & garden workers',
mp_item6: 'Agricultural workers',
mp_item7: 'Drivers (light, heavy, buses)',
mp_item8: 'Security guards & HSE officers',
mp_item9: 'Healthcare assistants & nurses',
mp_item10: 'Warehouse & forklift operators',
mp_item11: 'Painters, masons & tilers',
mp_item12: 'Welders & scaffolders',
mp_item13: 'Engineers & technicians',
mp_item14: 'IT professionals',
mp_item15: 'Medical staff & specialists',
mp_item16: 'Project managers (PMP)',
mp_item17: 'Admin & document controllers',
mp_item18: 'Procurement specialists',
about_tag: 'About Us',
about_h2: 'Saudi-Based.<br>Globally Certified.',
about_p1: 'MSC Arabia is a Riyadh-based company delivering IT managed services, MDM licensing, hardware & software procurement, fire safety engineering, and manpower solutions across Saudi Arabia.',
about_p2: 'Our engineers hold permanent access IDs for Aramco, STC, and Petro Rabigh — combining international certifications with deep Saudi market expertise built over a decade of execution.',
about_stat1: 'Years of Operation in KSA',
about_stat2: 'Active Enterprise Clients',
about_stat3: 'Successfully Placed Workers',
about_stat4: 'Managed IT Support Coverage'
},
ar: {
nav_home: 'الرئيسية',
nav_services: 'الخدمات',
nav_engineering: 'الهندسة',
nav_manpower: 'القوى العاملة',
nav_clients: 'العملاء',
nav_about: 'من نحن',
nav_contact: 'اتصل بنا',
nav_cta: 'تواصل معنا',
hero_pill: 'شريك التقنية المحلي في المملكة العربية السعودية',
hero_h1_1: 'شامل',
hero_h1_3: 'الحلول',
hero_sub: 'خدمات تكنولوجيا المعلومات المدارة، ترخيص إدارة الأجهزة المحمولة، procurement للأجهزة والبرامج، هندسة السلامة من الحرائق، وحلول القوى العاملة في المملكة العربية السعودية.',
hero_btn1: 'استكشف الخدمات',
hero_btn2: 'احصل على عرض سعر',
hero_stat1: 'سنوات في المملكة',
hero_stat2: 'عملاء مؤسسيون',
hero_stat3: 'عاملين تم توظيفهم',
hero_stat4: 'دعم مُدار',
hero_card_tag: 'متوافق مع رؤية المملكة 2030',
hero_card_title: 'هندسة دقيقة وتكنولوجيا المعلومات',
hero_card_desc: 'معتمد لأرامكو، stc وبترو رابغ. PMP، PMI-ACP، أنظمة سيمنز للسلامة من الحرائق، تكامل BACnet.',
hero_badge_tag: 'معرف دائم لأرامكو',
hero_badge_val: 'وصول stc وبترو رابغ',
clients_tag: 'موثوق من قبل المنظمات الرائدة في المملكة العربية السعودية',
services_pill: 'خدماتنا الأساسية',
services_title: 'حلول تكنولوجيا المعلومات والهندسة الشاملة',
services_sub: 'خدمات شاملة مصممة لتسريع التحول الرقمي وضمان التشغيل المتميز.',
svc1_title: 'خدمات تكنولوجيا المعلومات المدارة',
svc1_desc: 'مراقبة استباقية على مدار الساعة طوال أيام الأسبوع، ودعم، وصيانة لبنيتك التحتية لتكنولوجيا المعلومات لضمان أقصى وقت تشغيل وأداء.',
svc2_title: 'ترخيص إدارة الأجهزة المحمولة',
svc2_desc: 'إدارة شاملة للأجهزة المحمولة مع توفير التراخيص لضمان الامتثال والأمان.',
svc3_title: 'هندسة السلامة من الحرائق',
svc3_desc: 'أنظمة إنذار وإطفاء الحرائق المعتمدة من سيمنز مع التركيب والصيانة.',
svc4_title: 'حلول القوى العاملة',
svc4_desc: 'توفير القوى العاملة الماهرة وغير الماهرة من جنوب وجنوب شرق آسيا.',
svc5_title: 'أجهزة تكنولوجيا المعلومات والتراخيص',
svc5_desc: 'توفير ونشر أجهزة الكمبيوتر المحمولة والمكتبية وحلول البرمجيات المرخصة للمؤسسات.',
svc5_item1: '• أجهزة الكمبيوتر المحمولة والمكتبية',
svc5_item2: '• تراخيص Windows و MS Office',
svc5_item3: '• الخوادم والتخزين',
svc6_title: 'السحابة والبنية التحتية',
svc6_desc: 'بنية تحتية سحابية قابلة للتطوير مع الهجرة والإدارة والتحسين عبر كبار المزودين.',
svc1_item1: '• إدارة الخوادم والشبكات',
svc1_item2: '• البنية التحتية السحابية',
svc1_item3: '• دعم مكتب المساعدة',
svc2_item1: '• مدير أعمال أبل',
svc2_item2: '• Microsoft Intune',
svc2_item3: '• أمان المؤسسات',
svc3_item1: '• أنظمة سيمنز للحرائق',
svc3_item2: '• تكامل BACnet',
svc3_item3: '• الامتثال للسلامة',
svc4_item1: '• توظيف الكوادر الماهرة',
svc4_item2: '• موارد الهندسة',
svc4_item3: '• فرق العمالة العامة',
svc5_item1: '• Dell و HP و Lenovo موزع معتمد',
svc5_item2: '• تراخيص Microsoft للمؤسسات',
svc5_item3: '• خوادم Rack و Blade',
svc6_item1: '• AWS و Azure و Google Cloud',
svc6_item2: '• الهجرة وتحديث أعباء العمل',
svc6_item3: '• العمليات المدارة وتحسين التكاليف',
option_cybersecurity: 'السحابة والبنية التحتية',
option_select_service: 'اختر خدمة',
form_message_placeholder: 'أخبرنا عن متطلباتك...',
footer_desc: 'شريكك الموثوق للحلول التكنولوجية الشاملة وخدمات الهندسة في المملكة العربية السعودية.',
footer_services: 'الخدمات',
footer_services_title: 'الخدمات',
footer_svc1: 'خدمات تقنية المعلومات المدارة',
footer_svc2: 'هندسة السلامة من الحرائق',
footer_svc3: 'حلول القوى العاملة',
footer_svc4: 'الأجهزة والبرامج والسحابة',
footer_company: 'الشركة',
footer_contact: 'اتصل',
footer_about: 'من نحن',
footer_clients: 'عملاؤنا',
footer_privacy: 'سياسة الخصوصية',
footer_cookies: 'سياسة ملفات تعريف الارتباط',
footer_copyright: '© 2026 MSC Arabia. جميع الحقوق محفوظة.',
a11y_theme: 'وضع التباين',
a11y_lang: 'تغيير اللغة',
footer_compliance: 'مؤسسة مرساة الحلول لتقنية المعلومات',
compliance_ids: 'س.ت: <strong>١٠١٠٦٤٣٩١١</strong><br>الرقم الضريبي: <strong>٣١٢٩٠٠١١٤٩٠٠٠٠٣</strong>',
contact_addr_line1: '6787 عبد الرحمن الناصر، حي الخليج',
contact_addr_line2: 'الرياض 13223، المملكة العربية السعودية',
client_1: 'أمسا للضيافة',
client_2: 'تي إس إس للإعلان',
client_3: 'أكاديمية العرب للسلامة والأمن من الحرائق',
client_4: 'شركة كودو',
client_5: 'إيه إتش آي سي',
client_6: 'ابتكار التكنوشيا',
client_7: 'أكلانيات للتقنيات',
client_8: 'مدرسة البيان النموذجية',
client_9: 'فور ديمنشنز للإعلان',
client_10: 'مدرسة ينبع الدولية – السعودية',
client_11: 'هيلمان للوجستيات العالمية',
mp_nat_bd: 'بنغلادش',
mp_nat_in: 'الهند',
mp_nat_ph: 'الفلبين',
mp_nat_pk: 'باكستان',
mp_nat_np: 'نيبال',
mp_nat_lk: 'سريلانكا',
mp_nat_id: 'إندونيسيا',
mp_nat_custom: 'أخرى (حدد في الرسالة)',
// Manpower Quote CTA
mq_tag: 'عرض القوى العاملة مجاناً',
mq_title: 'اطلب عرضاً مجانياً للقوى العاملة',
mq_sub: 'شارك احتياجاتك وسنرد خلال 1–2 يوم عمل.',
mq_name: 'الاسم',
mq_email: 'البريد الإلكتروني',
mq_employees: 'عدد العمال',
mq_workers: 'عامل',
mq_workers_plus: '+١٠٠٠ عامل',
mq_duration: 'مدة العقد',
mq_months: 'أشهر',
mq_month: 'شهر',
mq_years: 'سنوات',
mq_year: 'سنة',
mq_permanent: 'دائم',
mq_permanent_label: 'دائم',
mq_profession: 'المهن المطلوبة',
mq_prof_cleaner: 'عامل تنظيف',
mq_prof_general_labor: 'عمال عامون',
mq_prof_security_hse: 'حراس أمن وسلامة',
mq_prof_technician_engineer: 'فني/مهندس',
mq_prof_driver: 'سائق',
mq_prof_custom: 'أخرى (حدد أدناه)',
mq_options: 'الخيارات',
mq_food: 'الوجبات مشمولة',
mq_accommodation: 'الإقامة مشمولة',
mq_budget: 'الميزانية المثالية لكل شخص',
mq_budget_monthly: 'شهرياً',
mq_budget_yearly: 'سنوياً',
mq_budget_per: 'ر.س / شخص / شهر',
mq_budget_per_year: 'ر.س / شخص / سنة',
mq_total_estimate: 'الإجمالي التقديري',
mq_nationality: 'الجنسية',
mq_select_nationality: 'اختر الجنسية',
mq_start_date: 'متى تريد بدء تزويد العمالة؟',
mq_submit: 'اطلب عرض السعر',
mq_food: 'طعام',
mq_accom: 'سكن',
mq_trans: 'مواصلات',
mq_food_short: 'طعام',
mq_accom_short: 'سكن',
mq_trans_short: 'مواصلات',
mq_notice_sending: 'جارٍ فتح البريد الإلكتروني... سنرد خلال ١-٢ يوم عمل.',
mq_subject: 'طلب عرض سعر للقوى العاملة',
mq_yes: 'نعم',
mq_no: 'لا',
mq_not_specified: 'غير محدد',
// Modal translations
modal_privacy_tag: 'سياسة الخصوصية',
modal_privacy_title: 'سياسة الخصوصية',
modal_privacy_updated: 'آخر تحديث: 26 مارس 2026',
modal_privacy_effective: 'تاريخ السريان: 26 مارس 2026',
modal_privacy_intro: 'تصف سياسة الخصوصية هذه كيفية جمع مؤسسة مرساة الحلول لتقنية المعلومات واستخدامها وحماية معلوماتك عند استخدامك لموقعنا الإلكتروني.',
modal_privacy_collect_title: 'المعلومات التي نجمعها',
modal_privacy_collect_list: '• الاسم ومعلومات الاتصال<br>• الشركة والمنصب<br>• متطلبات الخدمة<br>• معلومات الجهاز والمتصفح<br>• عنوان IP وموقع البيانات',
modal_privacy_use_title: 'كيف نستخدم معلوماتك',
modal_privacy_use_list: '• لتقديم خدماتنا والرد على الاستفسارات<br>• لتحسين موقعنا الإلكتروني وخدماتنا<br>• للتواصل معك بشأن خدماتنا<br>• للامتثال للالتزامات القانونية',
modal_privacy_protection_title: 'حماية البيانات',
modal_privacy_protection_desc: 'نحن نطبق تدابير أمنية مناسبة لحماية معلوماتك الشخصية من الوصول غير المصرح به أو التعديل أو الكشف أو التدمير.',
modal_privacy_rights_title: 'حقوقك',
modal_privacy_rights_list: '• الوصول إلى معلوماتك الشخصية<br>• تصحيح المعلومات غير الدقيقة<br>• حذف معلوماتك الشخصية<br>• إلغاء الاشتراك في الاتصالات التسويقية',
modal_privacy_contact_title: 'اتصل بنا',
modal_privacy_contact_desc: 'إذا كان لديك أي أسئلة حول سياسة الخصوصية هذه، يرجى الاتصال بنا على info@mscarabia.com.',
modal_cookie_tag: 'سياسة ملفات تعريف الارتباط',
modal_cookie_title: 'سياسة ملفات تعريف الارتباط',
modal_cookie_effective: 'تاريخ السريان: 26 مارس 2026',
modal_cookie_updated: 'آخر تحديث: 26 مارس 2026',
modal_cookie_what_title: 'ما هي ملفات تعريف الارتباط؟',
modal_cookie_what_desc: 'ملفات تعريف الارتباط هي ملفات نصية صغيرة تستخدم لتخزين أجزاء صغيرة من المعلومات على جهازك عند زيارة موقعنا الإلكتروني.',
modal_cookie_how_title: 'كيف نستخدم ملفات تعريف الارتباط؟',
modal_cookie_how_desc: 'نحن نستخدم ملفات تعريف الارتباط لضمان عمل موقعنا الإلكتروني بشكل صحيح، وتعزيز الأمان، وتوفير تجربة مستخدم أفضل، وتحليل الأداء.',
modal_cookie_types_title: 'أنواع ملفات تعريف الارتباط التي نستخدمها',
modal_cookie_types_list: '• ملفات تعريف الارتباط الأساسية: مطلوبة لعمل الموقع الإلكتروني بشكل صحيح<br>• ملفات تعريف الارتباط التحليلية: تساعدنا على فهم كيفية تفاعل الزوار مع موقعنا الإلكتروني<br>• ملفات تعريف الارتباط التسويقية: تستخدم لتتبع الزوار عبر مواقع الويب<br>• ملفات تعريف الارتباط الوظيفية: تمكن الوظائف المحسنة والتخصيص',
modal_cookie_manage_title: 'إدارة تفضيلات ملفات تعريف الارتباط',
modal_cookie_manage_desc: 'يمكنك تعديل إعدادات ملفات تعريف الارتباط في أي وقت من خلال إعدادات المتصفح.',
modal_cookie_manage_list: '• Chrome: https://support.google.com/accounts/answer/32050<br>• Safari، Firefox، Edge: يرجى الرجوع إلى وثائق المتصفح المعنية',
eng_tag: 'خدمات الهندسة',
eng_h2: 'اختبار ووضع منظومات السلامة من الحرائق',
eng_desc: 'مهندسون معتمدون من سيمنز مع عقد من الخبرة في مشاريع أرامكو، stc وبترو رابغ.',
eng_s1_title: 'الاختبار والوضع',
eng_s2_title: 'تصميم منظومات إنذار الحريق',
eng_s2_desc: 'تصميم متوافق مع NFPA وكود الحريق السعودي من مسح الموقع إلى التسليم النهائي وتوثيق AutoCAD.',
eng_item1: 'التحقق من دقة نظام الغاز',
eng_item2: 'برمجة الوظائف المنطقية',
eng_item3: 'عنونة الأجهزة وإنهاء الحلقة',
eng_item4: 'اختبار Pre-FAT و FAT الكامل',
eng_item5: 'التكامل مع BACnet والوضع',
eng_item6: 'مسح المواقع وتقييم المخاطر',
eng_item7: 'أنظمة تقليدية وقابلة للعنونة ولاسلكية',
eng_item8: 'استراتيجية وضع المعدات والتقسيم',
eng_item9: 'التكامل مع نظام الإطفاء وأنظمة إدارة المباني والسلامة',
eng_item10: 'التوثيق الكامل ورسومات AutoCAD',
mp_tag: 'حلول القوى العاملة',
mp_h2: 'أي دور. أي مقياس.',
mp_desc: 'قوى عاملة ماهرة وغير ماهرة من جنوب وجنوب شرق آسيا، يتم نشرها مع إجراءات التأشيرة والتوثيق الكاملة.',
mp_col1: 'غير ماهر وعام',
mp_col2: 'شبه ماهر',
mp_col3: 'ماهر واحترافي',
mp_item1: 'عمال المصانع والإنتاج',
mp_item2: 'النظافة والخدمات الفندقية',
mp_item3: 'المساعدون والعمالة العامة',
mp_item4: 'مساعدو الطبخ والمطابخ',
mp_item5: 'عمال المناظر الطبيعية والحدائق',
mp_item6: 'العمال الزراعيون',
mp_item7: 'السائقون (خفيفة، ثقيلة، حافلات)',
mp_item8: 'حراس الأمن وضباط السلامة',
mp_item9: 'مساعدو الرعاية الصحية والممرضات',
mp_item10: 'مشغلو المستودعات والرافعات',
mp_item11: 'الرسامون والبناؤون وبلطيون',
mp_item12: 'لحامون وعمّال سقالات',
mp_item13: 'المهندسون والفنيون',
mp_item14: 'محترفو تكنولوجيا المعلومات',
mp_item15: 'الطاقم الطبي والمتخصصون',
mp_item16: 'مديرو المشاريع (PMP)',
mp_item17: 'موظفو الإدارة والمراقبة',
mp_item18: 'متخصصو المشتريات',
about_tag: 'من نحن',
about_h2: 'سعودية الأساس.<br>معتمدة عالمياً.',
about_p1: 'MSC Arabia هي شركة مقرها الرياض تقدم خدمات تكنولوجيا المعلومات المدارة، ترخيص إدارة الأجهزة المحمولة، وتوريد الأجهزة والبرامج، وهندسة السلامة من الحرائق، وحلول القوى العاملة في جميع أنحاء المملكة العربية السعودية.',
about_p2: 'يحمل مهندسونا معرفات وصول دائمة لأرامكو، stc وبترو رابغ، ويجمعون بين الشهادات الدولية وخبرة عميقة في السوق السعودي.',
about_stat1: 'سنوات التشغيل في المملكة العربية السعودية',
about_stat2: 'عملاء مؤسسيون نشطون',
about_stat3: 'عاملين تم توظيفهم بنجاح',
about_stat4: 'تغطية دعم تكنولوجيا المعلومات المُدار',
footer_addr: 'حي الخليج، الرياض 13223، المملكة العربية السعودية',
footer_email: 'info@mscarabia.com',
contact_pill: 'تواصل معنا',
contact_title: 'لنحول عملك معاً',
contact_sub: 'هل أنت مستعد لتسريع تحولك الرقمي؟ اتصل بفريق خبرائنا اليوم.',
contact_addr_title: 'عنوان المكتب',
contact_phone_title: 'الهاتف',
contact_email_title: 'البريد الإلكتروني',
contact_form_title: 'أرسل لنا رسالة',
form_name: 'الاسم الكامل',
form_email: 'البريد الإلكتروني',
form_service: 'الخدمة المطلوبة',
form_message: 'الرسالة',
form_submit: 'إرسال الرسالة',
form_name_placeholder: 'مثال: محمد علي',
form_email_placeholder: 'mohammed@example.com',
option_managed_it: 'خدمات تقنية المعلومات المدارة',
option_mdm: 'ترخيص إدارة الأجهزة المحمولة',
option_fire_safety: 'هندسة السلامة من الحرائق',
option_manpower: 'حلول القوى العاملة',
option_hardware: 'أجهزة تكنولوجيا المعلومات والتراخيص',
option_cybersecurity: 'السحابة والبنية التحتية',
option_select_service: 'اختر خدمة',
form_message_placeholder: 'أخبرنا عن متطلباتك...'
}
};
function initClientsStrip() {
var tpl = document.getElementById('clients-chip-template');
var sets = document.querySelectorAll('[data-clients-set]');
if (!tpl || !sets.length) return;
var keys = [];
for (var i = 1; i <= 11; i++) keys.push('client_' + i);
sets.forEach(function (set) {
set.innerHTML = '';
keys.forEach(function (key) {
var frag = tpl.content.cloneNode(true);
var span = frag.querySelector('span');
if (span) span.setAttribute('data-i18n', key);
set.appendChild(frag);
});
});
}
var marqueeOffset = 0;
var marqueeSpeed = 0.72;
var marqueeTarget = 0.72;
var marqueeRaf = null;
var marqueeSetW = 0;
function marqueeFrame() {
var track = document.getElementById('clients-track');
if (!track) {
marqueeRaf = requestAnimationFrame(marqueeFrame);
return;
}
marqueeSpeed += (marqueeTarget - marqueeSpeed) * 0.09;
if (marqueeSpeed < 0.04) marqueeSpeed = 0.04;
if (!marqueeSetW) {
marqueeRaf = requestAnimationFrame(marqueeFrame);
return;
}
marqueeOffset -= marqueeSpeed;
if (marqueeOffset <= -marqueeSetW) marqueeOffset += marqueeSetW;
track.style.transform = 'translate3d(' + marqueeOffset + 'px,0,0)';
marqueeRaf = requestAnimationFrame(marqueeFrame);
}
function initClientsMarquee() {
var vp = document.getElementById('clients-viewport');
var track = document.getElementById('clients-track');
if (!vp || !track) return;
function measure() {
var firstSet = track.querySelector('.clients-set');
marqueeSetW = firstSet ? firstSet.getBoundingClientRect().width : 0;
if (marqueeSetW) {
while (marqueeOffset <= -marqueeSetW) marqueeOffset += marqueeSetW;
while (marqueeOffset > 0) marqueeOffset -= marqueeSetW;
}
}
window._remeasureClientsMarquee = measure;
measure();
window.addEventListener('resize', measure);
vp.addEventListener('mouseenter', function () { marqueeTarget = 0.05; });
vp.addEventListener('mouseleave', function () { marqueeTarget = 0.72; });
if (marqueeRaf) cancelAnimationFrame(marqueeRaf);
marqueeRaf = requestAnimationFrame(marqueeFrame);
}
function applyI18nElement(element) {
const key = element.getAttribute('data-i18n');
if (!key || !translations[currentLang][key]) return;
const raw = translations[currentLang][key];
const text = toArabicNumbers(raw);
if (element.hasAttribute('data-i18n-html')) {
element.innerHTML = text;
} else {
element.textContent = text;
}
}
function toggleLang() {
const content = document.getElementById('main-content');
if (content) content.classList.add('lang-transition');
setTimeout(() => {
currentLang = currentLang === 'en' ? 'ar' : 'en';
persistLang();
wordIndex = 0;
charIndex = 0;
isDeleting = false;
clearTimeout(typeWriterTimeout);
applyDocumentLocale();
typeWriter();
if (content) {
setTimeout(() => {
content.classList.remove('lang-transition');
}, 30);
}
}, 250);
}
function updateLangSwitchUI() {
const isAr = currentLang === 'ar';
['lang-ios', 'lang-ios-mobile'].forEach(id => {
const b = document.getElementById(id);
if (b) b.setAttribute('aria-checked', isAr ? 'true' : 'false');
});
const labAr = 'العربية';
const labEn = 'English';
const el = document.getElementById('lang-ios-label');
const em = document.getElementById('lang-ios-label-m');
if (el) el.textContent = isAr ? labEn : labAr;
if (em) em.textContent = isAr ? labEn : labAr;
}
function toggleA11y() {
const menu = document.getElementById('a11y-menu');
const mobileMenu = document.getElementById('a11y-menu-mobile');
if (menu) menu.classList.toggle('open');
if (mobileMenu) mobileMenu.classList.toggle('open');
}
function adjustTextSize(delta) {
const html = document.documentElement;
const currentSize = parseFloat(getComputedStyle(html).fontSize);
html.style.fontSize = (currentSize + delta) + 'px';
}
function toggleTheme() {
const isLight = document.documentElement.classList.toggle('light');
document.documentElement.classList.remove('contrast');
document.documentElement.classList.toggle('dark', !isLight);
localStorage.setItem('msc_theme', isLight ? 'light' : 'dark');
}
function toggleContrast() {
const isContrast = document.documentElement.classList.toggle('contrast');
if (isContrast) {
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}
localStorage.setItem('msc_theme', isContrast ? 'contrast' : (document.documentElement.classList.contains('light') ? 'light' : 'dark'));
}
// Add to init/DOMContentLoaded
const savedTheme = localStorage.getItem('msc_theme') || 'dark';
document.documentElement.classList.toggle('light', savedTheme === 'light');
document.documentElement.classList.toggle('dark', savedTheme === 'dark' || savedTheme === 'contrast');
document.documentElement.classList.toggle('contrast', savedTheme === 'contrast');
// Modal Functions
function openModal(type) {
document.getElementById(`${type}-modal`).classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeModal(type) {
document.getElementById(`${type}-modal`).classList.remove('open');
document.body.style.overflow = '';
}
// Mobile menu toggle
function toggleMenu() {
const mm = document.getElementById('mm');
const hbg = document.getElementById('hbg');
const mobileMenu = document.getElementById('mobile-menu');
mm.classList.toggle('hidden');
mobileMenu.classList.toggle('hidden');
hbg.classList.toggle('active');
}
function closeMenu() {
const mm = document.getElementById('mm');
const hbg = document.getElementById('hbg');
const mobileMenu = document.getElementById('mobile-menu');
mm.classList.add('hidden');
mobileMenu.classList.add('hidden');
hbg.classList.remove('active');
}
// Form Submission
function handleSubmit(event) {
event.preventDefault();
var form = event.target;
var nameEl = document.getElementById('name');
var emailEl = document.getElementById('email');
var serviceEl = form.querySelector('select[name="service"]');
var messageEl = document.getElementById('message');
var submitBtn = form.querySelector('button[type="submit"]');
if (!nameEl || !emailEl || !submitBtn) return;
var name = nameEl.value.trim();
var email = emailEl.value.trim();
var service = serviceEl ? serviceEl.value : '';
var serviceText = serviceEl ? serviceEl.options[serviceEl.selectedIndex].textContent.trim() : '';
var message = messageEl ? messageEl.value.trim() : '';
var originalBtnText = submitBtn.textContent;
submitBtn.disabled = true;
submitBtn.textContent = translations[currentLang].mq_notice_sending || 'Sending...';
var formData = new FormData();
formData.append('name', name);
formData.append('email', email);
formData.append('service', serviceText);
formData.append('message', message);
formData.append('subject', 'MSC Arabia Contact — ' + (serviceText || 'General'));
fetch('contact.php', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
alert(currentLang === 'ar' ? 'تم الإرسال بنجاح!' : 'Message sent successfully!');
form.reset();
} else {
throw new Error('Server error');
}
})
.catch(error => {
// Fallback to mailto if PHP fails or not available
var subject = 'MSC Arabia Contact — ' + (serviceText || 'General');
var body = 'Name: ' + name + '\nEmail: ' + email + '\nService: ' + serviceText + '\n\nMessage:\n' + message;
window.location.href = 'mailto:info@mscarabia.com?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
})
.finally(() => {
submitBtn.disabled = false;
submitBtn.textContent = originalBtnText;
});
}
// Manpower Free Quote (mailto generator)
const MQ_PROF_MAP = {
cleaner: 'mq_prof_cleaner',
general_labor: 'mq_prof_general_labor',
security_hse: 'mq_prof_security_hse',
technician_engineer: 'mq_prof_technician_engineer',
driver: 'mq_prof_driver',
custom: 'mq_prof_custom'
};
function initManpowerQuote() {
var employeesEl = document.getElementById('mq_employees');
var employeesValEl = document.getElementById('mq_employees_val');
var durationEl = document.getElementById('mq_duration');
var durationValEl = document.getElementById('mq_duration_val');
var permanentEl = document.getElementById('mq_permanent');
var budgetEl = document.getElementById('mq_budget');
var budgetValEl = document.getElementById('mq_budget_val');
var budgetUnitEl = document.getElementById('mq_budget_unit');
var totalValEl = document.getElementById('mq_total_val');
var totalBreakdownEl = document.getElementById('mq_total_breakdown');
var transEl = document.getElementById('mq_trans');
var profCustomCheckbox = document.getElementById('mq_prof_custom_checkbox');
var profCustomInput = document.getElementById('mq_prof_custom_input');
var nationalitySelect = document.getElementById('mq_nationality');
var nationalityCustomInput = document.getElementById('mq_nationality_custom_input');
if (!employeesEl || !employeesValEl || !durationEl || !durationValEl || !budgetEl || !budgetValEl || !totalValEl) return;
var budgetMode = 'monthly'; // 'monthly' or 'yearly'
// Toggle custom profession input visibility
if (profCustomCheckbox && profCustomInput) {
var profWrap = document.getElementById('mq_prof_custom_wrap');
profCustomCheckbox.addEventListener('change', function() {
if (this.checked) {
profWrap.classList.add('open');
profCustomInput.focus();
} else {
profWrap.classList.remove('open');
profCustomInput.value = '';
}
});
}
// Toggle custom nationality input visibility
if (nationalitySelect && nationalityCustomInput) {
var natWrap = document.getElementById('mq_nationality_custom_wrap');
nationalitySelect.addEventListener('change', function() {
if (this.value === 'custom') {
natWrap.classList.add('open');
nationalityCustomInput.focus();
} else {
natWrap.classList.remove('open');
nationalityCustomInput.value = '';
}
});
}
function updateEmployees() {
var v = parseInt(employeesEl.value) || 0;
if (v > 1000) {
employeesValEl.textContent = translations[currentLang].mq_workers_plus || '1000+ workers';
} else {
var suffix = translations[currentLang].mq_workers || 'workers';
employeesValEl.textContent = toArabicNumbers(String(v)) + ' ' + suffix;
}
updateTotal();
}
function updateDuration() {
var perm = permanentEl && permanentEl.checked;
durationEl.disabled = !!perm;
if (perm) {
durationValEl.textContent = translations[currentLang].mq_permanent_label || translations[currentLang].mq_permanent || 'Permanent';
updateTotal();
return;
}
var v = parseInt(durationEl.value) || 1;
var label = '';
if (v <= 12) {
// 1 to 12 months
var unitKey = v === 1 ? 'mq_month' : 'mq_months';
label = toArabicNumbers(String(v)) + ' ' + (translations[currentLang][unitKey] || 'months');
} else if (v >= 13 && v <= 24) {
// 1 to 12 years (Value 13 is 1 year, 14 is 2 years, etc.)
var years = v - 12;
var unitKey = years === 1 ? 'mq_year' : 'mq_years';
label = toArabicNumbers(String(years)) + ' ' + (translations[currentLang][unitKey] || 'years');
} else {
// 25 is permanent
label = translations[currentLang].mq_permanent_label || translations[currentLang].mq_permanent || 'Permanent';
}
durationValEl.textContent = label;
updateTotal();
}
function updateBudget() {
var v = parseInt(budgetEl.value) || 1;
var realValue = 0;
if (v <= 40) {
budgetMode = 'monthly';
realValue = 1000 + (v - 1) * 100; // 1000 to 4900... actually let's make it 5000
if (v === 40) realValue = 5000;
budgetUnitEl.textContent = translations[currentLang].mq_budget_per || 'SAR / person / month';
} else {
budgetMode = 'yearly';
realValue = 12000 + (v - 41) * 1200; // 12000 to 60000
budgetUnitEl.textContent = translations[currentLang].mq_budget_per_year || 'SAR / person / year';
}
budgetValEl.textContent = toArabicNumbers(String(realValue)) + ' ' + (budgetMode === 'monthly' ? 'SAR/mo' : 'SAR/yr');
updateTotal();
}
function updateTotal() {
var workers = parseInt(employeesEl.value) || 0;
var vBudget = parseInt(budgetEl.value) || 1;
var budget = 0;
if (vBudget <= 40) {
budget = 1000 + (vBudget - 1) * 100;
if (vBudget === 40) budget = 5000;
} else {
budget = 12000 + (vBudget - 41) * 1200;
}
var durationVal = parseInt(durationEl.value) || 1;
var perm = permanentEl && permanentEl.checked;
// If 1000+, we treat as 1000 for estimate
var calcWorkers = workers > 1000 ? 1000 : workers;
var total = 0;
var multiplier = 1;
if (perm || durationVal === 25) {
// Permanent: show monthly cost as base or just total for 1 month
total = calcWorkers * (vBudget <= 40 ? budget : budget / 12);
} else if (durationVal <= 12) {
// Months
var months = durationVal;
total = calcWorkers * (vBudget <= 40 ? budget * months : (budget / 12) * months);
multiplier = months;
} else {
// Years
var years = durationVal - 12;
total = calcWorkers * (vBudget <= 40 ? budget * (years * 12) : budget * years);
multiplier = years;
}
var formattedTotal = new Intl.NumberFormat(currentLang === 'ar' ? 'ar-SA' : 'en-US', {
maximumFractionDigits: 0
}).format(total);
totalValEl.textContent = 'SAR ' + toArabicNumbers(formattedTotal) + (workers > 1000 ? '+' : '');
var breakdownText = '';
if (perm || durationVal === 25) {
breakdownText = toArabicNumbers(String(workers > 1000 ? '1000+' : workers)) + ' ' +
(translations[currentLang].mq_workers || 'workers') + ' × SAR ' +
toArabicNumbers(String(budget)) + ' (' + (vBudget <= 40 ? 'Monthly' : 'Yearly') + ')';
} else {
breakdownText = toArabicNumbers(String(workers > 1000 ? '1000+' : workers)) + ' ' +
(translations[currentLang].mq_workers || 'workers') + ' × SAR ' +
toArabicNumbers(String(budget)) + ' × ' + toArabicNumbers(String(multiplier)) + ' ' +
(durationVal <= 12 ? (translations[currentLang].mq_months || 'months') : (translations[currentLang].mq_years || 'years'));
}
totalBreakdownEl.textContent = breakdownText;
}
employeesEl.addEventListener('input', updateEmployees);
durationEl.addEventListener('input', updateDuration);
if (permanentEl) permanentEl.addEventListener('change', updateDuration);
budgetEl.addEventListener('input', updateBudget);
// Expose to language toggler
window._updateManpowerQuoteUI = function() {
updateEmployees();
updateDuration();
// Update budget unit based on mode
if (budgetMode === 'monthly') {
budgetUnitEl.textContent = translations[currentLang].mq_budget_per || 'SAR / person / month';
} else {
budgetUnitEl.textContent = translations[currentLang].mq_budget_per_year || 'SAR / person / year';
}
updateBudget();
updateTotal();
};
window._updateManpowerQuoteUI();
}
function handleManpowerQuote(event) {
event.preventDefault();
var form = event.target;
var notice = document.getElementById('mq_notice');
var submitBtn = form.querySelector('button[type="submit"]');
if (notice) notice.textContent = (translations[currentLang].mq_notice_sending || 'Opening your email client...');
var nameEl = document.getElementById('mq_name');
var emailEl = document.getElementById('mq_email');
var employeesEl = document.getElementById('mq_employees');
var durationEl = document.getElementById('mq_duration');
var permanentEl = document.getElementById('mq_permanent');
var budgetEl = document.getElementById('mq_budget');
var nationalityEl = document.getElementById('mq_nationality');
var startDateEl = document.getElementById('mq_start_date');
if (!nameEl || !emailEl || !employeesEl || !durationEl || !budgetEl || !startDateEl) return;
var mqName = (nameEl.value || '').trim();
var mqEmail = (emailEl.value || '').trim();
var workers = parseInt(employeesEl.value) || 0;
var workersLabel = workers > 1000 ? '1000+' : String(workers);
var durationVal = parseInt(durationEl.value);
var durationLabel = '';
if (permanentEl && permanentEl.checked) {
durationLabel = translations[currentLang].mq_permanent_label || 'Permanent';
} else if (durationVal <= 12) {
durationLabel = toArabicNumbers(String(durationVal)) + ' ' + (translations[currentLang][durationVal === 1 ? 'mq_month' : 'mq_months'] || 'months');
} else if (durationVal >= 13 && durationVal <= 24) {
var yrs = durationVal - 12;
durationLabel = toArabicNumbers(String(yrs)) + ' ' + (translations[currentLang][yrs === 1 ? 'mq_year' : 'mq_years'] || 'years');
} else {
durationLabel = translations[currentLang].mq_permanent_label || 'Permanent';
}
var profs = [];
var profInputs = document.querySelectorAll('input[name="mq_prof"]:checked');
profInputs.forEach(function (inp) {
var key = MQ_PROF_MAP[inp.value];
if (key && translations[currentLang][key]) profs.push(translations[currentLang][key]);
});
// Add custom profession if checked and filled
var profCustomCheckbox = document.getElementById('mq_prof_custom_checkbox');
var profCustomInput = document.getElementById('mq_prof_custom_input');
if (profCustomCheckbox && profCustomCheckbox.checked && profCustomInput && profCustomInput.value.trim()) {
profs.push(profCustomInput.value.trim());
}
if (!profs.length) profs = [translations[currentLang].mq_not_specified || 'Not specified'];
var foodYesNo = (document.getElementById('mq_food') || {}).checked ? (translations[currentLang].mq_yes || 'Yes') : (translations[currentLang].mq_no || 'No');
var accomYesNo = (document.getElementById('mq_accom') || {}).checked ? (translations[currentLang].mq_yes || 'Yes') : (translations[currentLang].mq_no || 'No');
var transYesNo = (document.getElementById('mq_trans') || {}).checked ? (translations[currentLang].mq_yes || 'Yes') : (translations[currentLang].mq_no || 'No');
var budget = budgetEl.value || '0';
var budgetMode = document.getElementById('budget_monthly_btn').classList.contains('active') ? 'Monthly' : 'Yearly';
var budgetPer = budgetMode === 'Monthly' ?
(translations[currentLang].mq_budget_per || 'SAR / person / month') :
(translations[currentLang].mq_budget_per_year || 'SAR / person / year');
var nationality = nationalityEl ? nationalityEl.options[nationalityEl.selectedIndex].text : '-';
// If custom nationality is selected, use the custom input value
var nationalityCustomInput = document.getElementById('mq_nationality_custom_input');
if (nationalityEl && nationalityEl.value === 'custom' && nationalityCustomInput && nationalityCustomInput.value.trim()) {
nationality = nationalityCustomInput.value.trim();
}
var startDate = startDateEl.value || '-';
var subject = (translations[currentLang].mq_subject || 'Manpower Free Quote Request') + ' — ' + toArabicNumbers(workersLabel) + ' ' + (translations[currentLang].mq_workers || 'workers');
var body =
'Name: ' + (mqName || '-') + '\n' +
'Email: ' + (mqEmail || '-') + '\n' +
'Nationality: ' + (nationality || '-') + '\n\n' +
(translations[currentLang].mq_employees || 'Workers') + ': ' + toArabicNumbers(workersLabel) + '\n' +
(translations[currentLang].mq_duration || 'Duration') + ': ' + durationLabel + '\n' +
(translations[currentLang].mq_profession || 'Profession') + ': ' + profs.join(', ') + '\n' +
(translations[currentLang].mq_food || 'Food') + ': ' + foodYesNo + '\n' +
(translations[currentLang].mq_accommodation || 'Accommodation') + ': ' + accomYesNo + '\n' +
(translations[currentLang].mq_trans_short || 'Transportation') + ': ' + transYesNo + '\n' +
(translations[currentLang].mq_budget || 'Budget') + ': ' + toArabicNumbers(String(budget)) + ' ' + budgetPer + '\n' +
(translations[currentLang].mq_start_date || 'Start date') + ': ' + startDate;
var originalBtnText = submitBtn ? submitBtn.textContent : '';
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.textContent = translations[currentLang].mq_notice_sending || 'Sending...';
}
var formData = new FormData();
formData.append('name', mqName);
formData.append('email', mqEmail);
formData.append('workers', workersLabel);
formData.append('duration', durationLabel);
formData.append('profession', profs.join(', '));
formData.append('food', foodYesNo);
formData.append('accommodation', accomYesNo);
formData.append('transportation', transYesNo);
formData.append('budget', budget + ' ' + budgetPer);
formData.append('nationality', nationality);
formData.append('start_date', startDate);
formData.append('subject', subject);
fetch('contact.php', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
alert(currentLang === 'ar' ? 'تم طلب عرض السعر بنجاح!' : 'Quote request sent successfully!');
form.reset();
if (typeof window._updateManpowerQuoteUI === 'function') window._updateManpowerQuoteUI();
} else {
throw new Error('Server error');
}
})
.catch(error => {
// Fallback to mailto
window.location.href = 'mailto:info@mscarabia.com?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
})
.finally(() => {
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.textContent = originalBtnText;
}
});
}
// Arabic Number Converter
function toArabicNumbers(str) {
if (currentLang !== 'ar') return str;
const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
return str.toString().replace(/[0-9]/g, (digit) => arabicNumbers[parseInt(digit)]);
}
// Typewriter Effect
const words = {
en: ['IT', 'Engineering', 'Security', 'Cloud'],
ar: ['تقنية', 'هندسة', 'أمان', 'سحابة']
};
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
let typeWriterTimeout;
function typeWriter() {
const currentWords = words[currentLang] || words.en;
const currentWord = currentWords[wordIndex];
const twElement = document.getElementById('tw-word');
if (!twElement || !currentWord) return;
if (isDeleting) {
charIndex--;
twElement.textContent = currentWord.substring(0, charIndex);
} else {
twElement.textContent = currentWord.substring(0, charIndex + 1);
charIndex++;
}
if (!isDeleting && charIndex === currentWord.length) {
isDeleting = true;
typeWriterTimeout = setTimeout(typeWriter, 2000);
} else if (isDeleting && charIndex === 0) {
isDeleting = false;
wordIndex = (wordIndex + 1) % currentWords.length;
typeWriterTimeout = setTimeout(typeWriter, 500);
} else {
typeWriterTimeout = setTimeout(typeWriter, isDeleting ? 50 : 100);
}
}
// Initialize
document.addEventListener('DOMContentLoaded', function() {
initClientsStrip();
currentLang = readStoredLang();
applyDocumentLocale();
initManpowerQuote();
initBackToTop();
initSideNav();
requestAnimationFrame(function () {
initClientsMarquee();
});
typeWriter();
// Close modals on escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.modal-overlay.open').forEach(modal => {
const type = modal.id.replace('-modal', '');
closeModal(type);
});
}
});
// Close modals on background click
document.querySelectorAll('.modal-overlay').forEach(modal => {
modal.addEventListener('click', function(e) {
if (e.target === modal) {
const type = modal.id.replace('-modal', '');
closeModal(type);
}
});
});
});
// Tawk.to Chatbot
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/69cfa6ea8153c41c3b4dd284/1jl9i81c0';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment