Our Projects | AlMasar Engineering & Construction<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Manrope:wght@700;800&display=swap\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n \/* ============================================================\r\n RESET & BASE\r\n ============================================================ *\/\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --surface-variant: #d5e3fc;\r\n --surface-container-low: #eff4ff;\r\n --on-surface: #0d1c2e;\r\n --primary: #00132c;\r\n --on-primary-container: #7990b4;\r\n --primary-container: #0f2847;\r\n --on-primary-fixed-variant: #314868;\r\n --on-error: #ffffff;\r\n --surface-container-lowest: #ffffff;\r\n --tertiary: #00161d;\r\n --error: #ba1a1a;\r\n --surface-container-highest: #d5e3fc;\r\n --on-error-container: #93000a;\r\n --inverse-surface: #233144;\r\n --background: #f8f9ff;\r\n --on-secondary-fixed-variant: #5d4201;\r\n --on-secondary-fixed: #261900;\r\n --on-secondary: #ffffff;\r\n --surface-container-high: #dce9ff;\r\n --secondary-fixed: #ffdea5;\r\n --surface-container: #e6eeff;\r\n --on-tertiary: #ffffff;\r\n --tertiary-fixed: #b4ebff;\r\n --inverse-on-surface: #eaf1ff;\r\n --secondary-fixed-dim: #e9c176;\r\n --on-background: #0d1c2e;\r\n --inverse-primary: #b1c8ef;\r\n --error-container: #ffdad6;\r\n --tertiary-container: #002c37;\r\n --surface-bright: #f8f9ff;\r\n --outline: #74777e;\r\n --on-secondary-container: #785a1a;\r\n --surface: #f8f9ff;\r\n --on-tertiary-fixed: #001f27;\r\n --secondary: #775a19;\r\n --primary-fixed-dim: #b1c8ef;\r\n --surface-tint: #495f81;\r\n --on-primary: #ffffff;\r\n --on-primary-fixed: #011c3a;\r\n --tertiary-fixed-dim: #94cfe4;\r\n --surface-dim: #ccdbf3;\r\n --outline-variant: #c4c6ce;\r\n --on-tertiary-container: #5b97ab;\r\n --primary-fixed: #d5e3ff;\r\n --on-surface-variant: #44474e;\r\n --secondary-container: #fed488;\r\n --amber-500: #f59e0b;\r\n --slate-300: #cbd5e1;\r\n --slate-400: #94a3b8;\r\n --slate-600: #475569;\r\n --white: #ffffff;\r\n }\r\n\r\n ::selection {\r\n background-color: var(--secondary-container);\r\n color: var(--on-secondary-container);\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background-color: var(--background);\r\n font-family: 'Inter', sans-serif;\r\n color: var(--on-surface);\r\n min-height: 100vh;\r\n overflow-x: hidden;\r\n }\r\n\r\n .material-symbols-outlined {\r\n font-family: 'Material Symbols Outlined';\r\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\r\n font-size: 24px;\r\n line-height: 1;\r\n display: inline-block;\r\n vertical-align: middle;\r\n user-select: none;\r\n }\r\n\r\n img { display: block; max-width: 100%; }\r\n a { text-decoration: none; }\r\n ul { list-style: none; }\r\n button { cursor: pointer; border: none; background: none; font-family: inherit; }\r\n\r\n \/* ============================================================\r\n KEYFRAME ANIMATIONS\r\n ============================================================ *\/\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(40px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n @keyframes fadeInLeft {\r\n from { opacity: 0; transform: translateX(-40px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n @keyframes fadeInRight {\r\n from { opacity: 0; transform: translateX(40px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n @keyframes lineGrow {\r\n from { width: 0; }\r\n to { width: 6rem; }\r\n }\r\n @keyframes shimmer {\r\n 0% { background-position: -200% center; }\r\n 100% { background-position: 200% center; }\r\n }\r\n @keyframes floatY {\r\n 0%,100% { transform: translateY(0); }\r\n 50% { transform: translateY(-8px); }\r\n }\r\n @keyframes heroBgZoom {\r\n from { transform: scale(1.08); }\r\n to { transform: scale(1.0); }\r\n }\r\n @keyframes borderFlash {\r\n 0%,100% { border-color: var(--secondary); }\r\n 50% { border-color: var(--amber-500); }\r\n }\r\n\r\n \/* ============================================================\r\n HERO SECTION \u2014 FIXED: proper padding so content isn't clipped\r\n ============================================================ *\/\r\n .hero {\r\n position: relative;\r\n width: 100%;\r\n height: 819px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n overflow: hidden;\r\n padding: 0 3%; \/* left\/right room for content *\/\r\n }\r\n\r\n .hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n animation: heroBgZoom 8s ease-out forwards;\r\n }\r\n .hero-bg img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: brightness(0.3);\r\n }\r\n\r\n .hero-content {\r\n position: relative;\r\n z-index: 10;\r\n max-width: 56rem;\r\n padding: 0 ;\r\n \/* no extra shift \u2014 hero padding handles it *\/\r\n animation: fadeInLeft 1s 0.3s cubic-bezier(0.22,1,0.36,1) both;\r\n }\r\n\r\n .hero-eyebrow {\r\n color: var(--secondary);\r\n font-family: 'Manrope', sans-serif;\r\n text-transform: uppercase;\r\n letter-spacing: 0.3em;\r\n font-size: 0.875rem;\r\n margin-bottom: 1rem;\r\n display: block;\r\n animation: fadeInLeft 0.8s 0.5s both;\r\n }\r\n\r\n .hero-title {\r\n color: var(--white);\r\n font-family: 'Manrope', sans-serif;\r\n font-weight: 800;\r\n font-size: clamp(3rem, 7vw, 6rem);\r\n letter-spacing: -0.04em;\r\n line-height: 1;\r\n margin-bottom: 2rem;\r\n animation: fadeInLeft 0.8s 0.6s both;\r\n }\r\n\r\n .hero-title-muted { color: var(--surface-variant); }\r\n\r\n .hero-body {\r\n color: var(--on-primary-container);\r\n font-size: 1.25rem;\r\n max-width: 42rem;\r\n line-height: 1.7;\r\n animation: fadeInLeft 0.8s 0.8s both;\r\n }\r\n\r\n \/* ===== HERO OVERLAY ===== *\/\r\n\/* LTR *\/\r\nhtml[dir=\"ltr\"] .hero-overlay {\r\n background: linear-gradient(\r\n to right,\r\n rgba(0,0,0,0.65) 20%,\r\n rgba(0,0,0,0.35) 50%,\r\n rgba(0,0,0,0.05) 100%\r\n );\r\n}\r\n\r\n\/* RTL *\/\r\nhtml[dir=\"rtl\"] .hero-overlay {\r\n background: linear-gradient(\r\n to left,\r\n rgba(0,0,0,0.65) 20%,\r\n rgba(0,0,0,0.35) 50%,\r\n rgba(0,0,0,0.05) 100%\r\n );\r\n}\r\n\r\n \/* ============================================================\r\n STATS SECTION\r\n ============================================================ *\/\r\n .stats-section {\r\n background-color: var(--surface-container-low);\r\n padding: 5rem 3rem;\r\n }\r\n\r\n .stats-grid {\r\n max-width: 80rem;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 3rem;\r\n }\r\n\r\n .stat-item {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n transition: transform 0.3s ease;\r\n }\r\n .stat-item:hover { transform: translateY(-6px); }\r\n\r\n .stat-number {\r\n color: var(--primary);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 3rem;\r\n font-weight: 800;\r\n letter-spacing: -0.04em;\r\n background: linear-gradient(90deg, var(--primary), var(--on-primary-fixed-variant), var(--primary));\r\n background-size: 200% auto;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .stat-item:hover .stat-number {\r\n animation: shimmer 1.5s linear infinite;\r\n }\r\n\r\n .stat-label {\r\n color: var(--on-surface-variant);\r\n font-size: 0.75rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.2em;\r\n }\r\n\r\n \/* ============================================================\r\n PROJECT ARCHIVES SECTION \u2014 no filter buttons\r\n ============================================================ *\/\r\n .projects-section { padding: 8rem 3rem; }\r\n .projects-inner { max-width: 80rem; margin: 0 auto; }\r\n\r\n .projects-header {\r\n margin-bottom: 5rem;\r\n }\r\n\r\n .projects-heading {\r\n color: var(--primary);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 2.25rem;\r\n font-weight: 800;\r\n letter-spacing: -0.04em;\r\n margin-bottom: 1rem;\r\n text-transform: uppercase;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n .projects-heading::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -6px;\r\n left: 0;\r\n height: 3px;\r\n width: 0;\r\n background-color: var(--secondary);\r\n transition: width 0.5s ease;\r\n }\r\n .projects-heading:hover::after { width: 100%; }\r\n\r\n .projects-subtext {\r\n color: var(--on-surface-variant);\r\n font-size: 1.125rem;\r\n line-height: 1.7;\r\n max-width: 36rem;\r\n }\r\n\r\n \/* Project Articles *\/\r\n .projects-list { display: flex; flex-direction: column; gap: 5rem; }\r\n\r\n .project-article {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 2rem;\r\n align-items: start;\r\n border-bottom: 1px solid var(--surface-container);\r\n padding-bottom: 5rem;\r\n }\r\n .project-article:last-child { border-bottom: none; padding-bottom: 0; }\r\n\r\n @media (min-width: 1024px) {\r\n .project-article { grid-template-columns: 7fr 5fr; }\r\n .project-article-reverse { grid-template-columns: 5fr 7fr; }\r\n }\r\n\r\n .project-img-wrap {\r\n height: 500px;\r\n overflow: hidden;\r\n background-color: var(--primary);\r\n position: relative;\r\n }\r\n .project-img-wrap img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0.9;\r\n transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.5s ease;\r\n }\r\n .project-img-wrap:hover img { transform: scale(1.06); opacity: 1; }\r\n\r\n .project-img-wrap::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border: 12px solid rgba(255,255,255,0.05);\r\n pointer-events: none;\r\n transition: border-color 0.4s ease;\r\n }\r\n .project-img-wrap:hover::after { border-color: rgba(245,158,11,0.12); }\r\n\r\n .project-img-wrap::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, rgba(15,40,71,0) 0%, rgba(15,40,71,0.35) 100%);\r\n opacity: 0;\r\n transition: opacity 0.5s ease;\r\n z-index: 1;\r\n }\r\n .project-img-wrap:hover::before { opacity: 1; }\r\n\r\n .project-info {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n padding: 1rem 0;\r\n }\r\n\r\n .project-category {\r\n color: var(--secondary);\r\n font-family: 'Manrope', sans-serif;\r\n text-transform: uppercase;\r\n letter-spacing: 0.25em;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .project-name {\r\n color: var(--primary);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 2.25rem;\r\n font-weight: 800;\r\n letter-spacing: -0.03em;\r\n margin-bottom: 1.5rem;\r\n text-transform: uppercase;\r\n transition: color 0.3s ease;\r\n }\r\n .project-info:hover .project-name { color: var(--on-primary-fixed-variant); }\r\n\r\n .project-text { color: var(--on-surface-variant); line-height: 1.7; font-size: 0.875rem; }\r\n .project-text p { margin-bottom: 1rem; }\r\n .project-text p:last-child { margin-bottom: 0; }\r\n\r\n .project-text-bold {\r\n font-weight: 700;\r\n color: var(--primary);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .project-box {\r\n background-color: var(--surface-container-low);\r\n padding: 1.5rem;\r\n border-left: 4px solid var(--primary);\r\n margin: 1rem 0;\r\n transition: border-color 0.3s ease, background-color 0.3s ease;\r\n }\r\n .project-box:hover { border-color: var(--secondary); background-color: var(--surface-container); }\r\n\r\n .project-box-title {\r\n font-weight: 700;\r\n color: var(--primary);\r\n text-transform: uppercase;\r\n font-size: 0.75rem;\r\n letter-spacing: 0.1em;\r\n margin-bottom: 0.75rem;\r\n }\r\n\r\n .project-tag-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 0.5rem 1rem;\r\n }\r\n\r\n .project-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n font-size: 0.875rem;\r\n transition: color 0.2s ease, transform 0.2s ease;\r\n }\r\n .project-tag:hover { color: var(--primary); transform: translateX(4px); }\r\n\r\n .tag-dot {\r\n width: 6px;\r\n height: 6px;\r\n background-color: var(--secondary);\r\n flex-shrink: 0;\r\n transition: background-color 0.3s ease, transform 0.3s ease;\r\n }\r\n .project-tag:hover .tag-dot { background-color: var(--amber-500); transform: scale(1.5); }\r\n\r\n .project-italic { font-style: italic; font-weight: 600; color: var(--primary); }\r\n\r\n .project-services-list { border: 1px solid var(--surface-container); padding: 1.25rem; }\r\n\r\n .service-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 0.75rem;\r\n padding: 0.5rem 0;\r\n font-size: 0.875rem;\r\n color: var(--on-surface-variant);\r\n transition: color 0.25s ease, transform 0.25s ease;\r\n }\r\n .service-item + .service-item { border-top: 1px solid var(--surface-container); }\r\n .service-item:hover { color: var(--primary); transform: translateX(6px); }\r\n\r\n .service-icon {\r\n color: var(--secondary);\r\n font-size: 1.125rem;\r\n flex-shrink: 0;\r\n transition: color 0.3s ease, transform 0.3s ease;\r\n }\r\n .service-item:hover .service-icon { color: var(--amber-500); transform: scale(1.2); }\r\n\r\n .project-closing {\r\n color: var(--primary);\r\n font-weight: 500;\r\n border-top: 1px solid var(--surface-container);\r\n padding-top: 1rem;\r\n font-size: 0.875rem;\r\n margin-top: 1rem;\r\n }\r\n\r\n .order-first { order: -1; }\r\n .order-second { order: 0; }\r\n @media (min-width: 1024px) {\r\n .lg-order-1 { order: 1; }\r\n .lg-order-2 { order: 2; }\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \/* Featured long project layout *\/\r\n.project-article-featured {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.9fr);\r\n gap: 2rem;\r\n align-items: start;\r\n}\r\n\r\n.project-article-featured .project-img-wrap {\r\n height: 500px;\r\n position: sticky;\r\n top: 2rem;\r\n}\r\n\r\n.project-article-featured .project-info {\r\n padding: 1rem 0 0;\r\n}\r\n\r\n.project-article-featured .project-text {\r\n font-size: 0.94rem;\r\n line-height: 1.75;\r\n}\r\n\r\n.project-article-featured .project-box {\r\n margin: 1.25rem 0;\r\n padding: 1.5rem;\r\n background-color: var(--surface-container-low);\r\n border-left: 4px solid var(--primary);\r\n}\r\n\r\n.project-article-featured .project-services-list {\r\n background: rgba(255,255,255,0.28);\r\n border: 1px solid var(--surface-container);\r\n padding: 1rem 1.25rem;\r\n}\r\n\r\n.project-article-featured .service-item {\r\n align-items: flex-start;\r\n gap: 0.85rem;\r\n padding: 0.85rem 0;\r\n}\r\n\r\n.project-article-featured .service-icon {\r\n font-size: 1.05rem;\r\n margin-top: 0.15rem;\r\n}\r\n\r\n@media (max-width: 1023px) {\r\n .project-article-featured {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .project-article-featured .project-img-wrap {\r\n position: relative;\r\n top: auto;\r\n height: 420px;\r\n }\r\n}\r\n\r\n@media (max-width: 639px) {\r\n .project-article-featured .project-img-wrap {\r\n height: 320px;\r\n }\r\n}\r\n\r\n \/* ============================================================\r\n PROCESS \/ TIMELINE SECTION\r\n ============================================================ *\/\r\n .process-section {\r\n padding: 8rem 0;\r\n background-color: var(--primary);\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .process-grid-bg {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0.05;\r\n pointer-events: none;\r\n display: grid;\r\n grid-template-columns: repeat(12, 1fr);\r\n }\r\n .process-grid-bg span { border-right: 1px solid var(--white); height: 100%; }\r\n\r\n .process-inner {\r\n max-width: 80rem;\r\n margin: 0 auto;\r\n padding: 0 3rem;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n .process-header { text-align: center; margin-bottom: 5rem; }\r\n\r\n .process-title {\r\n color: var(--white);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 2.25rem;\r\n font-weight: 800;\r\n letter-spacing: -0.04em;\r\n text-transform: uppercase;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .process-divider {\r\n width: 0;\r\n height: 4px;\r\n background-color: var(--secondary);\r\n margin: 0 auto;\r\n animation: lineGrow 0.8s 0.5s cubic-bezier(0.22,1,0.36,1) forwards;\r\n }\r\n\r\n .process-steps {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 3rem;\r\n position: relative;\r\n }\r\n\r\n .process-steps::before {\r\n content: '';\r\n position: absolute;\r\n top: 2rem;\r\n left: 0;\r\n width: 100%;\r\n height: 1px;\r\n background-color: var(--on-primary-fixed-variant);\r\n z-index: 0;\r\n }\r\n\r\n .process-step {\r\n position: relative;\r\n z-index: 20;\r\n animation: fadeInUp 0.7s both;\r\n }\r\n .process-step:nth-child(1) { animation-delay: 0.1s; }\r\n .process-step:nth-child(2) { animation-delay: 0.25s; }\r\n .process-step:nth-child(3) { animation-delay: 0.4s; }\r\n .process-step:nth-child(4) { animation-delay: 0.55s; }\r\n\r\n .step-icon-box {\r\n width: 4rem;\r\n height: 4rem;\r\n background-color: var(--primary-container);\r\n border: 2px solid var(--secondary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n box-shadow 0.3s ease;\r\n }\r\n .step-icon-box .material-symbols-outlined {\r\n color: var(--white);\r\n font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;\r\n }\r\n .process-step:hover .step-icon-box {\r\n transform: translateY(-10px);\r\n background-color: var(--secondary);\r\n border-color: var(--amber-500);\r\n box-shadow: 0 16px 40px rgba(119,90,25,0.4);\r\n }\r\n .process-step:hover .step-icon-box .material-symbols-outlined {\r\n animation: floatY 1.5s ease-in-out infinite;\r\n }\r\n\r\n .step-title {\r\n color: var(--white);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 1.125rem;\r\n font-weight: 700;\r\n margin-bottom: 1rem;\r\n text-transform: uppercase;\r\n transition: color 0.3s ease;\r\n }\r\n .process-step:hover .step-title { color: var(--amber-500); }\r\n\r\n .step-body {\r\n color: var(--on-primary-container);\r\n font-size: 0.875rem;\r\n line-height: 1.7;\r\n transition: color 0.3s ease;\r\n }\r\n .process-step:hover .step-body { color: var(--surface-variant); }\r\n\r\n \/* ============================================================\r\n CTA SECTION\r\n ============================================================ *\/\r\n .cta-section {\r\n padding: 8rem 3rem;\r\n background-color: var(--white);\r\n }\r\n\r\n .cta-inner {\r\n max-width: 80rem;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 5rem;\r\n }\r\n @media (min-width: 768px) { .cta-inner { flex-direction: row; } }\r\n\r\n .cta-img-wrap { flex: 1; overflow: hidden; position: relative; }\r\n .cta-img-wrap img {\r\n width: 100%;\r\n height: 600px;\r\n object-fit: cover;\r\n filter: grayscale(100%) brightness(0.75);\r\n transition: filter 0.7s ease, transform 0.7s ease;\r\n box-shadow: 0 25px 60px -15px rgba(13,28,46,0.35);\r\n }\r\n .cta-img-wrap:hover img { filter: grayscale(0%) brightness(0.9); transform: scale(1.03); }\r\n\r\n .cta-img-wrap::after {\r\n content: 'OUR TEAM';\r\n position: absolute;\r\n bottom: 1.5rem;\r\n left: 1.5rem;\r\n background: rgba(15,40,71,0.8);\r\n color: var(--amber-500);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 0.65rem;\r\n font-weight: 900;\r\n letter-spacing: 0.3em;\r\n padding: 0.4rem 0.8rem;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n .cta-img-wrap:hover::after { opacity: 1; }\r\n\r\n .cta-content { flex: 1; }\r\n\r\n .cta-title {\r\n color: var(--primary);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: clamp(2rem, 4vw, 3rem);\r\n font-weight: 800;\r\n letter-spacing: -0.04em;\r\n margin-bottom: 2rem;\r\n text-transform: uppercase;\r\n line-height: 1.15;\r\n }\r\n\r\n .cta-body {\r\n color: var(--on-surface-variant);\r\n font-size: 1.25rem;\r\n line-height: 1.7;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .cta-buttons { display: flex; flex-direction: column; gap: 1.5rem; }\r\n @media (min-width: 640px) { .cta-buttons { flex-direction: row; } }\r\n\r\n .btn-primary {\r\n background-color: var(--primary);\r\n color: var(--white);\r\n font-family: 'Manrope', sans-serif;\r\n padding: 1.25rem 2.5rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.2em;\r\n font-size: 0.875rem;\r\n font-weight: 900;\r\n transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .btn-primary::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: -100%;\r\n width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\r\n transition: left 0.5s ease;\r\n }\r\n .btn-primary:hover::before { left: 100%; }\r\n .btn-primary:hover {\r\n background-color: var(--primary-container);\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 28px rgba(13,28,46,0.3);\r\n }\r\n\r\n .btn-outline {\r\n border: 2px solid var(--primary);\r\n color: var(--primary);\r\n font-family: 'Manrope', sans-serif;\r\n padding: 1.25rem 2.5rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.2em;\r\n font-size: 0.875rem;\r\n font-weight: 900;\r\n transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;\r\n }\r\n .btn-outline:hover {\r\n background-color: var(--primary);\r\n color: var(--white);\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 28px rgba(13,28,46,0.25);\r\n }\r\n\r\n \/* ============================================================\r\n RESPONSIVE\r\n ============================================================ *\/\r\n @media (max-width: 1023px) {\r\n .process-steps { grid-template-columns: repeat(2, 1fr); }\r\n .process-steps::before { display: none; }\r\n .project-article { grid-template-columns: 1fr !important; }\r\n }\r\n @media (max-width: 767px) {\r\n .stats-grid { grid-template-columns: repeat(2, 1fr); }\r\n .hero-stat { display: none; }\r\n .hero { padding: 0 1.5rem; }\r\n }\r\n @media (max-width: 639px) {\r\n .stats-grid { grid-template-columns: 1fr; }\r\n .process-steps { grid-template-columns: 1fr; }\r\n }\r\n\r\n \/* ============================================================\r\n SCROLL REVEAL\r\n ============================================================ *\/\r\n .will-reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.7s ease, transform 0.7s ease;\r\n }\r\n .will-reveal.revealed {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n\r\n.btn-primary,\r\n.btn-outline {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n}\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<main>\r\n\r\n \r\n\r\n \r\n\r\n \r\n <section class=\"projects-section\">\r\n <div class=\"projects-inner\">\r\n\r\n \r\n <div class=\"projects-header will-reveal\">\r\n <h2 class=\"projects-heading\">Project Archives<\/h2>\r\n <p class=\"projects-subtext\">\r\n A curated selection of our most challenging and transformative engineering feats across key sectors.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"projects-list\">\r\n\r\n \r\n \r\n <article class=\"project-article project-article-reverse will-reveal\">\r\n <div class=\"project-info order-second lg-order-1\">\r\n <span class=\"project-category\">Infrastructure<\/span>\r\n <h3 class=\"project-name\">Queen Alia International Airport<\/h3>\r\n <div class=\"project-text\">\r\n <p class=\"project-text-bold\">GOVERNMENT & CRITICAL INFRASTRUCTURE.<\/p>\r\n <p>AlMasar Engineering delivers mission-critical engineering solutions for government and national\r\n infrastructure projects where reliability, compliance, and continuity are essential.<\/p>\r\n\r\n <div class=\"project-services-list\">\r\n <div class=\"service-item\">\r\n <span class=\"material-symbols-outlined service-icon\">account_balance<\/span>\r\n <span>Government Ministries & Authorities<\/span>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <span class=\"material-symbols-outlined service-icon\">oil_barrel<\/span>\r\n <span>Oil, Gas & Energy Infrastructure<\/span>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <span class=\"material-symbols-outlined service-icon\">flight_takeoff<\/span>\r\n <span>Airports & Transportation Hubs<\/span>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <span class=\"material-symbols-outlined service-icon\">gpp_maybe<\/span>\r\n <span>Emergency & Command Centers<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"project-closing\">\r\n We deliver secure, resilient infrastructure crucial for the protection and functionality of\r\n society's most vital services, designed for resilience and redundancy.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-img-wrap order-first lg-order-2\">\r\n <img decoding=\"async\" src=\"https:\/\/chemcastscientific.com\/wp-content\/uploads\/2026\/04\/freepik_enhance-4k_2747810728.webp\"\r\n alt=\"The modern geometric roof structure of Queen Alia International Airport\" \/>\r\n <\/div>\r\n <\/article>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n<section class=\"cta-section\">\r\n <div class=\"cta-inner\">\r\n <div class=\"cta-img-wrap will-reveal\">\r\n <img decoding=\"async\" src=\"https:\/\/chemcastscientific.com\/wp-content\/uploads\/2026\/04\/freepik_enhance-4k_2782725048.webp\"\r\n alt=\"Engineers reviewing blueprints\" \/>\r\n <\/div>\r\n\r\n <div class=\"cta-content will-reveal\">\r\n <h2 class=\"cta-title\">READY TO ENGINEER YOUR <br \/>NEXT PROJECT?<\/h2>\r\n\r\n <p class=\"cta-body\">\r\n From design to execution, we deliver high-performance HVAC systems built for efficiency,\r\n reliability, and long-term value.\r\n <\/p>\r\n\r\n <div class=\"cta-buttons\">\r\n <a href=\"https:\/\/chemcastscientific.com\/contact\/\" class=\"btn-primary\">\r\n Start a Project\r\n <\/a>\r\n\r\n <a href=\"https:\/\/chemcastscientific.com\/our-solutions\/\" class=\"btn-outline\">\r\n VIEW OUR SOLUTIONS\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<\/main>\r\n\r\n<script>\r\n (function () {\r\n \/* Scroll reveal *\/\r\n var els = document.querySelectorAll('.will-reveal');\r\n if (!els.length) return;\r\n var observer = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('revealed');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n els.forEach(function (el) { observer.observe(el); });\r\n })();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Projects | AlMasar Engineering & Construction Project Archives A curated selection of our most challenging and transformative engineering feats across key sectors. Infrastructure Queen Alia International Airport GOVERNMENT & CRITICAL INFRASTRUCTURE. AlMasar Engineering delivers mission-critical engineering solutions for government and national infrastructure projects where reliability, compliance, and continuity are essential. account_balance Government Ministries & […]<\/p>\n","protected":false},"author":1,"featured_media":438,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/posts\/723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":4,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/posts\/723\/revisions"}],"predecessor-version":[{"id":727,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/posts\/723\/revisions\/727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/media\/438"}],"wp:attachment":[{"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/media?parent=723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/categories?post=723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/tags?post=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Our Projects | AlMasar Engineering & Construction<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Manrope:wght@700;800&display=swap\" rel=\"stylesheet\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n \/* ============================================================\r\n RESET & BASE\r\n ============================================================ *\/\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --surface-variant: #d5e3fc;\r\n --surface-container-low: #eff4ff;\r\n --on-surface: #0d1c2e;\r\n --primary: #00132c;\r\n --on-primary-container: #7990b4;\r\n --primary-container: #0f2847;\r\n --on-primary-fixed-variant: #314868;\r\n --on-error: #ffffff;\r\n --surface-container-lowest: #ffffff;\r\n --tertiary: #00161d;\r\n --error: #ba1a1a;\r\n --surface-container-highest: #d5e3fc;\r\n --on-error-container: #93000a;\r\n --inverse-surface: #233144;\r\n --background: #f8f9ff;\r\n --on-secondary-fixed-variant: #5d4201;\r\n --on-secondary-fixed: #261900;\r\n --on-secondary: #ffffff;\r\n --surface-container-high: #dce9ff;\r\n --secondary-fixed: #ffdea5;\r\n --surface-container: #e6eeff;\r\n --on-tertiary: #ffffff;\r\n --tertiary-fixed: #b4ebff;\r\n --inverse-on-surface: #eaf1ff;\r\n --secondary-fixed-dim: #e9c176;\r\n --on-background: #0d1c2e;\r\n --inverse-primary: #b1c8ef;\r\n --error-container: #ffdad6;\r\n --tertiary-container: #002c37;\r\n --surface-bright: #f8f9ff;\r\n --outline: #74777e;\r\n --on-secondary-container: #785a1a;\r\n --surface: #f8f9ff;\r\n --on-tertiary-fixed: #001f27;\r\n --secondary: #775a19;\r\n --primary-fixed-dim: #b1c8ef;\r\n --surface-tint: #495f81;\r\n --on-primary: #ffffff;\r\n --on-primary-fixed: #011c3a;\r\n --tertiary-fixed-dim: #94cfe4;\r\n --surface-dim: #ccdbf3;\r\n --outline-variant: #c4c6ce;\r\n --on-tertiary-container: #5b97ab;\r\n --primary-fixed: #d5e3ff;\r\n --on-surface-variant: #44474e;\r\n --secondary-container: #fed488;\r\n --amber-500: #f59e0b;\r\n --slate-300: #cbd5e1;\r\n --slate-400: #94a3b8;\r\n --slate-600: #475569;\r\n --white: #ffffff;\r\n }\r\n\r\n ::selection {\r\n background-color: var(--secondary-container);\r\n color: var(--on-secondary-container);\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background-color: var(--background);\r\n font-family: 'Inter', sans-serif;\r\n color: var(--on-surface);\r\n min-height: 100vh;\r\n overflow-x: hidden;\r\n }\r\n\r\n .material-symbols-outlined {\r\n font-family: 'Material Symbols Outlined';\r\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\r\n font-size: 24px;\r\n line-height: 1;\r\n display: inline-block;\r\n vertical-align: middle;\r\n user-select: none;\r\n }\r\n\r\n img { display: block; max-width: 100%; }\r\n a { text-decoration: none; }\r\n ul { list-style: none; }\r\n button { cursor: pointer; border: none; background: none; font-family: inherit; }\r\n\r\n \/* ============================================================\r\n KEYFRAME ANIMATIONS\r\n ============================================================ *\/\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(40px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n @keyframes fadeInLeft {\r\n from { opacity: 0; transform: translateX(-40px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n @keyframes fadeInRight {\r\n from { opacity: 0; transform: translateX(40px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n @keyframes lineGrow {\r\n from { width: 0; }\r\n to { width: 6rem; }\r\n }\r\n @keyframes shimmer {\r\n 0% { background-position: -200% center; }\r\n 100% { background-position: 200% center; }\r\n }\r\n @keyframes floatY {\r\n 0%,100% { transform: translateY(0); }\r\n 50% { transform: translateY(-8px); }\r\n }\r\n @keyframes heroBgZoom {\r\n from { transform: scale(1.08); }\r\n to { transform: scale(1.0); }\r\n }\r\n @keyframes borderFlash {\r\n 0%,100% { border-color: var(--secondary); }\r\n 50% { border-color: var(--amber-500); }\r\n }\r\n\r\n \/* ============================================================\r\n HERO SECTION \u2014 FIXED: proper padding so content isn't clipped\r\n ============================================================ *\/\r\n .hero {\r\n position: relative;\r\n width: 100%;\r\n height: 819px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n overflow: hidden;\r\n padding: 0 3%; \/* left\/right room for content *\/\r\n }\r\n\r\n .hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n animation: heroBgZoom 8s ease-out forwards;\r\n }\r\n .hero-bg img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: brightness(0.3);\r\n }\r\n\r\n .hero-content {\r\n position: relative;\r\n z-index: 10;\r\n max-width: 56rem;\r\n padding: 0 ;\r\n \/* no extra shift \u2014 hero padding handles it *\/\r\n animation: fadeInLeft 1s 0.3s cubic-bezier(0.22,1,0.36,1) both;\r\n }\r\n\r\n .hero-eyebrow {\r\n color: var(--secondary);\r\n font-family: 'Manrope', sans-serif;\r\n text-transform: uppercase;\r\n letter-spacing: 0.3em;\r\n font-size: 0.875rem;\r\n margin-bottom: 1rem;\r\n display: block;\r\n animation: fadeInLeft 0.8s 0.5s both;\r\n }\r\n\r\n .hero-title {\r\n color: var(--white);\r\n font-family: 'Manrope', sans-serif;\r\n font-weight: 800;\r\n font-size: clamp(3rem, 7vw, 6rem);\r\n letter-spacing: -0.04em;\r\n line-height: 1;\r\n margin-bottom: 2rem;\r\n animation: fadeInLeft 0.8s 0.6s both;\r\n }\r\n\r\n .hero-title-muted { color: var(--surface-variant); }\r\n\r\n .hero-body {\r\n color: var(--on-primary-container);\r\n font-size: 1.25rem;\r\n max-width: 42rem;\r\n line-height: 1.7;\r\n animation: fadeInLeft 0.8s 0.8s both;\r\n }\r\n\r\n \/* ===== HERO OVERLAY ===== *\/\r\n\/* LTR *\/\r\nhtml[dir=\"ltr\"] .hero-overlay {\r\n background: linear-gradient(\r\n to right,\r\n rgba(0,0,0,0.65) 20%,\r\n rgba(0,0,0,0.35) 50%,\r\n rgba(0,0,0,0.05) 100%\r\n );\r\n}\r\n\r\n\/* RTL *\/\r\nhtml[dir=\"rtl\"] .hero-overlay {\r\n background: linear-gradient(\r\n to left,\r\n rgba(0,0,0,0.65) 20%,\r\n rgba(0,0,0,0.35) 50%,\r\n rgba(0,0,0,0.05) 100%\r\n );\r\n}\r\n\r\n \/* ============================================================\r\n STATS SECTION\r\n ============================================================ *\/\r\n .stats-section {\r\n background-color: var(--surface-container-low);\r\n padding: 5rem 3rem;\r\n }\r\n\r\n .stats-grid {\r\n max-width: 80rem;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 3rem;\r\n }\r\n\r\n .stat-item {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n transition: transform 0.3s ease;\r\n }\r\n .stat-item:hover { transform: translateY(-6px); }\r\n\r\n .stat-number {\r\n color: var(--primary);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 3rem;\r\n font-weight: 800;\r\n letter-spacing: -0.04em;\r\n background: linear-gradient(90deg, var(--primary), var(--on-primary-fixed-variant), var(--primary));\r\n background-size: 200% auto;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .stat-item:hover .stat-number {\r\n animation: shimmer 1.5s linear infinite;\r\n }\r\n\r\n .stat-label {\r\n color: var(--on-surface-variant);\r\n font-size: 0.75rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.2em;\r\n }\r\n\r\n \/* ============================================================\r\n PROJECT ARCHIVES SECTION \u2014 no filter buttons\r\n ============================================================ *\/\r\n .projects-section { padding: 8rem 3rem; }\r\n .projects-inner { max-width: 80rem; margin: 0 auto; }\r\n\r\n .projects-header {\r\n margin-bottom: 5rem;\r\n }\r\n\r\n .projects-heading {\r\n color: var(--primary);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 2.25rem;\r\n font-weight: 800;\r\n letter-spacing: -0.04em;\r\n margin-bottom: 1rem;\r\n text-transform: uppercase;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n .projects-heading::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -6px;\r\n left: 0;\r\n height: 3px;\r\n width: 0;\r\n background-color: var(--secondary);\r\n transition: width 0.5s ease;\r\n }\r\n .projects-heading:hover::after { width: 100%; }\r\n\r\n .projects-subtext {\r\n color: var(--on-surface-variant);\r\n font-size: 1.125rem;\r\n line-height: 1.7;\r\n max-width: 36rem;\r\n }\r\n\r\n \/* Project Articles *\/\r\n .projects-list { display: flex; flex-direction: column; gap: 5rem; }\r\n\r\n .project-article {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 2rem;\r\n align-items: start;\r\n border-bottom: 1px solid var(--surface-container);\r\n padding-bottom: 5rem;\r\n }\r\n .project-article:last-child { border-bottom: none; padding-bottom: 0; }\r\n\r\n @media (min-width: 1024px) {\r\n .project-article { grid-template-columns: 7fr 5fr; }\r\n .project-article-reverse { grid-template-columns: 5fr 7fr; }\r\n }\r\n\r\n .project-img-wrap {\r\n height: 500px;\r\n overflow: hidden;\r\n background-color: var(--primary);\r\n position: relative;\r\n }\r\n .project-img-wrap img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n opacity: 0.9;\r\n transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.5s ease;\r\n }\r\n .project-img-wrap:hover img { transform: scale(1.06); opacity: 1; }\r\n\r\n .project-img-wrap::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border: 12px solid rgba(255,255,255,0.05);\r\n pointer-events: none;\r\n transition: border-color 0.4s ease;\r\n }\r\n .project-img-wrap:hover::after { border-color: rgba(245,158,11,0.12); }\r\n\r\n .project-img-wrap::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, rgba(15,40,71,0) 0%, rgba(15,40,71,0.35) 100%);\r\n opacity: 0;\r\n transition: opacity 0.5s ease;\r\n z-index: 1;\r\n }\r\n .project-img-wrap:hover::before { opacity: 1; }\r\n\r\n .project-info {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n padding: 1rem 0;\r\n }\r\n\r\n .project-category {\r\n color: var(--secondary);\r\n font-family: 'Manrope', sans-serif;\r\n text-transform: uppercase;\r\n letter-spacing: 0.25em;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .project-name {\r\n color: var(--primary);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 2.25rem;\r\n font-weight: 800;\r\n letter-spacing: -0.03em;\r\n margin-bottom: 1.5rem;\r\n text-transform: uppercase;\r\n transition: color 0.3s ease;\r\n }\r\n .project-info:hover .project-name { color: var(--on-primary-fixed-variant); }\r\n\r\n .project-text { color: var(--on-surface-variant); line-height: 1.7; font-size: 0.875rem; }\r\n .project-text p { margin-bottom: 1rem; }\r\n .project-text p:last-child { margin-bottom: 0; }\r\n\r\n .project-text-bold {\r\n font-weight: 700;\r\n color: var(--primary);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .project-box {\r\n background-color: var(--surface-container-low);\r\n padding: 1.5rem;\r\n border-left: 4px solid var(--primary);\r\n margin: 1rem 0;\r\n transition: border-color 0.3s ease, background-color 0.3s ease;\r\n }\r\n .project-box:hover { border-color: var(--secondary); background-color: var(--surface-container); }\r\n\r\n .project-box-title {\r\n font-weight: 700;\r\n color: var(--primary);\r\n text-transform: uppercase;\r\n font-size: 0.75rem;\r\n letter-spacing: 0.1em;\r\n margin-bottom: 0.75rem;\r\n }\r\n\r\n .project-tag-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 0.5rem 1rem;\r\n }\r\n\r\n .project-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n font-size: 0.875rem;\r\n transition: color 0.2s ease, transform 0.2s ease;\r\n }\r\n .project-tag:hover { color: var(--primary); transform: translateX(4px); }\r\n\r\n .tag-dot {\r\n width: 6px;\r\n height: 6px;\r\n background-color: var(--secondary);\r\n flex-shrink: 0;\r\n transition: background-color 0.3s ease, transform 0.3s ease;\r\n }\r\n .project-tag:hover .tag-dot { background-color: var(--amber-500); transform: scale(1.5); }\r\n\r\n .project-italic { font-style: italic; font-weight: 600; color: var(--primary); }\r\n\r\n .project-services-list { border: 1px solid var(--surface-container); padding: 1.25rem; }\r\n\r\n .service-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 0.75rem;\r\n padding: 0.5rem 0;\r\n font-size: 0.875rem;\r\n color: var(--on-surface-variant);\r\n transition: color 0.25s ease, transform 0.25s ease;\r\n }\r\n .service-item + .service-item { border-top: 1px solid var(--surface-container); }\r\n .service-item:hover { color: var(--primary); transform: translateX(6px); }\r\n\r\n .service-icon {\r\n color: var(--secondary);\r\n font-size: 1.125rem;\r\n flex-shrink: 0;\r\n transition: color 0.3s ease, transform 0.3s ease;\r\n }\r\n .service-item:hover .service-icon { color: var(--amber-500); transform: scale(1.2); }\r\n\r\n .project-closing {\r\n color: var(--primary);\r\n font-weight: 500;\r\n border-top: 1px solid var(--surface-container);\r\n padding-top: 1rem;\r\n font-size: 0.875rem;\r\n margin-top: 1rem;\r\n }\r\n\r\n .order-first { order: -1; }\r\n .order-second { order: 0; }\r\n @media (min-width: 1024px) {\r\n .lg-order-1 { order: 1; }\r\n .lg-order-2 { order: 2; }\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \/* Featured long project layout *\/\r\n.project-article-featured {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.9fr);\r\n gap: 2rem;\r\n align-items: start;\r\n}\r\n\r\n.project-article-featured .project-img-wrap {\r\n height: 500px;\r\n position: sticky;\r\n top: 2rem;\r\n}\r\n\r\n.project-article-featured .project-info {\r\n padding: 1rem 0 0;\r\n}\r\n\r\n.project-article-featured .project-text {\r\n font-size: 0.94rem;\r\n line-height: 1.75;\r\n}\r\n\r\n.project-article-featured .project-box {\r\n margin: 1.25rem 0;\r\n padding: 1.5rem;\r\n background-color: var(--surface-container-low);\r\n border-left: 4px solid var(--primary);\r\n}\r\n\r\n.project-article-featured .project-services-list {\r\n background: rgba(255,255,255,0.28);\r\n border: 1px solid var(--surface-container);\r\n padding: 1rem 1.25rem;\r\n}\r\n\r\n.project-article-featured .service-item {\r\n align-items: flex-start;\r\n gap: 0.85rem;\r\n padding: 0.85rem 0;\r\n}\r\n\r\n.project-article-featured .service-icon {\r\n font-size: 1.05rem;\r\n margin-top: 0.15rem;\r\n}\r\n\r\n@media (max-width: 1023px) {\r\n .project-article-featured {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .project-article-featured .project-img-wrap {\r\n position: relative;\r\n top: auto;\r\n height: 420px;\r\n }\r\n}\r\n\r\n@media (max-width: 639px) {\r\n .project-article-featured .project-img-wrap {\r\n height: 320px;\r\n }\r\n}\r\n\r\n \/* ============================================================\r\n PROCESS \/ TIMELINE SECTION\r\n ============================================================ *\/\r\n .process-section {\r\n padding: 8rem 0;\r\n background-color: var(--primary);\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .process-grid-bg {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0.05;\r\n pointer-events: none;\r\n display: grid;\r\n grid-template-columns: repeat(12, 1fr);\r\n }\r\n .process-grid-bg span { border-right: 1px solid var(--white); height: 100%; }\r\n\r\n .process-inner {\r\n max-width: 80rem;\r\n margin: 0 auto;\r\n padding: 0 3rem;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n .process-header { text-align: center; margin-bottom: 5rem; }\r\n\r\n .process-title {\r\n color: var(--white);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 2.25rem;\r\n font-weight: 800;\r\n letter-spacing: -0.04em;\r\n text-transform: uppercase;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .process-divider {\r\n width: 0;\r\n height: 4px;\r\n background-color: var(--secondary);\r\n margin: 0 auto;\r\n animation: lineGrow 0.8s 0.5s cubic-bezier(0.22,1,0.36,1) forwards;\r\n }\r\n\r\n .process-steps {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 3rem;\r\n position: relative;\r\n }\r\n\r\n .process-steps::before {\r\n content: '';\r\n position: absolute;\r\n top: 2rem;\r\n left: 0;\r\n width: 100%;\r\n height: 1px;\r\n background-color: var(--on-primary-fixed-variant);\r\n z-index: 0;\r\n }\r\n\r\n .process-step {\r\n position: relative;\r\n z-index: 20;\r\n animation: fadeInUp 0.7s both;\r\n }\r\n .process-step:nth-child(1) { animation-delay: 0.1s; }\r\n .process-step:nth-child(2) { animation-delay: 0.25s; }\r\n .process-step:nth-child(3) { animation-delay: 0.4s; }\r\n .process-step:nth-child(4) { animation-delay: 0.55s; }\r\n\r\n .step-icon-box {\r\n width: 4rem;\r\n height: 4rem;\r\n background-color: var(--primary-container);\r\n border: 2px solid var(--secondary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n box-shadow 0.3s ease;\r\n }\r\n .step-icon-box .material-symbols-outlined {\r\n color: var(--white);\r\n font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;\r\n }\r\n .process-step:hover .step-icon-box {\r\n transform: translateY(-10px);\r\n background-color: var(--secondary);\r\n border-color: var(--amber-500);\r\n box-shadow: 0 16px 40px rgba(119,90,25,0.4);\r\n }\r\n .process-step:hover .step-icon-box .material-symbols-outlined {\r\n animation: floatY 1.5s ease-in-out infinite;\r\n }\r\n\r\n .step-title {\r\n color: var(--white);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 1.125rem;\r\n font-weight: 700;\r\n margin-bottom: 1rem;\r\n text-transform: uppercase;\r\n transition: color 0.3s ease;\r\n }\r\n .process-step:hover .step-title { color: var(--amber-500); }\r\n\r\n .step-body {\r\n color: var(--on-primary-container);\r\n font-size: 0.875rem;\r\n line-height: 1.7;\r\n transition: color 0.3s ease;\r\n }\r\n .process-step:hover .step-body { color: var(--surface-variant); }\r\n\r\n \/* ============================================================\r\n CTA SECTION\r\n ============================================================ *\/\r\n .cta-section {\r\n padding: 8rem 3rem;\r\n background-color: var(--white);\r\n }\r\n\r\n .cta-inner {\r\n max-width: 80rem;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 5rem;\r\n }\r\n @media (min-width: 768px) { .cta-inner { flex-direction: row; } }\r\n\r\n .cta-img-wrap { flex: 1; overflow: hidden; position: relative; }\r\n .cta-img-wrap img {\r\n width: 100%;\r\n height: 600px;\r\n object-fit: cover;\r\n filter: grayscale(100%) brightness(0.75);\r\n transition: filter 0.7s ease, transform 0.7s ease;\r\n box-shadow: 0 25px 60px -15px rgba(13,28,46,0.35);\r\n }\r\n .cta-img-wrap:hover img { filter: grayscale(0%) brightness(0.9); transform: scale(1.03); }\r\n\r\n .cta-img-wrap::after {\r\n content: 'OUR TEAM';\r\n position: absolute;\r\n bottom: 1.5rem;\r\n left: 1.5rem;\r\n background: rgba(15,40,71,0.8);\r\n color: var(--amber-500);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: 0.65rem;\r\n font-weight: 900;\r\n letter-spacing: 0.3em;\r\n padding: 0.4rem 0.8rem;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n .cta-img-wrap:hover::after { opacity: 1; }\r\n\r\n .cta-content { flex: 1; }\r\n\r\n .cta-title {\r\n color: var(--primary);\r\n font-family: 'Manrope', sans-serif;\r\n font-size: clamp(2rem, 4vw, 3rem);\r\n font-weight: 800;\r\n letter-spacing: -0.04em;\r\n margin-bottom: 2rem;\r\n text-transform: uppercase;\r\n line-height: 1.15;\r\n }\r\n\r\n .cta-body {\r\n color: var(--on-surface-variant);\r\n font-size: 1.25rem;\r\n line-height: 1.7;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .cta-buttons { display: flex; flex-direction: column; gap: 1.5rem; }\r\n @media (min-width: 640px) { .cta-buttons { flex-direction: row; } }\r\n\r\n .btn-primary {\r\n background-color: var(--primary);\r\n color: var(--white);\r\n font-family: 'Manrope', sans-serif;\r\n padding: 1.25rem 2.5rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.2em;\r\n font-size: 0.875rem;\r\n font-weight: 900;\r\n transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .btn-primary::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: -100%;\r\n width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\r\n transition: left 0.5s ease;\r\n }\r\n .btn-primary:hover::before { left: 100%; }\r\n .btn-primary:hover {\r\n background-color: var(--primary-container);\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 28px rgba(13,28,46,0.3);\r\n }\r\n\r\n .btn-outline {\r\n border: 2px solid var(--primary);\r\n color: var(--primary);\r\n font-family: 'Manrope', sans-serif;\r\n padding: 1.25rem 2.5rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.2em;\r\n font-size: 0.875rem;\r\n font-weight: 900;\r\n transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;\r\n }\r\n .btn-outline:hover {\r\n background-color: var(--primary);\r\n color: var(--white);\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 28px rgba(13,28,46,0.25);\r\n }\r\n\r\n \/* ============================================================\r\n RESPONSIVE\r\n ============================================================ *\/\r\n @media (max-width: 1023px) {\r\n .process-steps { grid-template-columns: repeat(2, 1fr); }\r\n .process-steps::before { display: none; }\r\n .project-article { grid-template-columns: 1fr !important; }\r\n }\r\n @media (max-width: 767px) {\r\n .stats-grid { grid-template-columns: repeat(2, 1fr); }\r\n .hero-stat { display: none; }\r\n .hero { padding: 0 1.5rem; }\r\n }\r\n @media (max-width: 639px) {\r\n .stats-grid { grid-template-columns: 1fr; }\r\n .process-steps { grid-template-columns: 1fr; }\r\n }\r\n\r\n \/* ============================================================\r\n SCROLL REVEAL\r\n ============================================================ *\/\r\n .will-reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.7s ease, transform 0.7s ease;\r\n }\r\n .will-reveal.revealed {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n\r\n.btn-primary,\r\n.btn-outline {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n}\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<main>\r\n\r\n \r\n\r\n \r\n\r\n \r\n <section class=\"projects-section\">\r\n <div class=\"projects-inner\">\r\n\r\n \r\n <div class=\"projects-header will-reveal\">\r\n <h2 class=\"projects-heading\">Project Archives<\/h2>\r\n <p class=\"projects-subtext\">\r\n A curated selection of our most challenging and transformative engineering feats across key sectors.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"projects-list\">\r\n\r\n \r\n \r\n <article class=\"project-article project-article-reverse will-reveal\">\r\n <div class=\"project-info order-second lg-order-1\">\r\n <span class=\"project-category\">Infrastructure<\/span>\r\n <h3 class=\"project-name\">Queen Alia International Airport<\/h3>\r\n <div class=\"project-text\">\r\n <p class=\"project-text-bold\">GOVERNMENT & CRITICAL INFRASTRUCTURE.<\/p>\r\n <p>AlMasar Engineering delivers mission-critical engineering solutions for government and national\r\n infrastructure projects where reliability, compliance, and continuity are essential.<\/p>\r\n\r\n <div class=\"project-services-list\">\r\n <div class=\"service-item\">\r\n <span class=\"material-symbols-outlined service-icon\">account_balance<\/span>\r\n <span>Government Ministries & Authorities<\/span>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <span class=\"material-symbols-outlined service-icon\">oil_barrel<\/span>\r\n <span>Oil, Gas & Energy Infrastructure<\/span>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <span class=\"material-symbols-outlined service-icon\">flight_takeoff<\/span>\r\n <span>Airports & Transportation Hubs<\/span>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <span class=\"material-symbols-outlined service-icon\">gpp_maybe<\/span>\r\n <span>Emergency & Command Centers<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"project-closing\">\r\n We deliver secure, resilient infrastructure crucial for the protection and functionality of\r\n society's most vital services, designed for resilience and redundancy.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"project-img-wrap order-first lg-order-2\">\r\n <img decoding=\"async\" src=\"https:\/\/chemcastscientific.com\/wp-content\/uploads\/2026\/04\/freepik_enhance-4k_2747810728.webp\"\r\n alt=\"The modern geometric roof structure of Queen Alia International Airport\" \/>\r\n <\/div>\r\n <\/article>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n<section class=\"cta-section\">\r\n <div class=\"cta-inner\">\r\n <div class=\"cta-img-wrap will-reveal\">\r\n <img decoding=\"async\" src=\"https:\/\/chemcastscientific.com\/wp-content\/uploads\/2026\/04\/freepik_enhance-4k_2782725048.webp\"\r\n alt=\"Engineers reviewing blueprints\" \/>\r\n <\/div>\r\n\r\n <div class=\"cta-content will-reveal\">\r\n <h2 class=\"cta-title\">READY TO ENGINEER YOUR <br \/>NEXT PROJECT?<\/h2>\r\n\r\n <p class=\"cta-body\">\r\n From design to execution, we deliver high-performance HVAC systems built for efficiency,\r\n reliability, and long-term value.\r\n <\/p>\r\n\r\n <div class=\"cta-buttons\">\r\n <a href=\"https:\/\/chemcastscientific.com\/contact\/\" class=\"btn-primary\">\r\n Start a Project\r\n <\/a>\r\n\r\n <a href=\"https:\/\/chemcastscientific.com\/our-solutions\/\" class=\"btn-outline\">\r\n VIEW OUR SOLUTIONS\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<\/main>\r\n\r\n<script>\r\n (function () {\r\n \/* Scroll reveal *\/\r\n var els = document.querySelectorAll('.will-reveal');\r\n if (!els.length) return;\r\n var observer = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('revealed');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n els.forEach(function (el) { observer.observe(el); });\r\n })();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Projects | AlMasar Engineering & Construction Project Archives A curated selection of our most challenging and transformative engineering feats across key sectors. Infrastructure Queen Alia International Airport GOVERNMENT & CRITICAL INFRASTRUCTURE. AlMasar Engineering delivers mission-critical engineering solutions for government and national infrastructure projects where reliability, compliance, and continuity are essential. account_balance Government Ministries & […]<\/p>\n","protected":false},"author":1,"featured_media":438,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/posts\/723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":4,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/posts\/723\/revisions"}],"predecessor-version":[{"id":727,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/posts\/723\/revisions\/727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/media\/438"}],"wp:attachment":[{"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/media?parent=723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/categories?post=723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chemcastscientific.com\/ar\/wp-json\/wp\/v2\/tags?post=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}