/* ============================================================ Prime Logic for Consulting & IT Solutions Professional IT theme — deep navy #0D1E38, brand orange #EC6B17, tech teal Fonts: Almarai (Arabic RTL) + Plus Jakarta Sans (English LTR) ============================================================ */ :root { --navy: #0D1E38; --navy-dark: #091628; --navy-darker: #060F1C; --navy-mid: #142a4e; --accent: #EC6B17; --accent-dark: #C85A10; --accent-light: #F4A26B; --teal: #0EA5E9; --teal-dark: #0284C7; --ink: #0D1E38; --text: #64748B; --text-soft: #94A3B8; --cream: #F8FAFC; --cream-2: #F1F5F9; --line: #E2E8F0; --white: #ffffff; --shadow-lg: 0 28px 60px -18px rgba(13, 30, 56, 0.28); --shadow-md: 0 14px 34px -14px rgba(13, 30, 56, 0.22); --shadow-sm: 0 6px 18px -8px rgba(13, 30, 56, 0.14); --radius: 10px; --radius-lg: 16px; --transition: all 0.35s cubic-bezier(0.25, 0.8, 0.3, 1); /* Arabic font */ --font-ar: "Almarai", sans-serif; /* English font */ --font-en: "Plus Jakarta Sans", sans-serif; --font: var(--font-ar); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } ::selection { background: var(--accent); color: var(--white); } /* ── Arabic (RTL) base ─────────────────────────────────────── */ body { font-family: var(--font-ar); background: var(--white); color: var(--text); overflow-x: hidden; line-height: 1.9; font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── English (LTR) base ────────────────────────────────────── */ body[dir="ltr"] { font-family: var(--font-en); line-height: 1.75; letter-spacing: -0.01em; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } /* ── Headings ────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: var(--navy); font-weight: 800; line-height: 1.3; } body[dir="ltr"] h1, body[dir="ltr"] h2, body[dir="ltr"] h3, body[dir="ltr"] h4 { font-family: var(--font-en); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; } .container { width: min(1200px, 92%); margin-inline: auto; } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); } /* ---------- Scroll progress ---------- */ .scroll-progress { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--teal)); z-index: 2000; } /* ---------- Language visibility ---------- Driven by so the correct language is shown before first paint (the bootstrap script in sets it from localStorage). */ html[dir="rtl"] [data-lang="en"] { display: none !important; } html[dir="ltr"] [data-lang="ar"] { display: none !important; } /* ---------- Top bar ---------- */ .topbar { background: var(--navy-darker); font-size: 0.82rem; padding: 9px 0; border-bottom: 1px solid rgba(236, 107, 23, 0.2); } .topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .topbar-info { display: flex; gap: 24px; flex-wrap: wrap; } .topbar-info a, .topbar-info span { color: rgba(255, 255, 255, 0.75); display: inline-flex; align-items: center; gap: 8px; transition: var(--transition); } .topbar-info a:hover { color: var(--accent); } .topbar-info i { color: var(--accent); font-size: 0.8rem; } .topbar-social { display: flex; gap: 8px; } .topbar-social a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); font-size: 0.72rem; transition: var(--transition); } .topbar-social a:hover { background: var(--accent); color: var(--navy); transform: translateY(-2px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 999; background: var(--white); border-bottom: 1px solid var(--line); transition: var(--transition); } .site-header.scrolled { box-shadow: var(--shadow-sm); } .site-header.scrolled .container { padding: 7px 0; } .site-header.scrolled .brand img { height: 48px; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; } .brand img { height: 58px; width: auto; transition: var(--transition); } .brand:hover img { transform: scale(1.04); } /* Dropdown nav */ .main-nav ul { display: flex; gap: 2px; align-items: center; } .main-nav a { padding: 10px 11px; font-weight: 700; font-size: 0.87rem; color: var(--navy); position: relative; transition: var(--transition); display: flex; align-items: center; gap: 5px; } body[dir="ltr"] .main-nav a { font-family: var(--font-en); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.01em; } .main-nav a::after { content: ""; position: absolute; inset-inline: 14px; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transition: var(--transition); } .main-nav a:hover, .main-nav a.active { color: var(--accent-dark); } .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); } .nav-arrow { font-size: 0.7rem; transition: var(--transition); } .has-dropdown { position: relative; } .has-dropdown:hover .nav-arrow { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 240px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); border-top: 3px solid var(--accent); opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); z-index: 100; padding: 10px 0; } .has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown li a { padding: 10px 18px; font-size: 0.88rem; color: var(--navy); display: flex; align-items: center; gap: 10px; } .dropdown li a::after { display: none; } .dropdown li a i { color: var(--accent); width: 18px; } .dropdown li a:hover { background: var(--cream); color: var(--accent-dark); } .header-actions { display: flex; align-items: center; gap: 12px; } .lang-switch { border: 1.5px solid var(--navy); background: transparent; color: var(--navy); padding: 8px 18px; border-radius: var(--radius); font-weight: 800; font-size: 0.85rem; font-family: var(--font-ar); transition: var(--transition); } body[dir="ltr"] .lang-switch { font-family: var(--font-en); font-weight: 700; } .lang-switch:hover { background: var(--navy); color: var(--white); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 34px; border-radius: var(--radius); font-weight: 800; font-size: 0.95rem; font-family: var(--font-ar); border: none; transition: var(--transition); letter-spacing: 0.01em; } body[dir="ltr"] .btn { font-family: var(--font-en); font-weight: 700; letter-spacing: 0.02em; } .btn-accent { background: var(--accent); color: var(--navy); box-shadow: 0 10px 24px -10px rgba(236, 107, 23, 0.65); } .btn-accent:hover { background: var(--navy); color: var(--white); transform: translateY(-3px); } .btn-navy { background: var(--navy); color: var(--white); box-shadow: 0 10px 24px -10px rgba(13, 30, 56, 0.5); } .btn-navy:hover { background: var(--accent); color: var(--navy); transform: translateY(-3px); } .btn-light { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.6); color: var(--white); } .btn-light:hover { background: var(--white); color: var(--navy); transform: translateY(-3px); } .btn-outline-navy { background: transparent; border: 1.5px solid var(--navy); color: var(--navy); } .btn-outline-navy:hover { background: var(--navy); color: var(--white); transform: translateY(-3px); } .nav-toggle { display: none; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); width: 44px; height: 44px; color: var(--navy); font-size: 1.2rem; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: url("../assets/riyadh-hero.webp") center 55% / cover no-repeat; animation: heroZoom 18s ease-in-out infinite alternate; } @keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } } .hero-overlay { position: absolute; inset: 0; /* RTL: content sits on the RIGHT → dark there for readability, light on the LEFT so the Riyadh skyline stays visible */ background: linear-gradient( to left, rgba(6, 12, 24, 0.90) 0%, rgba(6, 12, 24, 0.62) 45%, rgba(6, 12, 24, 0.15) 100% ); z-index: 1; } body[dir="ltr"] .hero-overlay { /* LTR: content sits on the LEFT → dark there, light on the RIGHT */ background: linear-gradient( to right, rgba(6, 12, 24, 0.90) 0%, rgba(6, 12, 24, 0.62) 45%, rgba(6, 12, 24, 0.15) 100% ); } .hero::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--teal), var(--accent)); z-index: 2; } .hero .container { position: relative; z-index: 2; padding: 90px 0; } .hero-content { max-width: 660px; } .hero-eyebrow { display: inline-block; color: var(--accent); font-weight: 800; font-size: 0.78rem; letter-spacing: 3.5px; text-transform: uppercase; border: 1px solid rgba(236, 107, 23, 0.4); padding: 8px 20px; border-radius: 3px; margin-bottom: 28px; background: rgba(236, 107, 23, 0.08); font-family: var(--font-ar); } body[dir="ltr"] .hero-eyebrow { font-family: var(--font-en); font-weight: 700; font-size: 0.72rem; letter-spacing: 4px; } .hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.8rem); font-weight: 800; line-height: 1.3; color: var(--white); margin-bottom: 22px; font-family: var(--font-ar); } body[dir="ltr"] .hero h1 { font-family: var(--font-en); font-weight: 800; font-size: clamp(2.2rem, 4.8vw, 3.9rem); letter-spacing: -0.035em; line-height: 1.15; } .hero h1 .accent { color: var(--accent); } .hero-line { width: 90px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--teal)); margin-bottom: 26px; position: relative; } .hero-line::after { content: ""; position: absolute; inset-inline-start: 100px; top: 0; width: 26px; height: 3px; background: rgba(236, 107, 23, 0.5); } .hero p.lead { color: rgba(255, 255, 255, 0.88); font-size: 1.1rem; margin-bottom: 36px; max-width: 560px; line-height: 2; font-weight: 300; } body[dir="ltr"] .hero p.lead { font-family: var(--font-en); font-size: 1.08rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.005em; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; } .hero-feats { display: flex; gap: 26px; flex-wrap: wrap; } .hero-feats span { display: inline-flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, 0.9); font-weight: 700; font-size: 0.9rem; } body[dir="ltr"] .hero-feats span { font-family: var(--font-en); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.01em; } .hero-feats i { color: var(--accent); } /* Thin gold frames in hero corners (desktop) */ .hero-frame { position: absolute; width: 140px; height: 140px; z-index: 2; pointer-events: none; opacity: 0.65; } .hero-frame.tl { top: 42px; inset-inline-start: 42px; border-top: 2px solid var(--accent); border-inline-start: 2px solid var(--accent); } .hero-frame.br { bottom: 56px; inset-inline-end: 42px; border-bottom: 2px solid var(--teal); border-inline-end: 2px solid var(--teal); } /* Desktop fixed social rail */ .social-rail { position: fixed; top: 50%; transform: translateY(-50%); inset-inline-end: 30px; z-index: 990; display: flex; flex-direction: column; align-items: center; gap: 14px; } .social-rail a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 1px solid var(--line); color: var(--navy); font-size: 0.85rem; box-shadow: var(--shadow-sm); transition: var(--transition); } .social-rail a:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-3px); } .social-rail .rail-line { width: 2px; height: 74px; background: linear-gradient(180deg, var(--accent), transparent); } /* Tech floating elements in hero */ .hero-tech-el { position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; } .hero-tech-el.el1 { width: 300px; height: 300px; bottom: -80px; inset-inline-end: 8%; background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, transparent 70%); animation: floatBlob 8s ease-in-out infinite; } .hero-tech-el.el2 { width: 180px; height: 180px; top: 10%; inset-inline-end: 20%; border: 1px solid rgba(236, 107, 23, 0.2); animation: floatBlob 10s ease-in-out infinite 2s; } .hero-tech-el.el3 { width: 90px; height: 90px; top: 30%; inset-inline-end: 35%; border: 1px solid rgba(14, 165, 233, 0.15); background: rgba(14, 165, 233, 0.04); animation: floatBlob 6s ease-in-out infinite 1s; } @keyframes floatBlob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(8deg); } } /* Vision 2030 tag */ .vision-tag { position: absolute; bottom: 46px; inset-inline-end: 30px; z-index: 4; display: flex; align-items: center; gap: 14px; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-lg); padding: 11px 20px; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.6); } .vision-tag img { height: 50px; width: auto; display: block; } .vision-tag .vt-sep { width: 1px; height: 36px; background: var(--line); } .vision-tag span { color: var(--navy); font-size: 0.76rem; font-weight: 800; line-height: 1.35; max-width: 112px; display: block; } .scroll-hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255, 255, 255, 0.65); font-size: 1.2rem; animation: hintBounce 2s ease-in-out infinite; } @keyframes hintBounce { 0%, 100% { transform: translate(-50%, 0); opacity: 0.55; } 50% { transform: translate(-50%, 9px); opacity: 1; } } /* ---------- Section shell ---------- */ section { padding: 100px 0; position: relative; } .section-head { text-align: center; max-width: 760px; margin: 0 auto 60px; } .eyebrow { display: inline-block; color: var(--accent-dark); font-weight: 800; font-family: var(--font-ar); font-size: 0.78rem; letter-spacing: 3.5px; text-transform: uppercase; margin-bottom: 16px; position: relative; padding-bottom: 12px; } body[dir="ltr"] .eyebrow { font-family: var(--font-en); font-weight: 700; font-size: 0.72rem; letter-spacing: 4px; } .eyebrow::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 2px; background: var(--accent); border-radius: 2px; } .about-body .eyebrow::after { left: 0; transform: none; } body[dir="ltr"] .about-body .eyebrow::after { left: 0; right: auto; } .eyebrow.light { color: var(--accent); } .section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.4; font-weight: 800; } body[dir="ltr"] .section-head h2 { font-family: var(--font-en); font-size: clamp(1.85rem, 3.4vw, 2.65rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; } .section-head h2.light { color: var(--white); } .section-head p { color: var(--text-soft); margin-top: 16px; font-size: 1.02rem; line-height: 1.85; } body[dir="ltr"] .section-head p { font-family: var(--font-en); font-size: 1rem; font-weight: 400; line-height: 1.75; } .section-head .light-p { color: rgba(255,255,255,0.75); margin-top: 16px; font-size: 1rem; } /* ---------- About ---------- */ .about { background: var(--cream); } .about .container { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; } .about-media { position: relative; padding-bottom: 90px; } .about-media .img-main { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid var(--white); } .about-media .img-main img { width: 100%; height: 440px; object-fit: cover; transition: transform 0.8s ease; } .about-media:hover .img-main img { transform: scale(1.05); } .about-media .img-sub { position: absolute; bottom: 20px; inset-inline-end: -20px; width: 58%; border-radius: var(--radius-lg); overflow: hidden; border: 6px solid var(--white); box-shadow: var(--shadow-md); } .about-media .img-sub img { width: 100%; height: 190px; object-fit: cover; } .about-media .exp-badge { position: absolute; bottom: 40px; inset-inline-start: 12px; background: var(--navy); color: var(--white); border-radius: var(--radius-lg); padding: 20px 26px; text-align: center; box-shadow: var(--shadow-md); border-bottom: 4px solid var(--accent); } .about-media .exp-badge b { font-size: 2.1rem; font-weight: 800; display: block; line-height: 1.15; color: var(--accent); } .about-media .exp-badge span { font-size: 0.8rem; font-weight: 700; } .about-body h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 20px; line-height: 1.45; font-weight: 800; } body[dir="ltr"] .about-body h2 { font-family: var(--font-en); font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -0.03em; line-height: 1.25; } .about-body p { margin-bottom: 16px; line-height: 1.95; font-size: 0.98rem; } body[dir="ltr"] .about-body p { font-family: var(--font-en); font-size: 0.96rem; line-height: 1.78; } .about-btns { display: flex; gap: 14px; flex-wrap: wrap; } .about-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 32px; } .about-points li { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 0.92rem; color: var(--navy); } .about-points i { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--navy); font-size: 0.7rem; } /* ---------- Stats ---------- */ .stats { background: var(--navy); padding: 70px 0; position: relative; overflow: hidden; } .stats::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(236, 107, 23, 0.1) 1px, transparent 1px); background-size: 26px 26px; } /* Animated tech lines */ .stats::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(14, 165, 233, 0.06) 100%); } .stats .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 1; } .stat { text-align: center; position: relative; } .stat:not(:last-child)::after { content: ""; position: absolute; top: 15%; inset-inline-end: -12px; height: 70%; width: 1px; background: rgba(255, 255, 255, 0.12); } .stat b { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; color: var(--accent); } .stat b span { display: inline; font-size: inherit; color: inherit; margin: 0; } .stat > span { display: block; color: rgba(255, 255, 255, 0.85); font-weight: 700; font-size: 0.92rem; margin-top: 4px; } /* ---------- Vision / Mission ===== */ .vision { background: var(--white); } .vm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .vm-card { background: var(--cream); border-radius: var(--radius-lg); padding: 46px 36px; transition: var(--transition); position: relative; border: 1px solid var(--line); } .vm-card::before { content: ""; position: absolute; top: 0; inset-inline-start: 36px; width: 56px; height: 4px; background: linear-gradient(90deg, var(--accent), var(--teal)); } .vm-card:hover { background: var(--navy); transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--navy); } .vm-card .vm-icon { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--accent); font-size: 1.45rem; margin-bottom: 22px; transition: var(--transition); } .vm-card:hover .vm-icon { background: var(--accent); color: var(--navy); transform: rotate(-6deg) scale(1.06); } .vm-card h3 { font-size: 1.3rem; margin-bottom: 12px; transition: var(--transition); } .vm-card p { transition: var(--transition); font-size: 0.93rem; line-height: 1.9; } .vm-card:hover h3 { color: var(--accent); } .vm-card:hover p { color: rgba(255, 255, 255, 0.82); } /* ---------- Services ---------- */ .services { background: var(--cream); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .service-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: var(--transition); display: flex; flex-direction: column; } .service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: rgba(236, 107, 23, 0.3); } .service-card .sc-media { overflow: hidden; height: 230px; position: relative; } .service-card .sc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13, 30, 56, 0.45)); opacity: 0; transition: var(--transition); } .service-card:hover .sc-media::after { opacity: 1; } .service-card .sc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .service-card:hover .sc-media img { transform: scale(1.08); } .service-card .sc-body { padding: 0 28px 28px; flex: 1; display: flex; flex-direction: column; position: relative; } .service-card .sc-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--accent); font-size: 1.3rem; margin-top: -31px; margin-bottom: 16px; border: 4px solid var(--white); box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; z-index: 2; } .service-card:hover .sc-icon { background: var(--accent); color: var(--navy); transform: rotate(-8deg); } .service-card h3 { font-size: 1.1rem; margin-bottom: 10px; line-height: 1.55; } .service-card p { font-size: 0.92rem; flex: 1; } .service-card .sc-link { margin-top: 18px; color: var(--accent-dark); font-weight: 800; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition); } .service-card .sc-link:hover { color: var(--navy); } .service-card .sc-link i { transition: var(--transition); } .service-card:hover .sc-link i { transform: translateX(-5px); } body[dir="ltr"] .service-card:hover .sc-link i { transform: translateX(5px); } /* ---------- ERP Section ---------- */ .erp-section { background: linear-gradient(135deg, var(--navy-darker) 0%, var(--navy) 60%, var(--navy-mid) 100%); position: relative; overflow: hidden; } .erp-section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(236, 107, 23, 0.08) 1px, transparent 1px), radial-gradient(rgba(14, 165, 233, 0.06) 1px, transparent 1px); background-size: 30px 30px, 60px 60px; background-position: 0 0, 15px 15px; } .erp-section .section-head { position: relative; z-index: 1; } .erp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 1; } .erp-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 32px 26px; text-align: center; transition: var(--transition); } .erp-card:hover { background: rgba(236, 107, 23, 0.1); border-color: var(--accent); transform: translateY(-8px); box-shadow: 0 20px 50px -20px rgba(236, 107, 23, 0.25); } .erp-card .erp-icon { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: rgba(236, 107, 23, 0.15); color: var(--accent); font-size: 1.4rem; margin: 0 auto 18px; border: 2px solid rgba(236, 107, 23, 0.3); transition: var(--transition); } .erp-card:hover .erp-icon { background: var(--accent); color: var(--navy); border-color: var(--accent); transform: rotateY(180deg); } .erp-card h3 { font-size: 1.05rem; color: var(--white); margin-bottom: 10px; } .erp-card p { font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.7; } /* ---------- Partners ---------- */ .partners { background: var(--white); overflow: hidden; padding-bottom: 60px; } .partners .section-head { margin-bottom: 44px; } .partners-marquee { position: relative; overflow: hidden; padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); margin-bottom: 56px; } .partners-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: partnersMove 50s linear infinite; } body[dir="rtl"] .partners-track { animation-name: partnersMoveRtl; } .partners-marquee:hover .partners-track { animation-play-state: paused; } @keyframes partnersMove { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes partnersMoveRtl { from { transform: translateX(0); } to { transform: translateX(50%); } } .p-logo { flex: 0 0 auto; width: 160px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 14px; box-shadow: var(--shadow-sm); transition: var(--transition); cursor: default; } .p-logo:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-5px); } .p-logo i { font-size: 1.8rem; color: var(--navy); transition: var(--transition); } .p-logo:hover i { color: var(--accent); } .p-logo b { font-size: 0.82rem; font-weight: 800; color: var(--navy); } .p-text { font-weight: 800; font-size: 1.1rem; text-align: center; line-height: 1.3; transition: var(--transition); } .p-logo:hover .p-text { color: var(--accent-dark); } .p-text.oracle { color: #F80000; } .p-text.sap { color: #003973; } .p-text.google { color: #4285F4; } .p-text.cisco { color: #1BA0D7; } .p-text.ibm { color: #006699; } .p-text.odoo { color: #714B67; } .p-text.vmware { color: #607078; } .p-text.fortinet { color: #EE3124; } .p-text.palo { color: #FA582D; font-size: 0.85rem; } .p-text.dell { color: #007DB8; } /* Certifications strip */ .certs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 0; } .cert-badge { display: flex; align-items: center; gap: 14px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 22px; transition: var(--transition); min-width: 200px; } .cert-badge:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-md); } .cert-badge > i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--accent); font-size: 1.1rem; flex-shrink: 0; } .cert-badge div b { display: block; font-size: 0.9rem; color: var(--navy); margin-bottom: 2px; } .cert-badge div span { font-size: 0.8rem; color: var(--text-soft); font-weight: 700; } /* ---------- Process ---------- */ .process { background: linear-gradient(135deg, var(--navy-darker) 0%, var(--navy) 100%); position: relative; overflow: hidden; } .process::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(236, 107, 23, 0.06) 1px, transparent 1px); background-size: 28px 28px; } /* Connecting line between steps */ .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; z-index: 1; } .process-grid::before { content: ""; position: absolute; top: 68px; inset-inline: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent); opacity: 0.4; } body[dir="rtl"] .process-grid::before { inset-inline: 12%; } .process-step { padding: 40px 28px; text-align: center; position: relative; } .step-num { font-size: 3.5rem; font-weight: 800; color: rgba(236, 107, 23, 0.12); position: absolute; top: 16px; inset-inline-end: 22px; line-height: 1; pointer-events: none; font-family: "Almarai", sans-serif; } .step-icon { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: rgba(236, 107, 23, 0.12); border: 2px solid rgba(236, 107, 23, 0.35); color: var(--accent); font-size: 1.6rem; margin: 0 auto 22px; position: relative; z-index: 2; transition: var(--transition); } .process-step:hover .step-icon { background: var(--accent); color: var(--navy); border-color: var(--accent); transform: scale(1.08); } .process-step h3 { font-size: 1.1rem; color: var(--white); margin-bottom: 12px; position: relative; z-index: 2; } .process-step p { font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); line-height: 1.8; position: relative; z-index: 2; } .process-cta { text-align: center; margin-top: 54px; position: relative; z-index: 1; } /* ---------- Why us ---------- */ .why { background: linear-gradient(rgba(6, 15, 28, 0.92), rgba(13, 30, 56, 0.96)), url("https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80") center / cover fixed no-repeat; } .why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } /* At desktop, force max 5 cols but allow wrapping on medium */ @media (min-width: 1200px) { .why-grid { grid-template-columns: repeat(5, 1fr); } } .why-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 3px solid transparent; border-radius: var(--radius-lg); padding: 36px 20px 28px; text-align: center; transition: var(--transition); } .why-card:hover { background: rgba(236, 107, 23, 0.09); border-color: rgba(255, 255, 255, 0.15); border-bottom-color: var(--accent); transform: translateY(-8px); box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.35); } .why-card i { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: var(--accent); color: var(--navy); font-size: 1.3rem; transition: var(--transition); } .why-card:hover i { transform: rotateY(180deg); } .why-card h3 { font-size: 1rem; color: var(--white); margin-bottom: 8px; } .why-card p { font-size: 0.82rem; color: rgba(255,255,255,0.6); } .why-cta { text-align: center; margin-top: 48px; } /* ---------- Sectors ---------- */ .sectors { background: var(--white); } .sectors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .sector-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 20px; text-align: center; transition: var(--transition); position: relative; overflow: hidden; } .sector-card::before { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--teal)); transform: scaleX(0); transition: var(--transition); } .sector-card:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-7px); box-shadow: var(--shadow-md); } .sector-card:hover::before { transform: scaleX(1); } .sector-card i { font-size: 2.2rem; color: var(--accent-dark); margin-bottom: 16px; display: inline-block; transition: var(--transition); } .sector-card:hover i { color: var(--accent); transform: scale(1.15); } .sector-card h3 { font-size: 1rem; transition: var(--transition); } .sector-card:hover h3 { color: var(--white); } /* ---------- Projects ---------- */ .projects { background: var(--cream); } .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .project-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: var(--transition); } .project-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); } .project-img { position: relative; height: 240px; overflow: hidden; } .project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .project-card:hover .project-img img { transform: scale(1.08); } .project-tags { position: absolute; bottom: 14px; inset-inline-start: 14px; display: flex; gap: 8px; flex-wrap: wrap; } .project-tags span { background: var(--accent); color: var(--navy); font-size: 0.72rem; font-weight: 800; padding: 4px 12px; border-radius: 99px; } .project-body { padding: 26px 24px; } .project-body h3 { font-size: 1.08rem; margin-bottom: 10px; line-height: 1.55; } .project-body p { font-size: 0.9rem; margin-bottom: 20px; } .project-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 1px solid var(--line); padding-top: 16px; } .project-stats div { text-align: center; } .project-stats b { display: block; font-size: 1.3rem; color: var(--accent-dark); font-weight: 800; } .project-stats span { font-size: 0.78rem; color: var(--text-soft); font-weight: 700; } /* ---------- CTA Banner ---------- */ .cta-banner { background: linear-gradient(rgba(6, 15, 28, 0.94), rgba(6, 15, 28, 0.92)), url("https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=1920&q=80") center / cover no-repeat; text-align: center; } .cta-banner .badge-row { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 44px 0; } .cta-banner .cbadge { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 155px; transition: var(--transition); } .cta-banner .cbadge:hover { transform: translateY(-8px); } .cta-banner .cbadge i { width: 82px; height: 82px; display: grid; place-items: center; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: var(--accent); color: var(--navy); font-size: 1.6rem; transition: var(--transition); } .cta-banner .cbadge:hover i { background: var(--teal); color: var(--white); } .cta-banner .cbadge span { font-weight: 800; font-size: 0.95rem; color: var(--white); } /* ---------- Contact ---------- */ .contact { background: var(--cream); } .contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: stretch; } .contact-card { background: var(--white); border-radius: var(--radius-lg); padding: 44px 38px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); border-top: 4px solid var(--accent); } .contact-card h3 { font-size: 1.4rem; margin-bottom: 8px; } .contact-card > p { margin-bottom: 28px; font-size: 0.95rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-grid .full { grid-column: 1 / -1; } .field label { display: block; color: var(--navy); font-weight: 800; font-size: 0.85rem; margin-bottom: 7px; } .field input, .field select, .field textarea { width: 100%; border: 1.5px solid var(--line); background: var(--cream); border-radius: var(--radius); padding: 13px 16px; font-family: inherit; font-size: 0.92rem; color: var(--ink); transition: var(--transition); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(236, 107, 23, 0.15); background: var(--white); } .field textarea { resize: vertical; min-height: 110px; } .contact-form .btn { width: 100%; margin-top: 22px; } .contact-side { display: flex; flex-direction: column; gap: 18px; } .contact-info-list { display: grid; gap: 14px; } .ci-item { display: flex; align-items: center; gap: 16px; background: var(--white); border-radius: var(--radius-lg); padding: 18px 22px; border: 1px solid var(--line); transition: var(--transition); } .ci-item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-3px); } .ci-item i { width: 50px; height: 50px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--accent); font-size: 1.1rem; } .ci-item div b { color: var(--navy); display: block; font-size: 0.92rem; } .ci-item div a, .ci-item div span { color: var(--text); font-size: 0.9rem; direction: ltr; unicode-bidi: embed; } .ci-item div a:hover { color: var(--accent-dark); } .map-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); flex: 1; min-height: 280px; position: relative; } .map-wrap iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-darker); padding-top: 80px; position: relative; } .site-footer::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--teal), var(--accent-dark)); } .footer-grid { display: grid; grid-template-columns: 1.5fr 0.8fr 0.8fr 1fr; gap: 40px; padding-bottom: 54px; } .footer-brand img { height: 66px; width: auto; margin-bottom: 22px; display: block; } .footer-brand p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; max-width: 380px; line-height: 1.9; } .footer-social { display: flex; gap: 10px; margin-top: 22px; } .footer-social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.65); font-size: 0.82rem; transition: var(--transition); } .footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--navy); transform: translateY(-3px); } .footer-col h4 { color: var(--white); font-size: 1.06rem; margin-bottom: 22px; position: relative; padding-bottom: 11px; } .footer-col h4::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 42px; height: 3px; background: var(--accent); } .footer-col ul { display: grid; gap: 12px; } .footer-col ul a { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; line-height: 1.5; transition: var(--transition); } .footer-col ul a i { font-size: 0.65rem; color: var(--accent); } .footer-col ul a:hover { color: var(--accent); padding-inline-start: 6px; } .footer-contact li { display: flex; align-items: flex-start; gap: 11px; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .footer-contact li a { direction: ltr; unicode-bidi: embed; transition: var(--transition); } .footer-contact li a:hover { color: var(--accent); } .footer-contact i { color: var(--accent); width: 18px; margin-top: 4px; flex-shrink: 0; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 22px 0; text-align: center; color: rgba(255, 255, 255, 0.45); font-size: 0.85rem; } .footer-bottom b { color: var(--accent); } /* ---------- Floating buttons ---------- */ .float-btns { position: fixed; bottom: 26px; inset-inline-start: 26px; display: flex; flex-direction: column; gap: 12px; z-index: 998; } .float-btns a { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; font-size: 1.35rem; color: var(--white); box-shadow: var(--shadow-md); transition: var(--transition); position: relative; } .float-btns a:hover { transform: scale(1.12); } .float-btns .wa { background: #25d366; } .float-btns .wa::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.5); animation: waPing 2s ease-out infinite; } @keyframes waPing { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } } .float-btns .ph { background: var(--navy); } /* ---------- Back to top ---------- */ .back-top { position: fixed; bottom: 26px; inset-inline-end: 26px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent); color: var(--navy); font-size: 1.05rem; border: none; box-shadow: var(--shadow-md); z-index: 998; opacity: 0; visibility: hidden; transform: translateY(14px); transition: var(--transition); } .back-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .back-top:hover { background: var(--navy); color: var(--white); } /* ---------- Reveal animations ---------- */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.25, 0.8, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.12s; } .reveal-delay-2 { transition-delay: 0.24s; } .reveal-delay-3 { transition-delay: 0.36s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ---------- Mobile bottom action bar ---------- */ .mobile-cta { display: none; position: fixed; bottom: 0; inset-inline: 0; z-index: 997; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(13, 30, 56, 0.25); padding-bottom: env(safe-area-inset-bottom); } .mobile-cta .mc-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 9px; font-size: 0.72rem; font-weight: 800; color: var(--navy); transition: var(--transition); } .mobile-cta .mc-item i { font-size: 1.15rem; } .mobile-cta .mc-wa i { color: #1eb85a; } .mobile-cta .mc-quote { background: var(--navy); color: var(--white); } .mobile-cta .mc-quote i { color: var(--accent); } .mobile-cta .mc-item:active { background: var(--cream); } .mobile-cta .mc-quote:active { background: var(--navy-dark); } /* ---------- Nav backdrop (mobile menu) ---------- */ .nav-backdrop { position: fixed; inset: 0; background: rgba(6, 15, 28, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 998; opacity: 0; visibility: hidden; transition: var(--transition); } .nav-backdrop.show { opacity: 1; visibility: visible; } /* ---------- Keyboard focus (accessibility) ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; } /* ---------- Large screens (1440px+) ---------- */ @media (min-width: 1440px) { .container { width: min(1320px, 90%); } .hero { min-height: 92vh; } .hero-content { max-width: 720px; } .hero p.lead { font-size: 1.14rem; max-width: 640px; } section { padding: 115px 0; } .service-card .sc-media { height: 250px; } .about-media .img-main img { height: 500px; } .map-wrap { min-height: 340px; } } /* Hide desktop-only flourishes below 1200px */ @media (max-width: 1199px) { .social-rail { display: none; } .hero-frame { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; } .vision-tag { display: none; } .hero-tech-el { display: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .main-nav a { padding: 10px 10px; font-size: 0.85rem; } .vm-grid { grid-template-columns: 1fr 1fr; } .vm-grid .vm-card:last-child { grid-column: 1 / -1; max-width: 460px; margin-inline: auto; } } @media (max-width: 1024px) { .about .container { grid-template-columns: 1fr; gap: 50px; } .about-media { max-width: 560px; margin-inline: auto; } .services-grid { grid-template-columns: 1fr 1fr; } .erp-grid { grid-template-columns: repeat(3, 1fr); } .why-grid { grid-template-columns: repeat(3, 1fr); } .sectors-grid { grid-template-columns: repeat(4, 1fr); } .projects-grid { grid-template-columns: 1fr 1fr; } .stats .container { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2)::after { display: none; } .contact-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: repeat(2, 1fr); } .process-grid::before { display: none; } } @media (max-width: 768px) { body { font-size: 15px; line-height: 1.8; padding-bottom: 62px; -webkit-tap-highlight-color: transparent; } .mobile-cta { display: flex; } .reveal { transform: translateY(22px); transition-duration: 0.55s; } .reveal-delay-1, .reveal-delay-2, .reveal-delay-3 { transition-delay: 0s; } section { padding: 60px 0; } .section-head { margin-bottom: 38px; } .section-head h2 { font-size: 1.55rem; } .section-head p { font-size: 0.92rem; } .eyebrow { letter-spacing: 2px; font-size: 0.75rem; } /* Topbar */ .topbar { padding: 7px 0; } .topbar .container { justify-content: center; } .topbar-info { gap: 14px; font-size: 0.78rem; justify-content: center; } .topbar-info span { display: none; } .topbar-social { display: none; } /* Header */ .site-header .container { padding: 9px 0; } .brand img { height: 44px; } .lang-switch { padding: 7px 14px; font-size: 0.8rem; } .header-actions { gap: 8px; } .header-actions .btn { display: none; } .nav-toggle { display: grid; place-items: center; z-index: 1001; position: relative; } /* Mobile slide-in menu */ .main-nav { position: fixed; top: 0; inset-inline-end: -340px; width: min(320px, 85vw); height: 100vh; height: 100dvh; background: var(--white); padding: 90px 24px 30px; transition: var(--transition); box-shadow: var(--shadow-lg); z-index: 1000; border-inline-start: 4px solid var(--accent); overflow-y: auto; } .main-nav.open { inset-inline-end: 0; } .main-nav ul { flex-direction: column; align-items: stretch; gap: 4px; } .main-nav a { display: block; padding: 13px 16px; border-radius: var(--radius); font-size: 0.98rem; } .main-nav a::after { display: none; } .main-nav a:hover, .main-nav a.active { background: var(--cream); color: var(--accent-dark); } .has-dropdown { position: static; } .dropdown { position: static; box-shadow: none; border: none; border-radius: 0; border-top: none; border-inline-start: 2px solid var(--accent); margin-inline-start: 16px; padding: 6px 0; background: var(--cream); border-radius: var(--radius); opacity: 1; visibility: visible; transform: none; display: none; } .has-dropdown.open .dropdown { display: block; } .dropdown li a { padding: 9px 16px; font-size: 0.86rem; } /* Hero */ .hero { min-height: auto; } .hero-overlay { background: rgba(6, 12, 24, 0.80); } body[dir="ltr"] .hero-overlay { background: rgba(6, 12, 24, 0.80); } .hero .container { padding: 64px 0 72px; } .hero-content { max-width: 100%; text-align: center; } .hero-eyebrow { font-size: 0.72rem; letter-spacing: 1.5px; padding: 7px 14px; margin-bottom: 20px; } .hero h1 { font-size: clamp(1.7rem, 7.5vw, 2.2rem); line-height: 1.45; margin-bottom: 18px; } .hero-line { margin-inline: auto; margin-bottom: 20px; } .hero-line::after { display: none; } .hero p.lead { font-size: 0.95rem; margin-bottom: 28px; } .hero-cta { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 30px; } .hero-cta .btn { width: 100%; padding: 14px; } .hero-feats { flex-direction: column; gap: 10px; align-items: center; } .scroll-hint { display: none; } /* About */ .about .container { gap: 42px; } .about-media { padding-bottom: 70px; } .about-media .img-main { border-width: 4px; } .about-media .img-main img { height: 300px; } .about-media .img-sub { inset-inline-end: 0; width: 52%; border-width: 4px; } .about-media .img-sub img { height: 130px; } .about-media .exp-badge { padding: 14px 18px; bottom: 26px; } .about-media .exp-badge b { font-size: 1.6rem; } .about-body { text-align: center; } .about-body .eyebrow::after { left: 50%; transform: translateX(-50%); } .about-body p { font-size: 0.93rem; } .about-points { grid-template-columns: 1fr; text-align: start; margin: 22px 0 26px; } .about-body .btn { width: 100%; } /* Stats */ .stats { padding: 46px 0; } .stats .container { gap: 28px 12px; } .stat b { font-size: 1.9rem; } .stat > span { font-size: 0.82rem; } .stat:not(:last-child)::after { display: none; } /* Vision */ .vm-grid { grid-template-columns: 1fr; gap: 20px; } .vm-grid .vm-card:last-child { grid-column: auto; max-width: none; } .vm-card { padding: 32px 24px; } /* Services */ .services-grid { grid-template-columns: 1fr; gap: 20px; } .service-card .sc-media { height: 200px; } .service-card .sc-body { padding: 0 22px 24px; } /* ERP */ .erp-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .erp-card { padding: 22px 16px; } .erp-card .erp-icon { width: 56px; height: 56px; font-size: 1.2rem; } /* Partners */ .certs-row { gap: 12px; } .cert-badge { min-width: 160px; padding: 14px 16px; gap: 10px; } .cert-badge > i { width: 38px; height: 38px; font-size: 0.95rem; } /* Process */ .process-grid { grid-template-columns: 1fr 1fr; gap: 0; } .process-grid::before { display: none; } .process-step { padding: 30px 20px; } .step-num { font-size: 2.5rem; } .step-icon { width: 62px; height: 62px; font-size: 1.35rem; } .process-step h3 { font-size: 0.98rem; } .process-step p { font-size: 0.82rem; } .process-cta { margin-top: 36px; } .process-cta .btn { width: 100%; } /* About btns */ .about-btns { flex-direction: column; } .about-btns .btn { width: 100%; } /* Why */ .why { background-attachment: scroll; } .why-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .why-card { padding: 26px 12px; } .why-card i { width: 52px; height: 52px; font-size: 1.1rem; margin-bottom: 10px; } .why-card h3 { font-size: 0.9rem; } .why-card p { font-size: 0.78rem; } .why-cta { margin-top: 34px; } .why-cta .btn { width: 100%; } /* Sectors: horizontal scroll */ .sectors-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; margin-inline: -4%; padding-inline: 4%; scrollbar-width: none; } .sectors-grid::-webkit-scrollbar { display: none; } .sector-card { flex: 0 0 150px; scroll-snap-align: start; padding: 26px 12px; } .sector-card i { font-size: 1.7rem; margin-bottom: 10px; } .sector-card h3 { font-size: 0.88rem; } /* Projects */ .projects-grid { grid-template-columns: 1fr; gap: 20px; } .project-img { height: 210px; } /* CTA Banner */ .cta-banner .badge-row { gap: 18px 8px; margin: 32px 0; } .cta-banner .cbadge { min-width: calc(50% - 10px); gap: 10px; } .cta-banner .cbadge i { width: 68px; height: 68px; font-size: 1.3rem; } .cta-banner .btn { width: 100%; } /* Contact */ .contact-grid { grid-template-columns: 1fr; } .contact-card { padding: 30px 24px; } .form-grid { grid-template-columns: 1fr; } .map-wrap { min-height: 240px; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-brand p { max-width: 100%; } } @media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } .topbar-info { gap: 10px; } .topbar-info a:last-of-type { display: none; } .erp-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .certs-row { flex-direction: column; align-items: center; } .cert-badge { width: 100%; max-width: 340px; } .testi-grid { grid-template-columns: 1fr; } } /* ============================================================ ADDITIONS: Mega Menu, ERP Redesign, Preloader, Testimonials, etc. ============================================================ */ /* ---------- ERP Mega Menu ---------- */ .erp-mega { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(10px); width: 760px; background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 24px 64px -16px rgba(13, 30, 56, 0.28), 0 0 0 1px var(--line); border-top: 3px solid var(--accent); opacity: 0; visibility: hidden; transition: var(--transition); z-index: 200; padding: 26px 20px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; pointer-events: none; } .has-dropdown:hover .erp-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: all; } body[dir="rtl"] .erp-mega { left: auto; right: 50%; transform: translateX(50%) translateY(10px); } body[dir="rtl"] .has-dropdown:hover .erp-mega { transform: translateX(50%) translateY(0); } .mega-col { padding: 0 16px; border-inline-end: 1px solid var(--line); } .mega-col:last-child { border-inline-end: none; } .mega-label { font-size: 0.68rem; font-weight: 800; color: var(--accent-dark); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); } .mega-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 8px; border-radius: var(--radius); transition: var(--transition); text-decoration: none; margin-bottom: 2px; color: inherit; } .mega-item::after { display: none !important; } .mega-item:hover { background: var(--cream); } .mega-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(236, 107, 23, 0.12); color: var(--accent); display: grid; place-items: center; font-size: 0.9rem; flex-shrink: 0; transition: var(--transition); } .mega-item:hover .mega-icon { background: var(--accent); color: var(--navy); } .mega-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .mega-info b { font-size: 0.85rem; color: var(--navy); font-weight: 800; line-height: 1.35; display: block; } .mega-info > span { font-size: 0.75rem; color: var(--text-soft); display: block; } /* Override .main-nav a styles inside mega menu */ .erp-mega a { padding: 0 !important; font-weight: normal !important; font-size: inherit !important; } .erp-mega a:hover { color: inherit !important; } .erp-mega a.active::after, .erp-mega a::after { display: none !important; } /* ---------- NEW ERP Section ---------- */ /* Value props strip */ .erp-props { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; position: relative; z-index: 1; } .erp-prop { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 20px 18px; display: flex; align-items: flex-start; gap: 14px; transition: var(--transition); } .erp-prop:hover { border-color: rgba(236, 107, 23, 0.5); background: rgba(236, 107, 23, 0.07); } .erp-prop > i { width: 44px; height: 44px; background: var(--accent); color: var(--navy); border-radius: var(--radius); display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; } .erp-prop div { display: flex; flex-direction: column; gap: 3px; } .erp-prop b { color: var(--white); font-size: 0.9rem; display: block; font-weight: 800; } .erp-prop span { color: rgba(255, 255, 255, 0.55); font-size: 0.79rem; } /* Featured ERP cards grid */ .erp-systems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 28px; position: relative; z-index: 1; } .erp-sys-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--brand, var(--accent)); border-radius: var(--radius-lg); padding: 26px 24px; transition: var(--transition); display: flex; flex-direction: column; } .erp-sys-card:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.2); border-top-color: var(--brand, var(--accent)); transform: translateY(-7px); box-shadow: 0 26px 54px -18px rgba(0, 0, 0, 0.45); } .erp-sys-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; } .erp-sys-icon { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; transition: var(--transition); flex-shrink: 0; } /* Vendor logo inside card/menu icon */ .erp-logo-wrap { padding: 6px; overflow: hidden; } .erp-vendor-logo { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.1)); } .mega-icon.erp-logo-wrap { width: 36px; height: 36px; padding: 5px; border-radius: 8px; } .mega-icon.erp-logo-wrap .erp-vendor-logo { object-fit: contain; } /* Keep brand logos legible on hover (icon container turns accent) */ .mega-item:hover .mega-icon.erp-logo-wrap { background: var(--white) !important; } .mega-item:hover .mega-icon.erp-logo-wrap .erp-vendor-logo { filter: none; } .erp-sys-badge { background: var(--accent); color: var(--navy); font-size: 0.68rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; white-space: nowrap; align-self: flex-start; } .erp-badge-gov { background: rgba(0, 57, 115, 0.8); color: white; } .erp-sys-card h3 { font-size: 1.08rem; color: var(--white); margin-bottom: 10px; font-weight: 800; } .erp-sys-card > p { font-size: 0.87rem; color: rgba(255, 255, 255, 0.6); line-height: 1.75; margin-bottom: 18px; } .erp-sys-features { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; flex: 1; } .erp-sys-features li { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, 0.78); font-size: 0.83rem; font-weight: 700; } .erp-sys-features i { color: var(--brand, var(--accent)); font-size: 0.68rem; width: 16px; flex-shrink: 0; } .erp-sys-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--brand, var(--accent)); font-weight: 800; font-size: 0.88rem; transition: var(--transition); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 16px; margin-top: auto; } .erp-sys-btn:hover { gap: 13px; opacity: 0.85; } .erp-sys-btn i { font-size: 0.78rem; transition: var(--transition); } /* Specialty solutions strip */ .erp-specialty { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: 24px 26px; margin-bottom: 28px; position: relative; z-index: 1; } .specialty-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .specialty-header h3 { color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2.5px; font-weight: 800; } .specialty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .spec-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); transition: var(--transition); } .spec-item:hover { border-color: var(--accent); background: rgba(236, 107, 23, 0.06); } .spec-item > i { width: 42px; height: 42px; border-radius: 8px; background: rgba(236, 107, 23, 0.12); color: var(--accent); display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; } .spec-item div { display: flex; flex-direction: column; gap: 3px; } .spec-item b { color: var(--white); font-size: 0.88rem; font-weight: 800; } .spec-item > div > span { color: rgba(255, 255, 255, 0.5); font-size: 0.78rem; } /* ERP bottom CTA bar */ .erp-cta { background: linear-gradient(135deg, rgba(236, 107, 23, 0.1), rgba(14, 165, 233, 0.08)); border: 1px solid rgba(236, 107, 23, 0.22); border-radius: var(--radius-lg); padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 1; } .erp-cta-text h3 { color: var(--white); font-size: 1.15rem; margin-bottom: 6px; } .erp-cta-text p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .erp-cta-btns { display: flex; gap: 12px; flex-shrink: 0; } .erp-wa-btn { background: #25d366; color: var(--white); border: none; } .erp-wa-btn:hover { background: #1da851; transform: translateY(-3px); color: var(--white); } /* ---------- Preloader ---------- */ .preloader { position: fixed; inset: 0; background: var(--navy-darker); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; } .preloader.pl-out { opacity: 0; visibility: hidden; pointer-events: none; } .pl-inner { text-align: center; } .pl-inner > img { height: 72px; filter: brightness(0) invert(1); opacity: 0.92; margin-bottom: 30px; animation: plPulse 1.4s ease-in-out infinite; } @keyframes plPulse { 0%, 100% { opacity: 0.65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .pl-dots { display: flex; justify-content: center; gap: 10px; } .pl-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: plDot 1.1s ease-in-out infinite; } .pl-dots span:nth-child(2) { animation-delay: 0.18s; } .pl-dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes plDot { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-11px); opacity: 1; } } /* ---------- Testimonials ---------- */ .testimonials { background: var(--navy); position: relative; overflow: hidden; } .testimonials::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(236, 107, 23, 0.07) 1px, transparent 1px); background-size: 26px 26px; } .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; z-index: 1; } .testi-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 36px 30px 30px; transition: var(--transition); position: relative; overflow: hidden; } .testi-mark { position: absolute; top: 4px; inset-inline-end: 22px; font-size: 7.5rem; color: rgba(236, 107, 23, 0.1); font-family: Georgia, serif; line-height: 1; pointer-events: none; font-style: normal; } .testi-card:hover { background: rgba(236, 107, 23, 0.07); border-color: rgba(236, 107, 23, 0.28); transform: translateY(-8px); box-shadow: 0 32px 64px -22px rgba(0, 0, 0, 0.5); } .testi-stars { display: flex; gap: 4px; margin-bottom: 18px; } .testi-stars i { color: var(--accent); font-size: 0.92rem; } .testi-text { color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; line-height: 1.95; margin-bottom: 26px; position: relative; z-index: 1; } .testi-author { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .testi-av { width: 50px; height: 50px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: var(--navy); font-size: 1.15rem; flex-shrink: 0; border: 3px solid rgba(236, 107, 23, 0.35); } .testi-author strong { display: block; color: var(--white); font-size: 0.95rem; margin-bottom: 4px; font-weight: 800; } .testi-author > div > span { color: rgba(255, 255, 255, 0.48); font-size: 0.82rem; display: block; } /* ---------- Form Success Message ---------- */ .form-success { display: none; align-items: center; gap: 12px; background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; padding: 14px 18px; border-radius: var(--radius); font-weight: 700; font-size: 0.92rem; margin-top: 16px; } .form-success.show { display: flex; } .form-success i { color: #059669; font-size: 1.25rem; flex-shrink: 0; } /* ---------- Projects CTA ---------- */ .projects-cta { text-align: center; margin-top: 52px; } /* ---------- Responsive additions ---------- */ @media (max-width: 1199px) { .erp-mega { display: none; } } @media (max-width: 1100px) { .erp-props { grid-template-columns: 1fr 1fr; } .erp-systems-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1024px) { .testi-grid { grid-template-columns: 1fr 1fr; } .specialty-grid { grid-template-columns: 1fr 1fr; } .erp-cta { flex-direction: column; text-align: center; } .erp-cta-btns { width: 100%; justify-content: center; } } @media (max-width: 768px) { /* Mega menu: mobile accordion */ .erp-mega { display: none; position: static; width: 100%; border: none; border-radius: var(--radius); box-shadow: none; border-top: none; background: var(--cream); padding: 8px 0; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: all !important; grid-template-columns: 1fr; } .has-dropdown.open .erp-mega { display: block !important; } .mega-col { padding: 0; border-inline-end: none; } .mega-label { padding: 8px 16px 6px; margin-bottom: 0; background: var(--cream-2); border-bottom: none; } .mega-item { padding: 9px 16px; } .mega-icon { display: none; } .mega-info b { font-size: 0.88rem; } .mega-info > span { display: none; } /* ERP section mobile */ .erp-props { grid-template-columns: 1fr 1fr; gap: 10px; } .erp-prop { padding: 16px 14px; } .erp-systems-grid { grid-template-columns: 1fr; gap: 16px; } .erp-sys-card { padding: 22px 20px; } .erp-sys-icon { width: 48px; height: 48px; font-size: 1.2rem; } .specialty-grid { grid-template-columns: 1fr; gap: 10px; } .erp-specialty { padding: 20px 18px; } .erp-cta { padding: 24px 20px; } .erp-cta-btns { flex-direction: column; } .erp-cta-btns .btn { width: 100%; } /* Testimonials */ .testi-grid { grid-template-columns: 1fr; gap: 20px; } .testi-card { padding: 28px 22px 24px; } .testi-mark { font-size: 5rem; } /* Other */ .float-btns { display: none; } .projects-cta .btn { width: 100%; } } @media (max-width: 480px) { .erp-props { grid-template-columns: 1fr; } .testi-grid { grid-template-columns: 1fr; } } /* ============================================================ Sub-Page Styles (ERP detail pages / Service pages) ============================================================ */ /* Page Hero */ .page-hero { background: linear-gradient(135deg, var(--navy-darker) 0%, var(--navy) 60%, var(--navy-mid) 100%); padding: 140px 0 80px; position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(236, 107, 23, 0.08) 1px, transparent 1px); background-size: 28px 28px; } .page-hero-inner { position: relative; z-index: 1; } .breadcrumb { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.55); font-size: 0.82rem; margin-bottom: 22px; flex-wrap: wrap; } .breadcrumb a { color: rgba(255,255,255,0.65); transition: var(--transition); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .sep { color: rgba(255,255,255,0.25); } .ph-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .ph-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; font-size: 1.7rem; flex-shrink: 0; } .ph-icon.erp-logo-wrap { padding: 7px; } .page-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); color: var(--white); margin-bottom: 16px; line-height: 1.3; } .page-hero p.lead { color: rgba(255,255,255,0.78); font-size: 1.05rem; max-width: 700px; line-height: 1.95; } .ph-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .ph-tag { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.72); padding: 6px 16px; border-radius: 30px; font-size: 0.8rem; } .ph-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; } /* Sub-page content sections */ .pg-section { padding: 80px 0; } .pg-section.pg-alt { background: var(--cream); } .pg-section.pg-dark { background: linear-gradient(135deg, var(--navy-darker), var(--navy)); } .pg-section .section-head { margin-bottom: 50px; } /* Services Grid */ .pg-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .pg-service-card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); padding: 30px 24px 26px; transition: var(--transition); } .pg-service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-top-color: var(--accent-dark); } .psc-icon { width: 56px; height: 56px; background: rgba(236,107,23,0.1); border-radius: 12px; display: grid; place-items: center; color: var(--accent); font-size: 1.35rem; margin-bottom: 16px; } .pg-service-card h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: 10px; } .pg-service-card p { font-size: 0.87rem; color: var(--text); line-height: 1.82; } /* Industries Grid */ .pg-industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .pg-industry-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 20px; text-align: center; transition: var(--transition); } .pg-industry-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: var(--shadow-md); } .pi-icon { width: 58px; height: 58px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); border-radius: 50%; display: grid; place-items: center; color: var(--white); font-size: 1.35rem; margin: 0 auto 14px; } .pg-industry-card h3 { font-size: 0.98rem; color: var(--navy); margin-bottom: 7px; } .pg-industry-card p { font-size: 0.83rem; color: var(--text); line-height: 1.75; } /* Process Steps */ .pg-process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: step; } .pg-step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 16px 24px; text-align: center; position: relative; margin-top: 18px; transition: var(--transition); counter-increment: step; } .pg-step::before { content: counter(step); position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; background: var(--accent); color: var(--navy); font-weight: 800; font-size: 0.88rem; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(236,107,23,0.4); } .pg-step:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } .pg-step i { font-size: 1.7rem; color: var(--accent); margin-bottom: 12px; margin-top: 6px; } .pg-step h3 { font-size: 0.9rem; color: var(--navy); margin-bottom: 7px; } .pg-step p { font-size: 0.79rem; color: var(--text); line-height: 1.7; } /* Page CTA section */ .pg-cta-section { background: linear-gradient(135deg, var(--navy-darker), var(--navy)); padding: 70px 0; text-align: center; } .pg-cta-section h2 { color: var(--white); margin-bottom: 14px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); } .pg-cta-section p { color: rgba(255,255,255,0.72); margin-bottom: 34px; max-width: 600px; margin-inline: auto; } .pg-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* Sub-page responsive */ @media (max-width: 1024px) { .pg-services-grid { grid-template-columns: repeat(2, 1fr); } .pg-industries-grid { grid-template-columns: repeat(2, 1fr); } .pg-process-steps { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .pg-services-grid { grid-template-columns: 1fr; } .pg-industries-grid { grid-template-columns: 1fr 1fr; } .pg-process-steps { grid-template-columns: 1fr 1fr; } .page-hero { padding: 120px 0 60px; } .ph-cta { flex-direction: column; } } /* ============================================================ TYPOGRAPHY SYSTEM — Plus Jakarta Sans (EN) / Almarai (AR) Applied globally to every element that needs font-family ============================================================ */ /* ── Topbar ─────────────────────────────────── */ body[dir="ltr"] .topbar-info, body[dir="ltr"] .topbar-info a { font-family: var(--font-en); font-size: 0.8rem; } /* ── Nav Dropdown ───────────────────────────── */ body[dir="ltr"] .dropdown li a { font-family: var(--font-en); font-weight: 500; font-size: 0.85rem; } body[dir="ltr"] .mega-menu { font-family: var(--font-en); } body[dir="ltr"] .mega-col-title { font-family: var(--font-en); font-weight: 700; font-size: 0.7rem; letter-spacing: 3px; } body[dir="ltr"] .mega-item-name { font-family: var(--font-en); font-weight: 600; font-size: 0.88rem; } body[dir="ltr"] .mega-item-desc { font-family: var(--font-en); font-size: 0.76rem; } /* ── Stats section ──────────────────────────── */ body[dir="ltr"] .stat b { font-family: var(--font-en); font-weight: 800; letter-spacing: -0.04em; } body[dir="ltr"] .stat > span { font-family: var(--font-en); font-weight: 500; font-size: 0.88rem; } /* ── About section ──────────────────────────── */ body[dir="ltr"] .about-points li { font-family: var(--font-en); font-weight: 600; font-size: 0.87rem; } /* ── Vision / Mission cards ─────────────────── */ body[dir="ltr"] .vm-card h3 { font-family: var(--font-en); font-weight: 700; letter-spacing: -0.02em; } body[dir="ltr"] .vm-card p { font-family: var(--font-en); font-size: 0.93rem; line-height: 1.78; } /* ── Service cards ──────────────────────────── */ body[dir="ltr"] .service-card h3 { font-family: var(--font-en); font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; } body[dir="ltr"] .service-card p, body[dir="ltr"] .service-card .sc-link { font-family: var(--font-en); font-size: 0.88rem; } /* ── ERP cards ──────────────────────────────── */ body[dir="ltr"] .erp-card h3 { font-family: var(--font-en); font-weight: 700; letter-spacing: -0.02em; } body[dir="ltr"] .erp-card p, body[dir="ltr"] .erp-card li { font-family: var(--font-en); font-size: 0.86rem; line-height: 1.7; } body[dir="ltr"] .erp-feat-badge { font-family: var(--font-en); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; } /* ── Process steps ──────────────────────────── */ body[dir="ltr"] .step-label { font-family: var(--font-en); font-weight: 700; letter-spacing: -0.01em; } body[dir="ltr"] .step-desc { font-family: var(--font-en); font-size: 0.88rem; } /* ── Partners / Certs ───────────────────────── */ body[dir="ltr"] .p-logo b { font-family: var(--font-en); font-weight: 700; } body[dir="ltr"] .cert-badge div b { font-family: var(--font-en); font-weight: 700; font-size: 0.88rem; } body[dir="ltr"] .cert-badge div span { font-family: var(--font-en); font-size: 0.76rem; } /* ── Why Us cards ───────────────────────────── */ body[dir="ltr"] .why-card h3 { font-family: var(--font-en); font-weight: 700; font-size: 0.96rem; letter-spacing: -0.01em; } body[dir="ltr"] .why-card p { font-family: var(--font-en); font-size: 0.8rem; } /* ── Sectors ────────────────────────────────── */ body[dir="ltr"] .sector-card h3 { font-family: var(--font-en); font-weight: 600; font-size: 0.92rem; } /* ── Testimonials ───────────────────────────── */ body[dir="ltr"] .tst-text { font-family: var(--font-en); font-size: 0.96rem; line-height: 1.8; } body[dir="ltr"] .tst-name { font-family: var(--font-en); font-weight: 700; font-size: 0.9rem; } body[dir="ltr"] .tst-role { font-family: var(--font-en); font-size: 0.78rem; } /* ── Contact form ───────────────────────────── */ body[dir="ltr"] .contact-form input, body[dir="ltr"] .contact-form textarea, body[dir="ltr"] .contact-form select, body[dir="ltr"] .contact-form label { font-family: var(--font-en); font-size: 0.9rem; } /* ── Footer ─────────────────────────────────── */ body[dir="ltr"] .footer-brand p { font-family: var(--font-en); font-size: 0.88rem; line-height: 1.75; } body[dir="ltr"] .footer-col h4 { font-family: var(--font-en); font-weight: 700; letter-spacing: -0.01em; } body[dir="ltr"] .footer-col li, body[dir="ltr"] .footer-col a { font-family: var(--font-en); font-size: 0.88rem; } body[dir="ltr"] .footer-bottom { font-family: var(--font-en); font-size: 0.82rem; } /* ── Sub-pages ──────────────────────────────── */ body[dir="ltr"] .page-hero h1 { font-family: var(--font-en); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; } body[dir="ltr"] .page-hero p.lead { font-family: var(--font-en); font-size: 1.02rem; line-height: 1.78; } body[dir="ltr"] .ph-badge { font-family: var(--font-en); font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px; } body[dir="ltr"] .pg-service-card h3 { font-family: var(--font-en); font-weight: 700; letter-spacing: -0.02em; } body[dir="ltr"] .pg-service-card p { font-family: var(--font-en); font-size: 0.88rem; line-height: 1.75; } body[dir="ltr"] .pg-industry-card { font-family: var(--font-en); font-size: 0.88rem; font-weight: 600; } body[dir="ltr"] .pg-step h3 { font-family: var(--font-en); font-weight: 700; font-size: 0.9rem; } body[dir="ltr"] .pg-step p { font-family: var(--font-en); font-size: 0.8rem; } body[dir="ltr"] .pg-cta-section h2 { font-family: var(--font-en); font-weight: 800; letter-spacing: -0.03em; } body[dir="ltr"] .pg-cta-section p { font-family: var(--font-en); font-size: 0.96rem; } /* ── ERP Bar items ──────────────────────────── */ body[dir="ltr"] .erp-bar-item { font-family: var(--font-en); font-size: 0.88rem; font-weight: 600; } body[dir="ltr"] .erp-spec-row { font-family: var(--font-en); font-size: 0.88rem; } /* ── Mobile nav ─────────────────────────────── */ body[dir="ltr"] .mobile-nav a { font-family: var(--font-en); font-weight: 600; font-size: 0.9rem; } body[dir="ltr"] .bottom-bar-item { font-family: var(--font-en); font-size: 0.62rem; font-weight: 600; } /* ── Arabic font smoothing ──────────────────── */ body[dir="rtl"] * { text-rendering: optimizeLegibility; } body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3, body[dir="rtl"] h4 { font-weight: 800; letter-spacing: 0; } body[dir="rtl"] p, body[dir="rtl"] li, body[dir="rtl"] span { font-weight: 400; } body[dir="rtl"] strong, body[dir="rtl"] b { font-weight: 700; } /* ============================================================ ADDITIONS: Services mega menu, Compliance strip, FAQ, SEO blocks ============================================================ */ /* ---------- Services mega menu (wider than ERP) ---------- */ .services-mega { width: 880px; } .services-mega .mega-info > span { display: none; } .services-mega .mega-item { align-items: center; padding: 8px 8px; } .services-mega .mega-info b { font-size: 0.83rem; } /* ---------- Compliance & standards strip ---------- */ .compliance-strip { background: var(--navy); padding: 40px 0; position: relative; overflow: hidden; } .compliance-strip::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 50%, rgba(236, 107, 23, 0.14), transparent 55%); pointer-events: none; } .compliance-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .compliance-title { color: var(--white); max-width: 320px; } .compliance-title .eyebrow { color: var(--accent-light); } .compliance-title h3 { color: var(--white); font-size: 1.15rem; font-weight: 800; line-height: 1.5; margin-top: 6px; } /* Safety net: headings inside dark sections must always be light. (Without this they inherit the global navy heading colour and disappear.) */ .compliance-strip h1, .compliance-strip h2, .compliance-strip h3, .compliance-strip h4, .testimonials h1, .testimonials h2, .testimonials h3, .testimonials h4, .cta-banner h1, .cta-banner h2, .cta-banner h3, .cta-banner h4, .erp-cta h1, .erp-cta h2, .erp-cta h3, .erp-cta h4 { color: var(--white); } .compliance-badges { display: flex; flex-wrap: wrap; gap: 12px; } .compliance-badge { display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 50px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #dbe4f0; font-size: 0.82rem; font-weight: 700; transition: var(--transition); } .compliance-badge i { color: var(--accent); font-size: 0.9rem; } .compliance-badge:hover { background: rgba(236, 107, 23, 0.14); border-color: rgba(236, 107, 23, 0.45); color: var(--white); transform: translateY(-3px); } /* ---------- FAQ ---------- */ .faq { background: var(--cream); } .faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); } .faq-item.open { border-color: rgba(236, 107, 23, 0.5); box-shadow: 0 18px 44px -20px rgba(13, 30, 56, 0.28); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; background: none; border: 0; cursor: pointer; text-align: start; font-family: inherit; font-size: 1.02rem; font-weight: 700; color: var(--navy); line-height: 1.6; } .faq-q i { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--cream-2); color: var(--accent-dark); display: grid; place-items: center; font-size: 0.78rem; transition: var(--transition); } .faq-item.open .faq-q i { background: var(--accent); color: var(--white); transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 26px; } .faq-item.open .faq-a { max-height: 520px; padding: 0 26px 24px; } .faq-a p { color: var(--text-soft); line-height: 1.85; font-size: 0.95rem; } /* ---------- Visually-hidden (SEO helpers) ---------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .services-mega { width: 720px; } } @media (max-width: 768px) { .services-mega { width: 100%; } .compliance-inner { flex-direction: column; align-items: flex-start; } .compliance-title { max-width: 100%; } .faq-q { padding: 18px 18px; font-size: 0.95rem; } .faq-a { padding: 0 18px; } .faq-item.open .faq-a { padding: 0 18px 20px; } } /* ---------- Additional specialty services (chips) ---------- */ .spec-section { background: var(--cream); } .spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .spec-chip { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: var(--transition); } .spec-chip:hover { border-color: rgba(236, 107, 23, 0.5); box-shadow: 0 16px 36px -22px rgba(13, 30, 56, 0.4); transform: translateY(-4px); } .spec-chip i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: rgba(236, 107, 23, 0.1); color: var(--accent); display: grid; place-items: center; font-size: 1rem; transition: var(--transition); } .spec-chip:hover i { background: var(--accent); color: var(--white); } .spec-chip span { font-size: 0.88rem; font-weight: 700; color: var(--navy); line-height: 1.4; } @media (max-width: 1024px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr; } } /* ---------- Unified mega-menu icon treatment ---------- Every icon in both mega menus shares one container size, radius, glyph size and alignment. Brand tint comes from the inline style. */ .erp-mega .mega-icon, .services-mega .mega-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 9px; display: grid; place-items: center; padding: 0; font-size: 0.92rem; line-height: 1; flex-shrink: 0; } .erp-mega .mega-icon i, .services-mega .mega-icon i { font-size: 0.92rem; line-height: 1; display: block; } /* Logo-based icons keep the same box, only padded so the mark fits */ .erp-mega .mega-icon.erp-logo-wrap, .services-mega .mega-icon.erp-logo-wrap { width: 36px; height: 36px; min-width: 36px; padding: 5px; } /* Align every row to a single icon column */ .erp-mega .mega-item, .services-mega .mega-item { align-items: center; gap: 12px; min-height: 52px; } /* ============================================================ ADDITIONS: Case studies, Team, Trust layer ============================================================ */ /* ---------- Case studies (detailed) ---------- */ .case-list { display: flex; flex-direction: column; gap: 28px; } .case-card { display: grid; grid-template-columns: 400px 1fr; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); } .case-card:hover { box-shadow: 0 28px 64px -30px rgba(13, 30, 56, 0.42); transform: translateY(-4px); border-color: rgba(236, 107, 23, 0.35); } .case-media { position: relative; min-height: 340px; background: var(--navy); } .case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .case-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(9, 22, 40, 0.72), rgba(9, 22, 40, 0.12)); } .case-tags { position: absolute; top: 16px; inset-inline-start: 16px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 2; } .case-tags span { background: rgba(9, 22, 40, 0.82); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 5px 13px; border-radius: 50px; letter-spacing: 0.4px; backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.14); } .case-media .case-sector { position: absolute; bottom: 16px; inset-inline-start: 16px; z-index: 2; display: flex; align-items: center; gap: 9px; color: #fff; } .case-media .case-sector i { color: var(--accent); font-size: 0.95rem; } .case-media .case-sector b { font-size: 0.95rem; font-weight: 800; } .case-body { padding: 30px 34px; } .case-body h3 { font-size: 1.3rem; color: var(--navy); margin-bottom: 18px; line-height: 1.45; } .case-block { margin-bottom: 13px; } .case-block > b { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.8px; color: var(--accent-dark); font-weight: 800; margin-bottom: 5px; } .case-block p { font-size: 0.92rem; color: var(--text-soft); line-height: 1.78; } .case-metrics { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); } .case-metrics > div b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1.1; } .case-metrics > div span { font-size: 0.76rem; color: var(--text-soft); font-weight: 600; } /* ---------- Team ---------- */ .team { background: var(--white); } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .team-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 22px 24px; text-align: center; transition: var(--transition); } .team-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px -28px rgba(13, 30, 56, 0.42); border-color: rgba(236, 107, 23, 0.42); } .team-avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: var(--navy); color: var(--accent); font-size: 1.55rem; font-weight: 800; letter-spacing: 1px; border: 3px solid rgba(236, 107, 23, 0.25); } .team-card h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: 5px; } .team-role { font-size: 0.84rem; color: var(--accent-dark); font-weight: 700; margin-bottom: 12px; } .team-creds { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; } .team-creds span { font-size: 0.67rem; font-weight: 700; padding: 4px 11px; border-radius: 50px; background: rgba(13, 30, 56, 0.07); color: var(--navy); } /* ---------- Team stats strip ---------- */ .team-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 42px; } .team-stat { text-align: center; padding: 24px 14px; background: var(--navy); border-radius: var(--radius-lg); } .team-stat b { display: block; font-size: 1.95rem; font-weight: 800; color: var(--accent); line-height: 1; } .team-stat span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); font-weight: 600; margin-top: 7px; display: block; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .case-card { grid-template-columns: 320px 1fr; } .case-body { padding: 26px 26px; } } @media (max-width: 900px) { .case-card { grid-template-columns: 1fr; } .case-media { min-height: 230px; } .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } .team-stats { grid-template-columns: repeat(2, 1fr); } .case-metrics { gap: 22px; } .case-body { padding: 22px 18px; } } /* ---------- Vision 2030 logo badges ---------- */ .compliance-badge-v2030 { padding: 8px 16px; background: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.4); } .compliance-badge-v2030 img { height: 34px; width: auto; display: block; } .compliance-badge-v2030:hover { background: #fff; border-color: var(--accent); } /* Footer vision mark — sits directly on the navy footer so the mark reads clearly */ .footer-v2030 { display: inline-block; margin-top: 22px; padding: 0; background: none; line-height: 0; } .footer-v2030 img { height: 62px; width: auto; display: block; filter: brightness(1.12) contrast(1.08); } @media (max-width: 768px) { .vision-tag { bottom: 22px; inset-inline-end: 16px; padding: 9px 14px; gap: 10px; } .vision-tag img { height: 38px; } .vision-tag .vt-sep { height: 28px; } .vision-tag span { font-size: 0.66rem; max-width: 86px; } .compliance-badge-v2030 img { height: 28px; } .certs-row { grid-template-columns: 1fr; gap: 12px; } .cert-badge { min-width: 0; padding: 14px 16px; gap: 10px; } .footer-v2030 img { height: 50px; } } /* ============================================================ ADDITIONS: Insights (articles) + article typography ============================================================ */ /* ---------- Article body ---------- */ .article-body { max-width: 820px; margin: 0 auto; } .art-section { margin-bottom: 38px; } .art-section h2 { font-size: 1.35rem; color: var(--navy); margin-bottom: 12px; padding-inline-start: 16px; border-inline-start: 4px solid var(--accent); line-height: 1.5; } .art-section p { font-size: 1.02rem; color: var(--text-soft); line-height: 2; } /* ---------- Related services ---------- */ .art-related { max-width: 820px; margin: 46px auto 0; padding-top: 30px; border-top: 1px solid var(--line); } .art-related h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 16px; } .art-related-list { display: flex; flex-wrap: wrap; gap: 12px; } .art-related-link { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; background: var(--cream); border: 1px solid var(--line); border-radius: 50px; font-size: 0.9rem; font-weight: 700; color: var(--navy); text-decoration: none; transition: var(--transition); } .art-related-link i { color: var(--accent); font-size: 0.8rem; } .art-related-link:hover { background: var(--accent); color: var(--white); border-color: var(--accent); } .art-related-link:hover i { color: var(--white); } /* ---------- Insights grid (homepage) ---------- */ .insights { background: var(--cream); } .insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .insight-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; transition: var(--transition); } .insight-card:hover { transform: translateY(-6px); box-shadow: 0 26px 58px -30px rgba(13, 30, 56, 0.42); border-color: rgba(236, 107, 23, 0.4); } .insight-top { padding: 24px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .insight-cat { font-size: 0.68rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark); } .insight-read { font-size: 0.7rem; color: var(--text-soft); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .insight-card h3 { font-size: 1.05rem; color: var(--navy); line-height: 1.55; margin: 12px 24px 10px; flex: 1; } .insight-card p { font-size: 0.88rem; color: var(--text-soft); line-height: 1.75; margin: 0 24px 20px; } .insight-more { display: flex; align-items: center; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--line); font-size: 0.82rem; font-weight: 800; color: var(--accent-dark); background: rgba(236, 107, 23, 0.04); } .insight-card:hover .insight-more { background: var(--accent); color: var(--white); } .insight-card:hover .insight-more i { color: var(--white); } @media (max-width: 1024px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .insights-grid { grid-template-columns: 1fr; } .art-section h2 { font-size: 1.15rem; } .art-section p { font-size: 0.96rem; } } /* ============================================================ ADDITIONS: Service-page depth (deliverables + engagement models) ============================================================ */ /* ---------- Deliverables list ---------- */ .deliver-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 940px; margin: 0 auto; } .deliver-list li { display: flex; align-items: flex-start; gap: 13px; padding: 17px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: var(--transition); } .deliver-list li:hover { border-color: rgba(236, 107, 23, 0.45); box-shadow: 0 16px 36px -24px rgba(13, 30, 56, 0.4); transform: translateY(-3px); } .deliver-list i { color: var(--accent); font-size: 0.95rem; margin-top: 3px; flex-shrink: 0; } .deliver-list span { font-size: 0.93rem; font-weight: 600; color: var(--navy); line-height: 1.6; } /* ---------- Engagement models ---------- */ .eng-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .eng-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; text-align: center; transition: var(--transition); position: relative; overflow: hidden; } .eng-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transition: var(--transition); } .eng-card:hover::before { transform: scaleX(1); } .eng-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px -28px rgba(13, 30, 56, 0.42); border-color: rgba(236, 107, 23, 0.35); } .eng-icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px; display: grid; place-items: center; background: rgba(236, 107, 23, 0.1); color: var(--accent); font-size: 1.25rem; transition: var(--transition); } .eng-card:hover .eng-icon { background: var(--accent); color: var(--white); } .eng-card h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: 10px; } .eng-card p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.75; } @media (max-width: 900px) { .deliver-list { grid-template-columns: 1fr; } .eng-grid { grid-template-columns: 1fr; } } /* ---------- Sector pages ---------- */ .challenge-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 940px; margin: 0 auto; } .challenge-list li { display: flex; align-items: flex-start; gap: 13px; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: var(--radius); font-size: 0.93rem; font-weight: 600; color: var(--navy); line-height: 1.6; } .challenge-list i { color: var(--accent); margin-top: 3px; flex-shrink: 0; } .sector-outcomes { background: var(--navy); padding: 56px 0; } .sector-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sector-metric { text-align: center; } .sector-metric b { display: block; font-size: 2.3rem; font-weight: 800; color: var(--accent); line-height: 1; } .sector-metric span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.78); font-weight: 600; margin-top: 8px; display: block; } @media (max-width: 900px) { .challenge-list { grid-template-columns: 1fr; } .sector-metrics { grid-template-columns: 1fr; gap: 28px; } } /* ---------- Linked sector cards ---------- */ .sector-card-link { text-decoration: none; cursor: pointer; } .sector-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.72rem; font-weight: 800; color: var(--accent); opacity: 0; max-height: 0; overflow: hidden; transition: var(--transition); } .sector-card-link:hover .sector-more { opacity: 1; max-height: 30px; } .sector-card-link:hover { border-color: rgba(236, 107, 23, 0.5); } /* ============================================================ UX / UI POLISH ============================================================ */ /* 1) Anchor navigation must clear the sticky header */ section[id], [id].section-anchor { scroll-margin-top: 96px; } /* 2) Visible focus ring for keyboard users (accessibility) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .faq-q:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* 3) Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* 4) Consistent card hover elevation */ .service-card, .erp-sys-card, .pg-service-card, .insight-card, .team-card, .case-card, .eng-card, .spec-chip { will-change: transform; } /* 5) Navigation: keep 9 items comfortable on medium screens */ @media (max-width: 1200px) { .main-nav a { padding: 10px 9px; font-size: 0.83rem; } } @media (max-width: 1024px) { .main-nav a { padding: 10px 8px; font-size: 0.8rem; } } /* 6) Tighter, more consistent vertical rhythm on small screens */ @media (max-width: 768px) { section { padding-top: 56px !important; padding-bottom: 56px !important; } .section-head { margin-bottom: 36px; } .page-hero { padding: 110px 0 60px; } .hero { padding-top: 110px; } } /* 7) Better tap targets on mobile */ @media (max-width: 768px) { .sector-card, .spec-chip, .deliver-list li, .challenge-list li { min-height: 56px; } .faq-q { min-height: 56px; } } /* 8) Text selection in brand colour */ ::selection { background: var(--accent); color: #fff; } /* 9) Prevent long unbroken words from overflowing (Arabic/English mix) */ h1, h2, h3, h4, p, li, span { overflow-wrap: break-word; } /* 10) Images never overflow their container */ img { max-width: 100%; height: auto; } .case-media img, .about-media img, .sc-media img, .project-img img { height: 100%; } /* ---------- Certifications grid responsiveness ---------- */ @media (max-width: 1024px) { .certs-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .certs-row { grid-template-columns: 1fr; } } /* ============================================================ RESPONSIVE SAFETY NET ============================================================ */ html { overflow-x: hidden; } /* Nothing may exceed the viewport width */ img, svg, video, iframe, table { max-width: 100%; } /* Long words / URLs in any language */ .footer-col a, .insight-card h3, .case-body h3, .art-section h2, .art-section p { overflow-wrap: anywhere; word-break: break-word; } /* Stacked metrics never overflow on narrow screens */ @media (max-width: 420px) { .case-metrics { gap: 16px; } .case-metrics > div b { font-size: 1.3rem; } .team-stats { grid-template-columns: 1fr 1fr; gap: 12px; } .team-stat b { font-size: 1.5rem; } .deliver-list li, .challenge-list li { padding: 15px 16px; } .eng-card { padding: 24px 20px; } .case-body { padding: 20px 16px; } .article-body { padding-inline: 2px; } .art-section h2 { font-size: 1.05rem; padding-inline-start: 12px; } } /* Touch devices: always show the "learn more" affordance on sector cards */ @media (hover: none) { .sector-more { opacity: 1; max-height: 30px; } } /* Consistent section rhythm on tablets */ @media (max-width: 1024px) { section { padding-top: 64px !important; padding-bottom: 64px !important; } } /* ============================================================ PROFILE & BROCHURE PAGES ============================================================ */ .brochure-sec { background: var(--cream); padding: 70px 0; } .brochure-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px; align-items: start; } /* ---------- Profile page frames ---------- */ .profile-pages { display: flex; flex-direction: column; gap: 26px; } .brochure-frame { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; box-shadow: 0 18px 44px -26px rgba(13, 30, 56, 0.35); position: relative; margin: 0; transition: var(--transition); } .brochure-frame::before { content: ""; position: absolute; top: 0; inset-inline: 44px; height: 4px; background: var(--accent); border-radius: 0 0 4px 4px; } .brochure-frame:hover { box-shadow: 0 26px 60px -26px rgba(13, 30, 56, 0.45); transform: translateY(-3px); } .brochure-frame img { width: 100%; height: auto; display: block; border-radius: var(--radius); background: #fff; } .brochure-frame figcaption { text-align: center; padding: 12px 8px 2px; font-size: 0.78rem; font-weight: 700; color: var(--text-soft); } .brochure-frame .pg-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 50px; background: var(--navy); color: var(--accent); font-weight: 800; font-size: 0.74rem; margin-inline-end: 4px; } /* ---------- Sticky sidebar ---------- */ .brochure-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 18px; } .qr-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; text-align: center; box-shadow: 0 14px 36px -24px rgba(13, 30, 56, 0.3); } .qr-card h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 8px; } .qr-card p { font-size: 0.84rem; color: var(--text-soft); line-height: 1.7; margin-bottom: 18px; } .qr-box { display: inline-block; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .qr-box img { width: 178px; height: 178px; display: block; } .dl-wide, .wa-wide { width: 100%; justify-content: center; } .contact-info-list { display: flex; flex-direction: column; gap: 12px; } .ci-item { display: flex; align-items: center; gap: 15px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px 18px; transition: var(--transition); } .ci-item:hover { border-color: rgba(236, 107, 23, 0.45); transform: translateY(-3px); } .ci-item > i { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--accent); font-size: 1rem; } .ci-item div { min-width: 0; } .ci-item div b { display: block; color: var(--navy); font-size: 0.86rem; margin-bottom: 2px; } .ci-item div a, .ci-item div span { color: var(--text-soft); font-size: 0.84rem; font-weight: 600; line-height: 1.5; word-break: break-word; } .ci-item div a:hover { color: var(--accent-dark); } /* ---------- Brochure body ---------- */ .bro-body { display: flex; flex-direction: column; gap: 24px; } .bro-block { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: 0 14px 36px -28px rgba(13, 30, 56, 0.3); } .bro-block h2 { font-size: 1.3rem; color: var(--navy); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .bro-block h2 i { color: var(--accent); font-size: 1.05rem; } .bro-block p { font-size: 0.96rem; color: var(--text-soft); line-height: 1.95; } .bro-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; } .bro-stats > div { text-align: center; padding: 18px 8px; background: var(--cream); border-radius: var(--radius); } .bro-stats b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--accent); line-height: 1; } .bro-stats span { font-size: 0.72rem; color: var(--text-soft); font-weight: 700; margin-top: 6px; display: block; } .bro-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; } .bro-svc { display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: var(--cream); border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; transition: var(--transition); } .bro-svc:hover { background: var(--white); border-color: rgba(236, 107, 23, 0.45); transform: translateY(-3px); } .bro-svc-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: rgba(236, 107, 23, 0.12); color: var(--accent); font-size: 0.85rem; } .bro-svc-name { font-size: 0.82rem; font-weight: 700; color: var(--navy); line-height: 1.45; } .bro-erp-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .bro-erp { padding: 9px 17px; border-radius: 50px; background: var(--navy); color: #fff; font-size: 0.78rem; font-weight: 700; } .bro-sectors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .bro-sector { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 50px; background: var(--cream); border: 1px solid var(--line); font-size: 0.79rem; font-weight: 700; color: var(--navy); } .bro-sector i { color: var(--accent); font-size: 0.78rem; } .bro-certs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; } .bro-cert { display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: var(--cream); border-radius: var(--radius); } .bro-cert > i { color: var(--accent); font-size: 1.15rem; width: 26px; text-align: center; } .bro-cert b { display: block; font-size: 0.85rem; color: var(--navy); } .bro-cert span { font-size: 0.74rem; color: var(--text-soft); font-weight: 600; } .bro-contact { background: linear-gradient(135deg, var(--navy-darker), var(--navy)); border-color: transparent; } .bro-contact h2, .bro-contact p { color: #fff; } .bro-contact h2 i { color: var(--accent); } .bro-contact p { color: rgba(255, 255, 255, 0.75); } .bro-contact-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 24px; } .bro-contact-item { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 50px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 0.83rem; font-weight: 700; text-decoration: none; transition: var(--transition); } .bro-contact-item:hover { background: var(--accent); border-color: var(--accent); } .bro-contact-item i { color: var(--accent); } .bro-contact-item:hover i { color: #fff; } .bro-cta { width: 100%; justify-content: center; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .brochure-grid { grid-template-columns: 1fr; gap: 30px; } .brochure-side { position: static; } .bro-svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .brochure-sec { padding: 48px 0; } .bro-block { padding: 26px 20px; } .bro-svc-grid, .bro-certs { grid-template-columns: 1fr; } .bro-stats { grid-template-columns: repeat(2, 1fr); } .qr-box img { width: 150px; height: 150px; } .brochure-frame { padding: 10px; } } /* ---------- Footer quick links (profile / brochure) ---------- */ .footer-quick { display: flex !important; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-quick a { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, 0.6); font-size: 0.87rem; transition: var(--transition); } .footer-quick a i { color: var(--accent); font-size: 0.78rem; width: 14px; } .footer-quick a:hover { color: var(--accent); padding-inline-start: 5px; } /* ---------- Nav: fit 10 items comfortably ---------- */ @media (max-width: 1280px) { .main-nav a { padding: 10px 8px; font-size: 0.82rem; } } @media (max-width: 1100px) { .main-nav a { padding: 10px 6px; font-size: 0.78rem; } } /* ---------- PL-Integrate methodology pillars ---------- */ .method-pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 46px; } .mp-item { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 50px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.88); font-size: 0.85rem; font-weight: 700; } .mp-item i { color: var(--accent); } @media (max-width: 640px) { .method-pillars { gap: 10px; margin-bottom: 34px; } .mp-item { padding: 10px 16px; font-size: 0.78rem; } } /* ============================================================ CAREERS PAGE ============================================================ */ .career-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .career-perk { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; transition: var(--transition); } .career-perk:hover { transform: translateY(-6px); box-shadow: 0 24px 54px -28px rgba(13, 30, 56, 0.42); border-color: rgba(236, 107, 23, 0.4); } .cp-icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: rgba(236, 107, 23, 0.1); color: var(--accent); font-size: 1.2rem; margin-bottom: 18px; transition: var(--transition); } .career-perk:hover .cp-icon { background: var(--accent); color: var(--white); } .career-perk h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: 10px; } .career-perk p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.8; } .jobs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .job-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px; transition: var(--transition); } .job-card:hover { transform: translateY(-5px); box-shadow: 0 24px 54px -28px rgba(13, 30, 56, 0.42); border-color: rgba(236, 107, 23, 0.4); } .job-head { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; } .job-icon { width: 50px; height: 50px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; background: var(--navy); color: var(--accent); font-size: 1.1rem; } .job-title h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: 4px; } .job-loc { font-size: 0.78rem; color: var(--text-soft); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .job-loc i { color: var(--accent); } .job-card p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.8; flex: 1; margin-bottom: 18px; } .job-apply { align-self: flex-start; } @media (max-width: 1024px) { .career-perks { grid-template-columns: repeat(2, 1fr); } .jobs-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .career-perks { grid-template-columns: 1fr; } .career-perk { padding: 24px 20px; } .job-card { padding: 22px 20px; } } /* ============================================================ CLIENTS SECTION ============================================================ */ .clients { background: var(--white); } .clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .client-card { display: flex; align-items: center; gap: 18px; padding: 26px 24px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; transition: var(--transition); } .client-card:hover { transform: translateY(-6px); background: var(--white); border-color: rgba(236, 107, 23, 0.45); box-shadow: 0 24px 54px -28px rgba(13, 30, 56, 0.42); } .client-mark { width: 62px; height: 62px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; background: var(--navy); color: var(--accent); font-size: 1.4rem; transition: var(--transition); } .client-card:hover .client-mark { background: var(--accent); color: var(--white); } .client-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .client-text b { font-size: 1.02rem; color: var(--navy); font-weight: 800; } .client-text em { font-size: 0.82rem; color: var(--text-soft); font-style: normal; font-weight: 600; } .clients-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 30px; font-size: 0.8rem; color: var(--text-soft); font-weight: 600; } .clients-note i { color: var(--accent); } @media (max-width: 900px) { .clients-grid { grid-template-columns: 1fr; } } /* ============================================================ NAVIGATION FIX — 10 items must never wrap ============================================================ */ .main-nav a { white-space: nowrap; /* never break a label onto two lines */ } .main-nav ul { flex-wrap: nowrap; } /* Free up space by dropping the duplicate quote button on narrower screens (the mobile action bar already carries it) */ @media (max-width: 1400px) { .header-actions .btn { display: none; } } @media (min-width: 1401px) { .main-nav a { padding: 10px 12px; font-size: 0.88rem; } } /* Tighten progressively as the viewport narrows */ @media (max-width: 1280px) { .main-nav a { padding: 10px 9px; font-size: 0.82rem; } } @media (max-width: 1150px) { .main-nav a { padding: 10px 7px; font-size: 0.77rem; } } @media (max-width: 1024px) { .main-nav a { padding: 10px 6px; font-size: 0.74rem; } } @media (max-width: 992px) { .main-nav a { padding: 10px 5px; font-size: 0.71rem; } } /* The dropdown arrow takes space — shrink it slightly */ .main-nav .nav-arrow { font-size: 0.62rem; margin-inline-start: 3px; } /* ============================================================ HERO FIXES ============================================================ */ /* On mobile the hero copy is centred, so use a uniform vertical gradient (readable text + the skyline still visible through the middle) */ @media (max-width: 768px) { .hero-overlay, body[dir="ltr"] .hero-overlay { background: linear-gradient( to bottom, rgba(6, 12, 24, 0.88) 0%, rgba(6, 12, 24, 0.72) 45%, rgba(6, 12, 24, 0.90) 100% ); } .hero-bg { background-position: center 55%; } } /* Slightly larger brand mark, matching the reference site (62px → 50px on scroll) */ .brand img { height: 62px; } .site-header.scrolled .brand img { height: 50px; } /* The hero zoom is a slow, premium drift — make it just perceptible */ @keyframes heroZoom { from { transform: scale(1) translateY(0); } to { transform: scale(1.10) translateY(-1.5%); } } .hero-bg { animation-duration: 22s; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .hero-bg { animation: none !important; } } /* ============================================================ BROCHURE (portrait A4 pages, bilingual auto-switch) ============================================================ */ .brochure-portrait .brochure-frame img { width: 100%; height: auto; display: block; border-radius: var(--radius); background: #fff; } /* Only one language version is ever visible (driven by ) */ .brochure-portrait .brochure-frame img[data-lang] { margin: 0; } @media (max-width: 1024px) { .brochure-portrait { gap: 20px; } } /* ---------- Hero image (lighter asset on small screens) ---------- */ @media (max-width: 768px) { .hero-bg { background-image: url("../assets/riyadh-hero-sm.webp"); background-position: center 50%; } } /* ---------- Photo credit (CC BY-SA attribution) ---------- */ .photo-credit { display: block; margin-top: 14px; font-size: 0.68rem; color: rgba(255, 255, 255, 0.42); line-height: 1.6; } .photo-credit a { color: rgba(255, 255, 255, 0.55); text-decoration: underline; } .photo-credit a:hover { color: var(--accent); }