{"id":1379,"date":"2025-10-04T14:55:57","date_gmt":"2025-10-04T14:55:57","guid":{"rendered":"https:\/\/jacobs-tech.com\/?page_id=1379"},"modified":"2025-11-03T12:00:26","modified_gmt":"2025-11-03T12:00:26","slug":"facility-management","status":"publish","type":"page","link":"https:\/\/suffix.com\/ar\/facility-management","title":{"rendered":"\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u0641\u0642"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Fixed Background Parallax Scroll<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n screens: {\r\n 'md': '768px', \/\/ Tablet\r\n 'lg': '1025px', \/\/ Laptop\r\n 'xl': '1367px', \/\/ Desktop (1367px and up)\r\n },\r\n fontFamily: {\r\n 'favorit': ['favorit-regular', 'sans-serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n @font-face {\r\n font-family: 'favorit-regular';\r\n src: url('https:\/\/suffix.com\/wp-content\/themes\/jacobstech\/fonts\/favorit-regular.woff2') format('woff2'),\r\n url('https:\/\/suffix.com\/wp-content\/themes\/jacobstech\/fonts\/favorit-regular.woff') format('woff');\r\n font-weight: normal;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n body {\r\n overflow-x: hidden;\r\n background-color: #0d0d0d;\r\n font-family: 'favorit-regular', sans-serif;\r\n }\r\n\r\n #parallax-bg { \r\n position: absolute;\r\n top: 0; \r\n left: 0; \r\n width: 100%; \r\n height: 100%; \r\n z-index: 1; \r\n overflow: hidden; \r\n background-color: #000; \r\n }\r\n\r\n #bg-image {\r\n background-image: url('https:\/\/suffix.com\/wp-content\/uploads\/2025\/09\/Facility-Management--scaled.jpeg');\r\n background-size: cover;\r\n background-position: center center;\r\n width: 100%;\r\n height: 100%;\r\n will-change: filter, opacity;\r\n }\r\n\r\n #bg-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: #000000;\r\n opacity: 0.5;\r\n will-change: opacity;\r\n }\r\n\r\n #hero-content-scroll-area {\r\n position: relative;\r\n z-index: 10;\r\n min-height: 101vh; \r\n background-color: transparent;\r\n }\r\n\r\n #parallax-grid {\r\n position: sticky; \r\n top: 0; \r\n height: 100vh; \r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n #motion-content.no-transform {\r\n transform: none !important;\r\n }\r\n\r\n \/* Ensure right column content doesn't overflow *\/\r\n #motion-content {\r\n max-height: 70vh;\r\n overflow: visible;\r\n }\r\n\r\n @media (min-width: 1025px) {\r\n #motion-content {\r\n max-height: 60vh;\r\n }\r\n }\r\n\r\n @media (min-width: 1367px) {\r\n #motion-content {\r\n max-height: 55vh;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-900\">\r\n\r\n <!-- 1. FIXED PARALLAX BACKGROUND -->\r\n <div id=\"parallax-bg\">\r\n <div id=\"bg-image\">\r\n <div id=\"bg-overlay\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2. SCROLLABLE HERO CONTENT AREA -->\r\n <div id=\"hero-content-scroll-area\">\r\n \r\n <!-- The Grid that houses the two text columns -->\r\n <div id=\"parallax-grid\" class=\"container mx-auto max-w-7xl px-[30px] lg:px-[50px]\">\r\n <div id=\"grid-content\" class=\"w-full grid grid-cols-1 gap-[60px] mb-[3vh] md:mb-[4vh] \r\n lg:grid-cols-[45%_55%] lg:gap-12 lg:mb-[10vh] \r\n xl:grid-cols-[40%_60%] xl:gap-16 xl:mb-[12vh]\">\r\n \r\n <!-- LEFT COLUMN -->\r\n <div id=\"left-column\" class=\"flex items-center pt-[120px] lg:pt-0 lg:h-screen z-20 lg:pr-8\">\r\n <h1 class=\"text-white uppercase font-bold leading-none tracking-[0.09em] m-0 font-favorit\r\n text-[36px] \r\n md:text-[52px] \r\n lg:text-[52px] \r\n xl:text-[64px]\">\r\n Facility Management\r\n <\/h1>\r\n <\/div>\r\n\r\n <!-- RIGHT COLUMN -->\r\n <div id=\"motion-content\" class=\"text-white self-auto lg:self-end font-favorit\r\n text-[18px] leading-[1.6] font-normal\r\n md:text-[24px] md:leading-[1.5]\r\n lg:text-[22px] lg:leading-[1.5]\r\n xl:text-[26px] xl:leading-[1.5]\r\n max-w-none lg:max-w-full xl:max-w-[95%]\">\r\n <p class=\"mb-5 lg:mb-[25px] xl:mb-[30px]\">\r\n With strong experience in end-to-end facility management in Kuwait, we ensure your venue operates with efficiency, care, and profitability. From recruiting and training staff to driving sales and reaching targets, we take ownership of every operational detail so you can focus on the bigger picture.\r\n <\/p>\r\n \r\n <p class=\"mb-0\">\r\n\t\t\t\t\t Our team oversees maintenance, scheduling, customer service, marketing, and financial reporting, guaranteeing that your facility not only runs seamlessly but also continues to grow in performance and value. Backed by proven systems and deep market expertise, we strike the perfect balance between world-class standards and understanding the market.\r\n\t\t\t\t\t \r\n\t\t\t\t\t <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- JAVASCRIPT SCROLL LOGIC -->\r\n <script>\r\n const MOTION_SPEED = 1.4;\r\n const VIEWPORT_EFFECT_END_RATIO = 0.65;\r\n const MAX_BLUR = 12;\r\n const MAX_OVERLAY_OPACITY = 0.95;\r\n\r\n const heroWrapper = document.getElementById('hero-content-scroll-area');\r\n const bgImage = document.getElementById('bg-image');\r\n const bgOverlay = document.getElementById('bg-overlay');\r\n const motionContent = document.getElementById('motion-content');\r\n\r\n const calculateEffectRatio = (rectTop) => {\r\n const viewportHeight = window.innerHeight;\r\n const effectRange = viewportHeight * VIEWPORT_EFFECT_END_RATIO; \r\n const scrollDistance = -rectTop; \r\n let ratio = scrollDistance \/ effectRange;\r\n return Math.max(0, Math.min(1, ratio));\r\n };\r\n\r\n const isMobileViewport = () => {\r\n return window.innerWidth <= 1024;\r\n };\r\n\r\n const handleScrollEffects = () => {\r\n if (!heroWrapper || !bgImage || !bgOverlay || !motionContent) {\r\n return;\r\n }\r\n\r\n const rect = heroWrapper.getBoundingClientRect();\r\n const scrollRatio = calculateEffectRatio(rect.top);\r\n\r\n \/\/ Background Effects (Blur and Overlay)\r\n const currentBlur = scrollRatio * MAX_BLUR;\r\n bgImage.style.filter = `blur(${currentBlur}px)`;\r\nconst baseOpacity = 0.85; \/\/ always visible from start\r\nconst currentOpacity = baseOpacity + (scrollRatio * (MAX_OVERLAY_OPACITY - baseOpacity));\r\n\r\n \/\/const currentOpacity = scrollRatio * MAX_OVERLAY_OPACITY;\r\n \/\/bgOverlay.style.opacity = currentOpacity;\r\n\r\n \/\/ Content Motion Effect (Right Column Lift)\r\n if (!isMobileViewport()) {\r\n const totalMovementRange = window.innerHeight * MOTION_SPEED;\r\n const currentLift = scrollRatio * totalMovementRange;\r\n \r\n motionContent.style.transition = 'transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1)'; \r\n motionContent.style.transform = `translateY(-${currentLift}px)`;\r\n motionContent.style.willChange = 'transform';\r\n motionContent.classList.remove('no-transform');\r\n } else {\r\n motionContent.style.transform = 'none';\r\n motionContent.style.willChange = 'auto';\r\n motionContent.classList.add('no-transform');\r\n }\r\n };\r\n\r\n window.addEventListener('scroll', handleScrollEffects);\r\n window.addEventListener('resize', handleScrollEffects);\r\n \r\n document.addEventListener('DOMContentLoaded', () => {\r\n handleScrollEffects();\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<div class=\"elementor-element elementor-element-8c9a356 e-con-full e-flex e-con e-parent\" data-id=\"8c9a356\" data-element_type=\"container\" data-settings=\"{"_ob_use_container_extras":"no","_ob_column_hoveranimator":"no","_ob_glider_is_slider":"no","_ob_column_has_pseudo":"no"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a75a050 ob-has-background-overlay elementor-widget elementor-widget-spacer\" data-id=\"a75a050\" data-element_type=\"widget\" data-settings=\"{"_ob_spacerat_use":"no","_ob_perspektive_use":"no","_ob_widget_stalker_use":"no","_ob_poopart_use":"yes","_ob_shadough_use":"no","_ob_allow_hoveranimator":"no"}\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e929958 ob-harakiri-inherit ob-has-background-overlay elementor-widget elementor-widget-heading\" data-id=\"e929958\" data-element_type=\"widget\" data-settings=\"{"_ob_use_harakiri":"yes","_ob_harakiri_writing_mode":"inherit","_ob_harakiri_text_clip":"none","_ob_perspektive_use":"no","_ob_widget_stalker_use":"no","_ob_poopart_use":"yes","_ob_shadough_use":"no","_ob_allow_hoveranimator":"no"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Some of Our Work<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de38892 ob-has-background-overlay elementor-widget elementor-widget-spacer\" data-id=\"de38892\" data-element_type=\"widget\" data-settings=\"{"_ob_spacerat_use":"no","_ob_perspektive_use":"no","_ob_widget_stalker_use":"no","_ob_poopart_use":"yes","_ob_shadough_use":"no","_ob_allow_hoveranimator":"no"}\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-233b5e2 ob-has-background-overlay elementor-widget elementor-widget-jj_events_featured\" data-id=\"233b5e2\" data-element_type=\"widget\" data-settings=\"{"_ob_perspektive_use":"no","_ob_widget_stalker_use":"no","_ob_poopart_use":"yes","_ob_shadough_use":"no","_ob_allow_hoveranimator":"no"}\" data-widget_type=\"jj_events_featured.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- DEBUG IDs: --><div class=\"jj-events-widget featured-3\" style=\"--jj-gap:32px; --jj-img-h:340px;\"><div class=\"luxury-grid featured-grid\"><div class=\"jj-no-results\">No events selected. Edit the widget to choose up to 3 events.<\/div><\/div><\/div>\t\t\t\t<\/div>\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>Fixed Background Parallax Scroll Facility Management With strong experience in end-to-end facility management in Kuwait, we ensure your venue operates with efficiency, care, and profitability.…<\/p>","protected":false},"author":1,"featured_media":346,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_eb_attr":"","_customify_content_layout":"full-stretched","_customify_sidebar":"content","_customify_page_header_display":"default","_customify_disable_header":"","_customify_disable_header_top":"","_customify_disable_header_main":"","_customify_disable_header_bottom":"","_customify_disable_page_title":"","_customify_disable_content_vertical_padding":"","_customify_disable_footer_top":"","_customify_disable_footer_main":"","_customify_disable_footer_bottom":"","_customify_breadcrumb_display":"","_customify_header_transparent_display":"","footnotes":""},"class_list":["post-1379","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages\/1379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/comments?post=1379"}],"version-history":[{"count":6,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages\/1379\/revisions"}],"predecessor-version":[{"id":3565,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages\/1379\/revisions\/3565"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/media\/346"}],"wp:attachment":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/media?parent=1379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}