{"id":83,"date":"2026-04-16T12:22:53","date_gmt":"2026-04-16T12:22:53","guid":{"rendered":"https:\/\/smartcapitaleng.com\/?page_id=83"},"modified":"2026-07-30T14:42:30","modified_gmt":"2026-07-30T14:42:30","slug":"projects","status":"publish","type":"page","link":"https:\/\/smartcapitaleng.com\/ar\/projects\/","title":{"rendered":"\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"83\" class=\"elementor elementor-83\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6d75e0a e-con-full e-flex e-con e-parent\" data-id=\"6d75e0a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-011172b elementor-widget elementor-widget-html\" data-id=\"011172b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Smart Capital Engineering \u2014 Elementor-ready projects section -->\r\n<link\r\n    href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap\"\r\n    rel=\"stylesheet\">\r\n<link\r\n    href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap\"\r\n    rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* Everything is scoped to this section so it will not affect the rest of the page. *\/\r\n    .sce-projects {\r\n        --sce-navy: #0a1a2f;\r\n        --sce-navy-light: #132f4c;\r\n        --sce-ink: #d5e3ff;\r\n        --sce-muted: #d0c5b5;\r\n        --sce-gold: #f2d28b;\r\n        --sce-gold-dark: #c9a86a;\r\n        position: relative;\r\n        isolation: isolate;\r\n        overflow: hidden;\r\n        color: var(--sce-ink);\r\n        background:\r\n            radial-gradient(circle at 18% 10%, rgba(65, 111, 155, .22), transparent 35%),\r\n            linear-gradient(180deg, var(--sce-navy) 0%, var(--sce-navy-light) 55%, var(--sce-navy) 100%);\r\n        font-family: \"Inter\", sans-serif;\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .sce-projects *,\r\n    .sce-projects *::before,\r\n    .sce-projects *::after {\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .sce-projects::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset: 0;\r\n        z-index: -1;\r\n        pointer-events: none;\r\n        opacity: .38;\r\n        background-image: radial-gradient(circle, rgba(242, 210, 139, .22) 1px, transparent 1px);\r\n        background-size: 40px 40px;\r\n        -webkit-mask-image: linear-gradient(to bottom, #000, transparent 86%);\r\n        mask-image: linear-gradient(to bottom, #000, transparent 86%);\r\n    }\r\n\r\n    .sce-projects .sce-projects-intro {\r\n        width: min(1180px, calc(100% - 40px));\r\n        margin: 0 auto;\r\n        padding: clamp(72px, 10vw, 140px) 0 clamp(34px, 5vw, 72px);\r\n        text-align: center;\r\n    }\r\n\r\n    .sce-projects .sce-eyebrow {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        margin-bottom: 18px;\r\n        color: var(--sce-gold);\r\n        font: 700 clamp(11px, 1vw, 13px)\/1 \"Space Grotesk\", sans-serif;\r\n        letter-spacing: .28em;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    .sce-projects .sce-eyebrow::before,\r\n    .sce-projects .sce-eyebrow::after {\r\n        content: \"\";\r\n        width: clamp(24px, 5vw, 72px);\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, var(--sce-gold-dark));\r\n    }\r\n\r\n    .sce-projects .sce-eyebrow::after {\r\n        transform: scaleX(-1);\r\n    }\r\n\r\n    .sce-projects .sce-title {\r\n        max-width: 1000px;\r\n        margin: 0 auto 22px;\r\n        background: linear-gradient(100deg, #d5e3ff 18%, #f2d28b 48%, #d5e3ff 78%);\r\n        background-size: 220% auto;\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n        color: transparent;\r\n        font: 700 clamp(42px, 8vw, 104px)\/1.2 \"Space Grotesk\", sans-serif;\r\n        letter-spacing: -.055em;\r\n        text-transform: uppercase;\r\n        animation: sce-shimmer 8s linear infinite;\r\n    }\r\n\r\n    .sce-projects .sce-lead {\r\n        max-width: 700px;\r\n        margin: 0 auto;\r\n        color: var(--sce-muted);\r\n        font-size: clamp(15px, 1.5vw, 19px);\r\n        font-weight: 300;\r\n    }\r\n\r\n    @keyframes sce-shimmer {\r\n        to { background-position: 220% center; }\r\n    }\r\n\r\n    .sce-projects .sce-carousel {\r\n        position: relative;\r\n        width: 100%;\r\n        padding: 12px 0 clamp(78px, 9vw, 118px);\r\n        outline: none;\r\n        touch-action: pan-y;\r\n        cursor: grab;\r\n    }\r\n\r\n    .sce-projects .sce-carousel.sce-is-dragging {\r\n        cursor: grabbing;\r\n    }\r\n\r\n    .sce-projects .sce-viewport {\r\n        position: relative;\r\n        height: clamp(390px, 62vw, 710px);\r\n        overflow: hidden;\r\n        perspective: 1600px;\r\n    }\r\n\r\n    .sce-projects .sce-slide {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        width: min(76vw, 1080px);\r\n        height: clamp(330px, 54vw, 630px);\r\n        overflow: hidden;\r\n        border: 1px solid rgba(242, 210, 139, .22);\r\n        border-radius: clamp(8px, 1.1vw, 16px);\r\n        background: #081523;\r\n        box-shadow: 0 32px 80px rgba(0, 0, 0, .42), 0 0 32px rgba(201, 168, 106, .08);\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transform: translate3d(-50%, -50%, -250px) scale(.7);\r\n        transition:\r\n            transform 800ms cubic-bezier(.22, .78, .18, 1),\r\n            opacity 500ms ease,\r\n            filter 800ms ease,\r\n            visibility 0s linear 800ms;\r\n        pointer-events: none;\r\n        will-change: transform, opacity;\r\n    }\r\n\r\n    .sce-projects .sce-slide[data-distance=\"0\"] {\r\n        z-index: 5;\r\n        opacity: 1;\r\n        visibility: visible;\r\n        transform: translate3d(-50%, -50%, 0) rotateY(0) scale(1);\r\n        filter: none;\r\n        transition-delay: 0s;\r\n    }\r\n\r\n    .sce-projects .sce-slide[data-distance=\"-1\"],\r\n    .sce-projects .sce-slide[data-distance=\"1\"] {\r\n        z-index: 3;\r\n        opacity: .42;\r\n        visibility: visible;\r\n        filter: grayscale(.65) brightness(.58);\r\n        transition-delay: 0s;\r\n    }\r\n\r\n    .sce-projects .sce-slide[data-distance=\"-1\"] {\r\n        transform: translate3d(-104%, -50%, -110px) rotateY(15deg) scale(.78);\r\n    }\r\n\r\n    .sce-projects .sce-slide[data-distance=\"1\"] {\r\n        transform: translate3d(4%, -50%, -110px) rotateY(-15deg) scale(.78);\r\n    }\r\n\r\n    .sce-projects .sce-slide[data-distance=\"-2\"],\r\n    .sce-projects .sce-slide[data-distance=\"2\"] {\r\n        z-index: 1;\r\n        opacity: .12;\r\n        visibility: visible;\r\n        filter: grayscale(1) brightness(.4);\r\n        transition-delay: 0s;\r\n    }\r\n\r\n    .sce-projects .sce-slide[data-distance=\"-2\"] {\r\n        transform: translate3d(-137%, -50%, -190px) rotateY(22deg) scale(.62);\r\n    }\r\n\r\n    .sce-projects .sce-slide[data-distance=\"2\"] {\r\n        transform: translate3d(37%, -50%, -190px) rotateY(-22deg) scale(.62);\r\n    }\r\n\r\n    .sce-projects .sce-slide img {\r\n        display: block;\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        object-position: center;\r\n        pointer-events: none;\r\n        user-select: none;\r\n        -webkit-user-drag: none;\r\n        \/* No hover zoom and no click\/open behavior. *\/\r\n        transform: none !important;\r\n    }\r\n\r\n    .sce-projects .sce-slide::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        inset: 0;\r\n        pointer-events: none;\r\n        background:\r\n            linear-gradient(180deg, transparent 62%, rgba(3, 12, 23, .6)),\r\n            linear-gradient(90deg, rgba(242, 210, 139, .12), transparent 20%);\r\n    }\r\n\r\n    .sce-projects .sce-index {\r\n        position: absolute;\r\n        right: clamp(16px, 2.5vw, 32px);\r\n        bottom: clamp(14px, 2.2vw, 28px);\r\n        z-index: 2;\r\n        color: rgba(242, 210, 139, .9);\r\n        font: 600 12px\/1 \"Space Grotesk\", sans-serif;\r\n        letter-spacing: .2em;\r\n        text-shadow: 0 2px 12px #000;\r\n    }\r\n\r\n    .sce-projects .sce-controls {\r\n        display: grid;\r\n        grid-template-columns: 56px minmax(0, 560px) 56px;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: clamp(12px, 2vw, 24px);\r\n        width: min(820px, calc(100% - 32px));\r\n        margin: 22px auto 0;\r\n    }\r\n\r\n    .sce-projects .sce-arrow {\r\n        display: grid;\r\n        width: 56px;\r\n        height: 56px;\r\n        padding: 0;\r\n        place-items: center;\r\n        border: 1px solid rgba(242, 210, 139, .32);\r\n        border-radius: 50%;\r\n        color: var(--sce-gold);\r\n        background: rgba(9, 25, 43, .62);\r\n        backdrop-filter: blur(14px);\r\n        -webkit-backdrop-filter: blur(14px);\r\n        cursor: pointer;\r\n        transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;\r\n    }\r\n\r\n    .sce-projects .sce-arrow:hover,\r\n    .sce-projects .sce-arrow:focus-visible {\r\n        color: #201504;\r\n        border-color: var(--sce-gold);\r\n        background: var(--sce-gold);\r\n        outline: none;\r\n    }\r\n\r\n    .sce-projects .sce-arrow .material-symbols-outlined {\r\n        font-family: \"Material Symbols Outlined\" !important;\r\n        font-size: 25px;\r\n    }\r\n\r\n    .sce-projects .sce-progress {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 7px;\r\n        min-width: 0;\r\n    }\r\n\r\n    .sce-projects .sce-dot {\r\n        flex: 1 1 0;\r\n        height: 2px;\r\n        padding: 9px 0;\r\n        border: 0;\r\n        background: transparent;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .sce-projects .sce-dot::before {\r\n        content: \"\";\r\n        display: block;\r\n        width: 100%;\r\n        height: 2px;\r\n        background: rgba(213, 227, 255, .2);\r\n        transition: height 250ms ease, background-color 250ms ease;\r\n    }\r\n\r\n    .sce-projects .sce-dot[aria-current=\"true\"]::before {\r\n        height: 4px;\r\n        background: var(--sce-gold);\r\n        box-shadow: 0 0 12px rgba(242, 210, 139, .35);\r\n    }\r\n\r\n    .sce-projects .sce-counter {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 8px;\r\n        margin-top: 14px;\r\n        color: var(--sce-muted);\r\n        font: 600 11px\/1 \"Space Grotesk\", sans-serif;\r\n        letter-spacing: .18em;\r\n    }\r\n\r\n    .sce-projects .sce-counter-current {\r\n        color: var(--sce-gold);\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n        .sce-projects .sce-projects-intro {\r\n            width: min(100% - 28px, 620px);\r\n            padding-top: 66px;\r\n        }\r\n\r\n        .sce-projects .sce-viewport {\r\n            height: 72vw;\r\n            min-height: 320px;\r\n            max-height: 520px;\r\n        }\r\n\r\n        .sce-projects .sce-slide {\r\n            width: 86vw;\r\n            height: 66vw;\r\n            min-height: 286px;\r\n            max-height: 470px;\r\n        }\r\n\r\n        .sce-projects .sce-slide[data-distance=\"-1\"] {\r\n            transform: translate3d(-113%, -50%, -100px) rotateY(10deg) scale(.77);\r\n        }\r\n\r\n        .sce-projects .sce-slide[data-distance=\"1\"] {\r\n            transform: translate3d(13%, -50%, -100px) rotateY(-10deg) scale(.77);\r\n        }\r\n\r\n        .sce-projects .sce-slide[data-distance=\"-2\"],\r\n        .sce-projects .sce-slide[data-distance=\"2\"] {\r\n            opacity: 0;\r\n        }\r\n\r\n        .sce-projects .sce-controls {\r\n            grid-template-columns: 46px minmax(0, 1fr) 46px;\r\n            gap: 10px;\r\n            margin-top: 12px;\r\n        }\r\n\r\n        .sce-projects .sce-arrow {\r\n            width: 46px;\r\n            height: 46px;\r\n        }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n        .sce-projects .sce-title {\r\n            animation: none;\r\n        }\r\n\r\n        .sce-projects .sce-slide {\r\n            transition-duration: 1ms;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"sce-projects\">\r\n    <header class=\"sce-projects-intro\">\r\n        <div class=\"sce-eyebrow\">Smart Capital Engineering<\/div>\r\n        <h1 class=\"sce-title\">Our Projects<\/h1>\r\n        <p class=\"sce-lead\">\r\n            A curated collection shaped by engineering precision, purposeful design and enduring quality.\r\n        <\/p>\r\n    <\/header>\r\n\r\n    <section\r\n        class=\"sce-carousel\"\r\n        aria-label=\"Selected projects image carousel\"\r\n        aria-roledescription=\"carousel\"\r\n        tabindex=\"0\">\r\n        <div class=\"sce-viewport\" aria-live=\"polite\">\r\n            <figure class=\"sce-slide\" data-distance=\"0\" aria-hidden=\"false\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/3-2.png\" alt=\"Smart Capital Engineering project 1\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 01<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/3-5.png\" alt=\"Smart Capital Engineering project 2\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 02<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/3-6.png\" alt=\"Smart Capital Engineering project 3\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 03<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/5.jpeg\" alt=\"Smart Capital Engineering project 4\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 04<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/5e0b4699-d38c-44a6-a3d3-5847748e908f.png\" alt=\"Smart Capital Engineering project 5\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 05<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/75edb3f5-4b74-4808-b938-3a3b38d6df4d.png\" alt=\"Smart Capital Engineering project 6\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 06<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/bdb26c73-6358-4ecc-bafb-e622d4afc02d.png\" alt=\"Smart Capital Engineering project 7\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 07<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/c1ba57a8-57c6-4e3d-a4ce-15e9bfdec15c.png\" alt=\"Smart Capital Engineering project 8\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 08<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/Gemini_Generated_Image_6ibflx6ibflx6ibf.png\" alt=\"Smart Capital Engineering project 9\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 09<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/0cc0d476-58d8-4b69-a057-f3e4dd6a8fea.png\" alt=\"Smart Capital Engineering project 10\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 10<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/01-1.png\" alt=\"Smart Capital Engineering project 11\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 11<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/01-3.png\" alt=\"Smart Capital Engineering project 12\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 12<\/figcaption>\r\n            <\/figure>\r\n            <figure class=\"sce-slide\" aria-hidden=\"true\">\r\n                <img decoding=\"async\" src=\"http:\/\/smartcapitaleng.com\/wp-content\/uploads\/2026\/07\/3-1.png\" alt=\"Smart Capital Engineering project 13\" draggable=\"false\">\r\n                <figcaption class=\"sce-index\">PROJECT \/ 13<\/figcaption>\r\n            <\/figure>\r\n        <\/div>\r\n\r\n        <div class=\"sce-controls\">\r\n            <button class=\"sce-arrow sce-prev\" type=\"button\" aria-label=\"Previous project\">\r\n                <span class=\"material-symbols-outlined\" aria-hidden=\"true\">arrow_back<\/span>\r\n            <\/button>\r\n            <div class=\"sce-progress\" aria-label=\"Choose a project\">\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 1\" aria-current=\"true\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 2\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 3\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 4\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 5\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 6\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 7\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 8\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 9\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 10\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 11\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 12\"><\/button>\r\n                <button class=\"sce-dot\" type=\"button\" aria-label=\"Go to project 13\"><\/button>\r\n            <\/div>\r\n            <button class=\"sce-arrow sce-next\" type=\"button\" aria-label=\"Next project\">\r\n                <span class=\"material-symbols-outlined\" aria-hidden=\"true\">arrow_forward<\/span>\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <div class=\"sce-counter\" aria-hidden=\"true\">\r\n            <span class=\"sce-counter-current\">01<\/span>\r\n            <span>\/<\/span>\r\n            <span>13<\/span>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n<script>\r\n    (() => {\r\n        document.querySelectorAll(\".sce-carousel\").forEach((carousel) => {\r\n            if (carousel.dataset.sceReady === \"true\") return;\r\n            carousel.dataset.sceReady = \"true\";\r\n\r\n            const slides = Array.from(carousel.querySelectorAll(\".sce-slide\"));\r\n            const dots = Array.from(carousel.querySelectorAll(\".sce-dot\"));\r\n            const previous = carousel.querySelector(\".sce-prev\");\r\n            const next = carousel.querySelector(\".sce-next\");\r\n            const currentCounter = carousel.querySelector(\".sce-counter-current\");\r\n            const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n            let current = 0;\r\n            let timer = null;\r\n            let pointerStart = 0;\r\n            let pointerDelta = 0;\r\n\r\n            const circularDistance = (slideIndex) => {\r\n                let distance = slideIndex - current;\r\n                const half = slides.length \/ 2;\r\n                if (distance > half) distance -= slides.length;\r\n                if (distance < -half) distance += slides.length;\r\n                return distance;\r\n            };\r\n\r\n            const render = () => {\r\n                slides.forEach((slide, index) => {\r\n                    const distance = circularDistance(index);\r\n                    const visibleDistance = Math.max(-3, Math.min(3, distance));\r\n                    slide.dataset.distance = String(visibleDistance);\r\n                    slide.setAttribute(\"aria-hidden\", index === current ? \"false\" : \"true\");\r\n                });\r\n\r\n                dots.forEach((dot, index) => {\r\n                    if (index === current) {\r\n                        dot.setAttribute(\"aria-current\", \"true\");\r\n                    } else {\r\n                        dot.removeAttribute(\"aria-current\");\r\n                    }\r\n                });\r\n\r\n                currentCounter.textContent = String(current + 1).padStart(2, \"0\");\r\n            };\r\n\r\n            const goTo = (index, restart = true) => {\r\n                current = (index + slides.length) % slides.length;\r\n                render();\r\n                if (restart) startAutoplay();\r\n            };\r\n\r\n            const startAutoplay = () => {\r\n                window.clearInterval(timer);\r\n                if (reduceMotion || document.hidden) return;\r\n                timer = window.setInterval(() => goTo(current + 1, false), 4200);\r\n            };\r\n\r\n            previous.addEventListener(\"click\", () => goTo(current - 1));\r\n            next.addEventListener(\"click\", () => goTo(current + 1));\r\n            dots.forEach((dot, index) => dot.addEventListener(\"click\", () => goTo(index)));\r\n\r\n            carousel.addEventListener(\"keydown\", (event) => {\r\n                if (event.key === \"ArrowLeft\") {\r\n                    event.preventDefault();\r\n                    goTo(current - 1);\r\n                }\r\n                if (event.key === \"ArrowRight\") {\r\n                    event.preventDefault();\r\n                    goTo(current + 1);\r\n                }\r\n                if (event.key === \"Home\") {\r\n                    event.preventDefault();\r\n                    goTo(0);\r\n                }\r\n                if (event.key === \"End\") {\r\n                    event.preventDefault();\r\n                    goTo(slides.length - 1);\r\n                }\r\n            });\r\n\r\n            carousel.addEventListener(\"pointerdown\", (event) => {\r\n                if (event.target.closest(\"button\")) return;\r\n                pointerStart = event.clientX;\r\n                pointerDelta = 0;\r\n                carousel.classList.add(\"sce-is-dragging\");\r\n                carousel.setPointerCapture(event.pointerId);\r\n                window.clearInterval(timer);\r\n            });\r\n\r\n            carousel.addEventListener(\"pointermove\", (event) => {\r\n                if (!carousel.hasPointerCapture(event.pointerId)) return;\r\n                pointerDelta = event.clientX - pointerStart;\r\n            });\r\n\r\n            const finishDrag = (event) => {\r\n                if (!carousel.hasPointerCapture(event.pointerId)) return;\r\n                carousel.releasePointerCapture(event.pointerId);\r\n                carousel.classList.remove(\"sce-is-dragging\");\r\n                if (Math.abs(pointerDelta) > 45) {\r\n                    goTo(current + (pointerDelta < 0 ? 1 : -1));\r\n                } else {\r\n                    startAutoplay();\r\n                }\r\n            };\r\n\r\n            carousel.addEventListener(\"pointerup\", finishDrag);\r\n            carousel.addEventListener(\"pointercancel\", finishDrag);\r\n            carousel.addEventListener(\"mouseenter\", () => window.clearInterval(timer));\r\n            carousel.addEventListener(\"mouseleave\", startAutoplay);\r\n            carousel.addEventListener(\"focusin\", () => window.clearInterval(timer));\r\n            carousel.addEventListener(\"focusout\", startAutoplay);\r\n            document.addEventListener(\"visibilitychange\", startAutoplay);\r\n\r\n            render();\r\n            startAutoplay();\r\n        });\r\n    })();\r\n<\/script>\r\n\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>Smart Capital Engineering Our Projects A curated collection shaped by engineering precision, purposeful design and enduring quality. PROJECT \/ 01 PROJECT \/ 02 PROJECT \/ 03 PROJECT \/ 04 PROJECT \/ 05 PROJECT \/ 06 PROJECT \/ 07 PROJECT \/ 08 PROJECT \/ 09 PROJECT \/ 10 PROJECT \/ 11 PROJECT \/ 12 PROJECT \/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-83","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/smartcapitaleng.com\/ar\/wp-json\/wp\/v2\/pages\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartcapitaleng.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smartcapitaleng.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smartcapitaleng.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smartcapitaleng.com\/ar\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":100,"href":"https:\/\/smartcapitaleng.com\/ar\/wp-json\/wp\/v2\/pages\/83\/revisions"}],"predecessor-version":[{"id":599,"href":"https:\/\/smartcapitaleng.com\/ar\/wp-json\/wp\/v2\/pages\/83\/revisions\/599"}],"wp:attachment":[{"href":"https:\/\/smartcapitaleng.com\/ar\/wp-json\/wp\/v2\/media?parent=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}