{"id":715,"date":"2025-06-01T02:36:46","date_gmt":"2025-06-01T02:36:46","guid":{"rendered":"https:\/\/nationalcement-ar.elbarzah.com\/?page_id=715"},"modified":"2025-09-17T08:38:52","modified_gmt":"2025-09-17T08:38:52","slug":"front-page-2","status":"publish","type":"page","link":"https:\/\/nationalcement.ae\/ar\/","title":{"rendered":"front page"},"content":{"rendered":"\n<div data-forced-dir=\"rtl\" id=\"hero-message-69f470bd91e5a\" class=\"nationalcement-hero-message w-full\">\n    <!-- \n    \/\/ -----------------------------------------------------\n    \/\/ Hero Section\n    \/\/ -----------------------------------------------------\n    \/\/ Full-width background image with overlay gradient\n    \/\/ Contains main heading, subtitle and CTA buttons\n    -->\n    <section \n        class=\"relative flex flex-col py-24 items-center w-full h-[850px] bg z-0\" \n        style=\"background-image: url(&#039;https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/06\/04-Last-1-scaled-1.jpg&#039;);\">\n        \n        <!-- Gradient overlay for better text readability -->\n        <div class=\"absolute w-full h-full inset-0 bg-gradient-to-b from-black\/80 to-black\/50 -z-10\"><\/div>\n\n        <!-- Main content container -->\n        <div class=\"flex flex-col w-full lg:w-2\/3 gap-12 tracking-widest leading-loose mx-auto px-4\">\n            <!-- Main heading with responsive typography -->\n            <h1 class=\"text-2xl text-center lg:text-right lg:text-7xl font-medium uppercase text-white\">\n                \u0646\u0628\u0646\u064a<strong><strong> <\/strong>\u0627\u0644\u0648\u0637\u0646<\/strong>.<br>\u0646\u0628\u0646\u064a <strong>\u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644<\/strong>.            <\/h1>\n            \n            <!-- Subtitle with responsive typography -->\n            <h3 class=\"text-lg lg:text-right lg:text-2xl font-medium uppercase text-white\">\n                \u0641\u064a \u0627\u0644\u0634\u0631\u0643\u0629 \u0627\u0644\u0648\u0637\u0646\u064a\u0629 \u0644\u0644\u0623\u0633\u0645\u0646\u062a\u060c \u0646\u0644\u062a\u0632\u0645 \u0628\u062a\u0634\u0643\u064a\u0644 \u0623\u0633\u0627\u0633 \u0627\u0644\u063a\u062f \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u062c\u0648\u062f\u0629\u060c \u0648\u0627\u0644\u0627\u0633\u062a\u062f\u0627\u0645\u0629\u060c \u0648\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631. \u0645\u0639\u0627\u064b\u060c \u0646\u0628\u0646\u064a \u0627\u0644\u0647\u064a\u0627\u0643\u0644 \u0627\u0644\u062a\u064a \u062a\u062f\u0639\u0645 \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u0627\u062a \u0648\u062a\u0642\u0648\u062f \u0627\u0644\u062a\u0642\u062f\u0645.            <\/h3>\n\n            <!-- Call-to-action buttons container -->\n            <div class=\"flex flex-col lg:flex-row items-center text-white gap-4 w-full\">\n                <!-- Primary CTA button (white background, primary text) -->\n                                    <a href=\"#\" class=\"action-link inline-flex items-center gap-2 px-3 py-2 text-lg lg:text-xl font-medium text-primary border border-primary bg-white transition duration-300 hover:bg-white\/90\">\n                        <span>\u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062b\u0645\u0631\u064a\u0646<\/span>\n                        <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <!-- Circle -->\n                            <circle cx=\"50\" cy=\"50\" r=\"45\" class=\" stroke-primary\" stroke-width=\"4\" fill=\"none\"\/>\n                            <!-- Downward Arrowhead -->\n                            <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\" stroke-primary\" stroke-width=\"4\"\/>\n                            <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\" stroke-primary\" stroke-width=\"4\"\/>\n                        <\/svg>\n                    <\/a>\n                                \n                <!-- Secondary CTA button (primary background, white text) -->\n                                    <a href=\"\/\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a-\u0648\u0627\u0644\u062e\u062f\u0645\u0627\u062a\/\" class=\"action-link inline-flex items-center gap-2 px-3 py-2 text-lg lg:text-xl font-medium text-white border border-white bg-primary transition duration-300 hover:bg-primary\/90\">\n                        <span>\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0648\u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/span>\n                        <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <!-- Circle -->\n                            <circle cx=\"50\" cy=\"50\" r=\"45\" class=\" stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                            <!-- Downward Arrowhead -->\n                            <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\" stroke-white\" stroke-width=\"4\"\/>\n                            <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\" stroke-white\" stroke-width=\"4\"\/>\n                        <\/svg>\n                    <\/a>\n                                \n                <!-- Tertiary CTA button (secondary background, white text) -->\n                                    <a href=\"\/\u0627\u0644\u0625\u0633\u062a\u062f\u0627\u0645\u0629\/\" class=\"action-link inline-flex items-center gap-2 px-3 py-2 text-lg lg:text-xl font-medium text-white border border-white bg-secondary transition duration-300 hover:bg-secondary\/90\">\n                        <span>\u062e\u062f\u0645\u0627\u062a \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u062f\u0648\u064a\u0631<\/span>\n                        <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <!-- Circle -->\n                            <circle cx=\"50\" cy=\"50\" r=\"45\" class=\" stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                            <!-- Downward Arrowhead -->\n                            <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\" stroke-white\" stroke-width=\"4\"\/>\n                            <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\" stroke-white\" stroke-width=\"4\"\/>\n                        <\/svg>\n                    <\/a>\n                            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \n    \/\/ -----------------------------------------------------\n    \/\/ Director Message Section\n    \/\/ -----------------------------------------------------\n    \/\/ Contains director image, message content and optional CTA\n    \/\/ Positioned with negative margin to overlap with hero section\n    -->\n    <div class=\"rtl\">\n        <div class=\"relative pt-8 flex flex-col h-full pb-20 -mt-40 bg-gradient-to-b from-secondary\/0 via-secondary\/10 via-10% to-accent\/0 items-center z-0\">\n            <div class=\"flex flex-col lg:flex-row w-full md:w-2\/3 gap-8 mx-auto px-4\">\n                <!-- Director image with card overlay -->\n                                <div class=\"w-72 lg:w-80\">\n                    <div class=\"w-[17.9rem] h-[22rem] flex shadow bg-black rtl\">\n                        <div class=\"relative flex flex-col w-full h-full grow z-0\">\n                            <!-- Floating text box -->\n                            <div class=\"absolute right-0 bottom-0 w-12 h-12 bg-primary text-white text-2xl font-bold flex items-center justify-center z-50\">\n                                <!--  -->\n                            <\/div>\n\n                            <!-- Image with outline -->\n                            <img decoding=\"async\" \n                                src=\"http:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/06\/Mohamed-Abdullah-A.-Al-Ghurair-1-1.jpg\" \n                                class=\"inset-0 object-contain w-full h-full outline outline-white\/90\" \n                                alt=\"\u0645\u062d\u0645\u062f \u0639\u0628\u062f \u0627\u0644\u0644\u0647 \u0622\u0644 \u063a\u0631\u064a\u0631\"\n                            >\n\n                            <!-- Bottom text card -->\n                            <div class=\"absolute -bottom-[3rem] left-0 flex flex-col text-white bg-black w-[90%] min-h-16 pr-6 py-4\">\n                                <p class=\"text-sm font-bold\">\u0645\u062d\u0645\u062f \u0639\u0628\u062f \u0627\u0644\u0644\u0647 \u0622\u0644 \u063a\u0631\u064a\u0631<\/p>\n                                                                    <p class=\"text-xs\"> \u0627\u0644\u0631\u0626\u064a\u0633 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a<\/p>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                                \n                <!-- Message content area -->\n                <div class=\"w-full p-4 pt-12 md:p-0 md:pt-12\">\n                    <div>\n                        <h1 class=\"uppercase text-xl md:text-3xl font-semibold text-secondary lg:!text-white\">\n                            \u0631\u0624\u064a\u0629 \u0645\u0646 \u0623\u062c\u0644 \u0627\u0644\u0648\u0637\u0646                        <\/h1>\n                        <p class=\"uppercase pt-2 md:pt-0 text-sm font-semibold text-secondary lg:!text-white\">\n                            \u0631\u0633\u0627\u0644\u0629 \u0634\u062e\u0635\u064a\u0629 \u062a\u0639\u0643\u0633 \u0631\u0624\u064a\u0629 \u0648\u0627\u0644\u062a\u0632\u0627\u0645 \u0627\u0644\u0645\u0624\u0633\u0633                        <\/p>\n                    <\/div>\n                    \n                    <!-- Message text with stylized quotes and optional CTA -->\n                    <div class=\"pt-12 font-medium text-base text-secondary space-y-8\">\n                        <!-- Quote text with decorative quotation marks - exactly as in Svelte -->\n                        <p class=\"quotes leading-relaxed tracking-wider text-lg px-4 py-2 md:px-6 md:py-2\">\n                            \u062a\u0623\u0633\u0633\u062a \u0634\u0631\u0643\u0629 \u0623\u0633\u0645\u0646\u062a \u0627\u0644\u0648\u0637\u0646\u064a\u0629 \u0628\u0631\u0624\u064a\u0629 \u062a\u062f\u0639\u0645 \u0646\u0645\u0648 \u0648\u062a\u0637\u0648\u0631 \u062f\u0648\u0644\u0629 \u0627\u0644\u0625\u0645\u0627\u0631\u0627\u062a\u060c \u0643\u0623\u0645\u0629 \u063a\u0646\u064a\u0629 \u0628\u0627\u0644\u0625\u0645\u0643\u0627\u0646\u0627\u062a \u0648\u0627\u0644\u0637\u0645\u0648\u062d\u0627\u062a. \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0633\u062a\u062b\u0645\u0627\u0631 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0645\u062d\u0644\u064a\u0629 \u0648\u0641\u0647\u0645 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u0633\u0648\u0642\u060c \u0644\u0645 \u0646\u0628\u0646\u0650 \u0641\u0642\u0637 \u0634\u0631\u0643\u0629\u060c \u0628\u0644 \u0633\u0627\u0647\u0645\u0646\u0627 \u0641\u064a \u0627\u0644\u062a\u0642\u062f\u0645. \u0645\u0646 \u0628\u062f\u0627\u064a\u0627\u062a\u0646\u0627 \u0627\u0644\u0645\u062a\u0648\u0627\u0636\u0639\u0629 \u0641\u064a \u0639\u0627\u0645 1968 \u0625\u0644\u0649 \u0628\u0639\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0623\u0643\u062b\u0631 \u0634\u0647\u0631\u0629 \u0641\u064a \u0627\u0644\u0645\u0646\u0637\u0642\u0629\u060c \u0646\u0639\u062a\u0632 \u0628\u062c\u0630\u0648\u0631\u0646\u0627 \u0641\u064a \u0627\u0644\u062a\u0645\u064a\u0632\u060c \u0648\u0627\u0644\u0645\u0631\u0648\u0646\u0629\u060c \u0648\u0627\u0644\u0627\u0644\u062a\u0632\u0627\u0645 \u0628\u0628\u0646\u0627\u0621 \u0645\u0633\u062a\u0642\u0628\u0644 \u0623\u0641\u0636\u0644 \u0644\u0644\u0623\u062c\u064a\u0627\u0644 \u0627\u0644\u0642\u0627\u062f\u0645\u0629. \u0645\u0639 \u0627\u0633\u062a\u0645\u0631\u0627\u0631\u0646\u0627 \u0641\u064a \u0627\u0644\u062a\u0648\u0633\u0639 \u0648\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631\u060c \u062a\u0642\u0648\u062f\u0646\u0627 \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u062c\u0648\u0647\u0631\u064a\u0629 \u0645\u062b\u0644 \u0627\u0644\u062c\u0648\u062f\u0629\u060c \u0648\u0627\u0644\u0646\u0632\u0627\u0647\u0629\u060c \u0648\u0627\u0644\u0627\u0644\u062a\u0632\u0627\u0645 \u0627\u0644\u0631\u0627\u0633\u062e \u062a\u062c\u0627\u0647 \u0634\u0639\u0628\u0646\u0627 \u0648\u0648\u0637\u0646\u0646\u0627. \u0645\u0639\u064b\u0627\u060c \u0646\u0628\u0646\u064a \u0627\u0644\u0647\u064a\u0627\u0643\u0644 \u0627\u0644\u062a\u064a \u062a\u0634\u0643\u0644 \u0627\u0644\u062d\u064a\u0627\u0629 \u0648\u062a\u0644\u0647\u0645 \u0627\u0644\u0623\u062d\u0644\u0627\u0645                        <\/p>\n                        \n                        <!-- Message section CTA link - now with toggle control -->\n                                                    <a href=\"\/\u0645\u0646-\u0646\u062d\u0646\/\" class=\"action-link inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-primary border border-primary bg-white transition duration-300 hover:bg-white\/90\">\n                                <span>\u0625\u0642\u0631\u0623 \u0627\u0644\u0631\u0633\u0627\u0644\u0629<\/span>\n                                <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <!-- Circle -->\n                                    <circle cx=\"50\" cy=\"50\" r=\"45\" class=\" stroke-primary\" stroke-width=\"4\" fill=\"none\"\/>\n                                    <!-- Downward Arrowhead -->\n                                    <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\" stroke-primary\" stroke-width=\"4\"\/>\n                                    <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\" stroke-primary\" stroke-width=\"4\"\/>\n                                <\/svg>\n                            <\/a>\n                                            <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<style>    \n    \/* Color system variables *\/\n    .nationalcement-hero-message .bg-primary {\n        background-color: #c81431; \/* Brand primary red *\/\n    }\n    \n    .nationalcement-hero-message .text-primary {\n        color: #c81431;\n    }\n    \n    .nationalcement-hero-message .border-primary {\n        border-color: #c81431;\n    }\n    \n    .nationalcement-hero-message .stroke-primary {\n        stroke: #c81431;\n    }\n    \n    .nationalcement-hero-message .bg-secondary {\n        background-color: #1a202c; \/* Brand secondary dark blue *\/\n    }\n    \n    .nationalcement-hero-message .text-secondary {\n        color: #1a202c;\n    }\n    \n    \/* Background implementation exactly like the Svelte component *\/\n    .nationalcement-hero-message .bg { \n        background: var(--bg-img) no-repeat center center fixed; \n        -webkit-background-size: cover;\n        -moz-background-size: cover;\n        -o-background-size: cover;\n        background-size: cover;\n    }\n    \n    .nationalcement-hero-message section {\n        --bg-img: url('https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/06\/04-Last-1-scaled-1.jpg');\n    }\n    \n    \/* Quotes styling exactly as in the Svelte component *\/\n    .nationalcement-hero-message .quotes {\n        position: relative;\n        display: inline-block;\n    }\n\n    .nationalcement-hero-message .quotes::before {\n        content: \"\u201d\";\n        font-size: 2.5rem;\n        color: #c81431;\n        position: absolute;\n        top: -1.5rem;\n        left: 0rem;\n    }\n\n    .nationalcement-hero-message .quotes::after {\n        content: \"\u201d\";\n        font-size: 2.5rem;\n        color: #c81431;\n        position: absolute;\n        bottom: -1.5rem;\n        right: 0;\n    }\n\n    .nationalcement-hero-message .rtl .quotes::before {\n        content: \"\u201d\";\n        left: auto;\n        right: 0rem;\n        direction: rtl;\n    }\n\n    .nationalcement-hero-message .rtl .quotes::after {\n        content: \"\u201d\";\n        right: auto;\n        left: 0;\n        direction: rtl;\n    }\n    \n    \/* Animation keyframes for entrance effects *\/\n    @keyframes flyUp {\n        from {\n            transform: translateY(50px);\n            opacity: 0;\n        }\n        to {\n            transform: translateY(0);\n        }\n    }\n    \n    @keyframes flyDown {\n        from {\n            transform: translateY(-50px);\n            opacity: 0;\n        }\n        to {\n            transform: translateY(0);\n        }\n    }\n    \n    @keyframes fadeIn {\n        from {\n            opacity: 0;\n        }\n        to {\n            opacity: 1;\n        }\n    }\n    \n    \/* Apply entrance animations to block elements *\/\n    .nationalcement-hero-message section {\n        animation: flyUp 800ms ease-out forwards;\n    }\n    \n    .nationalcement-hero-message section > div:not(.absolute) {\n        animation: fadeIn 1000ms ease-out forwards;\n    }\n    \n    .nationalcement-hero-message .relative.pt-8 {\n        animation: flyDown 1000ms ease-out forwards;\n    }\n    \n    .nationalcement-hero-message .relative.pt-8 > div {\n        animation: fadeIn 1200ms ease-out forwards;\n    }\n<\/style>\n\n\n\n<div data-forced-dir=\"rtl\" data-forced-dir=\"rtl\" data-forced-dir=\"rtl\" id=\"info-69f470bd92ddb\" class=\"nationalcement-info w-full\">\n    <section class=\"relative w-full flex items-center justify-center mt-20 p-2 md:p-0 bg-gray-100\">\n        <!-- Background overlay -->\n        <div class=\"absolute w-full h-full bg-white inset-0 bg-opacity-90 -z-10\"><\/div>\n        \n        <!-- Main content container -->\n        <div class=\"flex flex-col w-full md:w-2\/3 py-16 gap-8 text-right\">\n            <!-- Section header -->\n            <h1 class=\"text-4xl font-semibold text-secondary uppercase\">\n                \u0625\u0631\u062b \u0645\u0646 \u0627\u0644\u062a\u0645\u064a\u0632            <\/h1>\n            \n            <!-- Subheader -->\n            <div class=\"relative text-2xl font-medium text-primary uppercase subheader\">\n                \u0645\u0646\u0630 \u0639\u0627\u0645 1968            <\/div>\n            \n            <!-- Main content -->\n            <div class=\"info-content\">\n                <p>\u062a\u0623\u0633\u0633\u062a \u062a\u062d\u062a \u0625\u0634\u0631\u0627\u0641 \u0633\u0645\u0648 \u0627\u0644\u0634\u064a\u062e \u0631\u0627\u0634\u062f \u0628\u0646 \u0633\u0639\u064a\u062f \u0622\u0644 \u0645\u0643\u062a\u0648\u0645\u060c \u0643\u0627\u0646\u062a \u0634\u0631\u0643\u0629 \u0623\u0633\u0645\u0646\u062a \u0627\u0644\u0648\u0637\u0646\u064a\u0629 \u0631\u0643\u064a\u0632\u0629 \u0645\u0646 \u0631\u0643\u0627\u0626\u0632 \u0627\u0644\u062a\u0646\u0645\u064a\u0629 \u0641\u064a \u062f\u0648\u0644\u0629 \u0627\u0644\u0625\u0645\u0627\u0631\u0627\u062a. \u0645\u0646 \u062f\u0639\u0645 \u0645\u0634\u0627\u0631\u064a\u0639 \u0628\u0627\u0631\u0632\u0629 \u0645\u062b\u0644 \u0625\u0643\u0633\u0628\u0648 2020 \u0625\u0644\u0649 \u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0627\u0633\u062a\u062f\u0627\u0645\u0629\u060c \u0646\u0648\u0627\u0635\u0644 \u0628\u0646\u0627\u0621 \u0645\u0633\u062a\u0642\u0628\u0644 \u0623\u0641\u0636\u0644.<\/p>            <\/div>\n            \n            <!-- Optional action link -->\n                        <div class=\"action-link-container\">\n                <a href=\"\/\u0645\u0646-\u0646\u062d\u0646\/\" class=\"action-link inline-flex items-center gap-2 px-6 py-3 text-xl font-medium text-white bg-primary border border-white\">\n                    \u0627\u0633\u062a\u0643\u0634\u0641 \u0642\u0635\u062a\u0646\u0627                    <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <!-- Circle -->\n                        <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                        <!-- Downward Arrowhead -->\n                        <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                        <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                    <\/svg>\n                <\/a>\n            <\/div>\n                    <\/div>\n    <\/section>\n<\/div>\n\n<style>\n    \/* Scoped styles for info block *\/\n    #info-69f470bd92ddb .text-primary {\n        color: #c81431; \/* Brand primary red *\/\n    }\n\n    #info-69f470bd92ddb .subheader::after {\n        content: '';\n        position: absolute;\n        bottom: -8px;\n                right: 0;\n                width: 30px;\n        height: 2px;\n        background-color: #c81431; \/* Brand primary red *\/\n    }\n\n    #info-69f470bd92ddb .text-secondary {\n        color: #1a202c; \/* Brand secondary dark blue *\/\n    }\n    \n    #info-69f470bd92ddb .bg-primary {\n        background-color: #c81431; \/* Brand primary red *\/\n    }\n    \n    #info-69f470bd92ddb .border-primary {\n        border-color: #c81431;\n    }\n    \n    #info-69f470bd92ddb .stroke-primary {\n        stroke: #c81431;\n    }\n    \n    \/* Action Link hover effects *\/\n    #info-69f470bd92ddb .action-link {\n        transition: all 0.3s ease;\n        position: relative;\n        overflow: hidden;\n    }\n\n    #info-69f470bd92ddb .action-link:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n    }\n    \n    #info-69f470bd92ddb .action-link:after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n                right: 0;\n                width: 100%;\n        height: 0;\n        background-color: rgba(255,255,255,0.1);\n        transition: all 0.3s ease;\n        z-index: -1;\n    }\n    \n    #info-69f470bd92ddb .action-link:hover:after {\n        height: 100%;\n    }\n    \n    \/* Content styling *\/\n    #info-69f470bd92ddb .info-content {\n        line-height: 1.6;\n    }\n    \n    #info-69f470bd92ddb .info-content p {\n        margin-bottom: 1rem;\n    }\n    \n    #info-69f470bd92ddb .info-content a {\n        color: #c81431;\n        text-decoration: underline;\n    }\n    \n    \/* Animation keyframes for entrance effects *\/\n        @keyframes slideUp {\n        from { transform: translateY(20px) translateX(-10px); opacity: 0; }\n        to { transform: translateY(0) translateX(0); opacity: 1; }\n    }\n        \n    \/* Apply animations to elements *\/\n    #info-69f470bd92ddb h1 {\n        animation: slideUp 0.6s ease-out forwards;\n    }\n    \n    #info-69f470bd92ddb .text-xl {\n        animation: slideUp 0.6s ease-out forwards;\n        animation-delay: 0.2s;\n        opacity: 0;\n    }\n    \n    #info-69f470bd92ddb .info-content {\n        animation: slideUp 0.6s ease-out forwards;\n        animation-delay: 0.4s;\n        opacity: 0;\n    }\n    \n    #info-69f470bd92ddb .action-link-container {\n        animation: slideUp 0.6s ease-out forwards;\n        animation-delay: 0.6s;\n        opacity: 0;\n    }\n<\/style>\n\n\n<!-- Projects Section - Matching Svelte Component -->\n<section data-forced-dir=\"rtl\" data-forced-dir=\"rtl\" data-forced-dir=\"rtl\" id=\"projects-section-69f470bd9d386\" class=\"relative w-full flex items-center justify-center mt-10 z-0 bg-white p-2 md:p-0\">\n    <!-- Background overlay -->\n    <div class=\"absolute w-full h-full bg-white inset-0 bg-opacity-90 -z-10\"><\/div>\n    \n    <!-- Main content wrapper - matches Svelte width -->\n    <div class=\"flex flex-col w-full md:w-2\/3 py-16 gap-8 text-right\">\n        <!-- Section header - exactly like Svelte -->\n        <h1 class=\"text-4xl font-semibold text-secondary uppercase\">\u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0639\u0627\u0644\u0645<\/h1>\n        \n        <!-- Subheader with underline -->\n        <div class=\"subheader\">\n            <p class=\"text-xl font-medium text-primary\">\u0639\u0628\u0631 \u0627\u0644\u0645\u0646\u0637\u0642\u0629<\/p>\n            <div class=\"h-1 w-12 mt-2 bg-primary\"><\/div>\n        <\/div>\n        \n        <!-- Main content -->\n        <div class=\"content-area\">\n                    <\/div>\n        \n        <!-- Projects grid - exactly like Svelte -->\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-8\">\n                                                <!-- Card with overlay - match to Svelte component -->\n\n                    <a href=\"https:\/\/nationalcement.ae\/ar\/project\/%d9%85%d8%aa%d8%b1%d9%88-%d8%af%d8%a8%d9%8a\/\" class=\"card-with-overlay relative overflow-hidden shadow-md h-80 group\">\n                                                    <!-- Background image -->\n                            <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-all duration-700 group-hover:scale-105\" \n                                 style=\"background-image: url('https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/xk1070r61k81eecpd.jpg');\"><\/div>\n                            \n                            <!-- Primary red overlay that disappears on hover -->\n                            <div class=\"absolute inset-0 bg-primary\/50 transition-opacity duration-300 group-hover:opacity-0\"><\/div>\n                            \n                            <!-- Black overlay that remains -->\n                            <div class=\"absolute inset-0 bg-black\/40 transition-opacity duration-300\"><\/div>\n                                                \n                        <!-- Content container - exactly matches Svelte positioning -->\n                        <div class=\"absolute inset-0 p-6 flex flex-col justify-end text-white z-10 gap-2\">\n                                                            <div class=\"w-12 h-12 border border-white flex items-center justify-center\">\n                                    <img decoding=\"async\" src=\"https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/Untitled-5-2.png\" alt=\"\u0645\u062a\u0631\u0648 \u062f\u0628\u064a icon\" \n                                         class=\"w-10 h-10 transition-transform duration-300 group-hover:scale-110\">\n                                <\/div>\n                                                        \n                            <!-- Project title -->\n                            <h3 class=\"text-2xl font-semibold mb-2 border-white border-0 border-r-4 pr-2 mt-2\">\n                                \u0645\u062a\u0631\u0648 \u062f\u0628\u064a                            <\/h3>\n                            \n                            <!-- Project excerpt -->\n                                                            <p class=\"mb-4 line-clamp-3\">\u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0645\u0646 \u0623\u062c\u0644 \u0623\u062f\u0627\u0621 \u0637\u0648\u064a\u0644 \u0627\u0644\u0623\u0645\u062f.\n<\/p>\n                                                    <\/div>\n\n                        <!-- Floating SVG Button -->\n                                                    <div class='w-16 h-16 absolute top-0 left-0 bg-primary z-10 flex items-center justify-center'>\n                                <svg class=\"w-12 h-12\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                                    <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                    <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                <\/svg>\n                            <\/div>\n                                            <\/a>\n                                    <!-- Card with overlay - match to Svelte component -->\n\n                    <a href=\"https:\/\/nationalcement.ae\/ar\/project\/%d8%a3%d8%ac%d9%86%d8%ad%d8%a9-%d8%a5%d9%83%d8%b3%d8%a8%d9%88-2020\/\" class=\"card-with-overlay relative overflow-hidden shadow-md h-80 group\">\n                                                    <!-- Background image -->\n                            <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-all duration-700 group-hover:scale-105\" \n                                 style=\"background-image: url('https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/color2.jpg');\"><\/div>\n                            \n                            <!-- Primary red overlay that disappears on hover -->\n                            <div class=\"absolute inset-0 bg-primary\/50 transition-opacity duration-300 group-hover:opacity-0\"><\/div>\n                            \n                            <!-- Black overlay that remains -->\n                            <div class=\"absolute inset-0 bg-black\/40 transition-opacity duration-300\"><\/div>\n                                                \n                        <!-- Content container - exactly matches Svelte positioning -->\n                        <div class=\"absolute inset-0 p-6 flex flex-col justify-end text-white z-10 gap-2\">\n                                                            <div class=\"w-12 h-12 border border-white flex items-center justify-center\">\n                                    <img decoding=\"async\" src=\"https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/Untitled-5-2.png\" alt=\"\u0623\u062c\u0646\u062d\u0629 \u0625\u0643\u0633\u0628\u0648 2020 icon\" \n                                         class=\"w-10 h-10 transition-transform duration-300 group-hover:scale-110\">\n                                <\/div>\n                                                        \n                            <!-- Project title -->\n                            <h3 class=\"text-2xl font-semibold mb-2 border-white border-0 border-r-4 pr-2 mt-2\">\n                                \u0623\u062c\u0646\u062d\u0629 \u0625\u0643\u0633\u0628\u0648 2020                            <\/h3>\n                            \n                            <!-- Project excerpt -->\n                                                            <p class=\"mb-4 line-clamp-3\">\u0623\u0633\u0645\u0646\u062a \u0645\u0633\u062a\u062f\u0627\u0645 \u0644\u0639\u0631\u0648\u0636 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629.\n<\/p>\n                                                    <\/div>\n\n                        <!-- Floating SVG Button -->\n                                                    <div class='w-16 h-16 absolute top-0 left-0 bg-primary z-10 flex items-center justify-center'>\n                                <svg class=\"w-12 h-12\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                                    <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                    <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                <\/svg>\n                            <\/div>\n                                            <\/a>\n                                    <!-- Card with overlay - match to Svelte component -->\n\n                    <a href=\"https:\/\/nationalcement.ae\/ar\/project\/%d9%87%d9%84%d8%a7%d9%84-%d9%86%d8%ae%d9%84%d8%a9-%d8%ac%d9%85%d9%8a%d8%b1%d8%a7\/\" class=\"card-with-overlay relative overflow-hidden shadow-md h-80 group\">\n                                                    <!-- Background image -->\n                            <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-all duration-700 group-hover:scale-105\" \n                                 style=\"background-image: url('https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/eyJ3IjoxMjAwLCJmIjoid2VicCIsImsiOiJiYzhlYjYxMDRhYjRlNzZjYWNhYjFlZGY5YjRkYjcxMCIsImZwIjpbMC41LDBdLCJyIjoxLjMzLCJvIjoiZ2xvYmFsIn0-e1740642387338.webp');\"><\/div>\n                            \n                            <!-- Primary red overlay that disappears on hover -->\n                            <div class=\"absolute inset-0 bg-primary\/50 transition-opacity duration-300 group-hover:opacity-0\"><\/div>\n                            \n                            <!-- Black overlay that remains -->\n                            <div class=\"absolute inset-0 bg-black\/40 transition-opacity duration-300\"><\/div>\n                                                \n                        <!-- Content container - exactly matches Svelte positioning -->\n                        <div class=\"absolute inset-0 p-6 flex flex-col justify-end text-white z-10 gap-2\">\n                                                            <div class=\"w-12 h-12 border border-white flex items-center justify-center\">\n                                    <img decoding=\"async\" src=\"https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/Untitled-5-2.png\" alt=\"\u0645\u0634\u0627\u0631\u064a\u0639 \u0625\u0633\u0643\u0627\u0646 \u0623\u062f\u0646\u0648\u0643 icon\" \n                                         class=\"w-10 h-10 transition-transform duration-300 group-hover:scale-110\">\n                                <\/div>\n                                                        \n                            <!-- Project title -->\n                            <h3 class=\"text-2xl font-semibold mb-2 border-white border-0 border-r-4 pr-2 mt-2\">\n                                \u0645\u0634\u0627\u0631\u064a\u0639 \u0625\u0633\u0643\u0627\u0646 \u0623\u062f\u0646\u0648\u0643                            <\/h3>\n                            \n                            <!-- Project excerpt -->\n                                                            <p class=\"mb-4 line-clamp-3\">\u0625\u0633\u0645\u0646\u062a \u0635\u0646\u0627\u0639\u064a \u064a\u0636\u0645\u0646 \u0623\u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u064a\u0627\u062a \u0627\u0644\u0633\u0644\u0627\u0645\u0629 \u0648\u0627\u0644\u0645\u062a\u0627\u0646\u0629.\n<\/p>\n                                                    <\/div>\n\n                        <!-- Floating SVG Button -->\n                                                    <div class='w-16 h-16 absolute top-0 left-0 bg-primary z-10 flex items-center justify-center'>\n                                <svg class=\"w-12 h-12\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                                    <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                    <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                <\/svg>\n                            <\/div>\n                                            <\/a>\n                                    <!-- Card with overlay - match to Svelte component -->\n\n                    <a href=\"https:\/\/nationalcement.ae\/ar\/project\/%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9-%d8%a5%d8%b3%d9%83%d8%a7%d9%86-%d8%a3%d8%af%d9%86%d9%88%d9%83\/\" class=\"card-with-overlay relative overflow-hidden shadow-md h-80 group\">\n                                                    <!-- Background image -->\n                            <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-all duration-700 group-hover:scale-105\" \n                                 style=\"background-image: url('https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/adnoc.jpg');\"><\/div>\n                            \n                            <!-- Primary red overlay that disappears on hover -->\n                            <div class=\"absolute inset-0 bg-primary\/50 transition-opacity duration-300 group-hover:opacity-0\"><\/div>\n                            \n                            <!-- Black overlay that remains -->\n                            <div class=\"absolute inset-0 bg-black\/40 transition-opacity duration-300\"><\/div>\n                                                \n                        <!-- Content container - exactly matches Svelte positioning -->\n                        <div class=\"absolute inset-0 p-6 flex flex-col justify-end text-white z-10 gap-2\">\n                                                            <div class=\"w-12 h-12 border border-white flex items-center justify-center\">\n                                    <img decoding=\"async\" src=\"https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/Untitled-5-2.png\" alt=\"\u0645\u0634\u0627\u0631\u064a\u0639 \u0625\u0633\u0643\u0627\u0646 \u0623\u062f\u0646\u0648\u0643 icon\" \n                                         class=\"w-10 h-10 transition-transform duration-300 group-hover:scale-110\">\n                                <\/div>\n                                                        \n                            <!-- Project title -->\n                            <h3 class=\"text-2xl font-semibold mb-2 border-white border-0 border-r-4 pr-2 mt-2\">\n                                \u0645\u0634\u0627\u0631\u064a\u0639 \u0625\u0633\u0643\u0627\u0646 \u0623\u062f\u0646\u0648\u0643                            <\/h3>\n                            \n                            <!-- Project excerpt -->\n                                                            <p class=\"mb-4 line-clamp-3\">\u062d\u0644\u0648\u0644 \u0635\u0646\u0627\u0639\u064a\u0629 \u0633\u0643\u0646\u064a\u0629 \u062a\u0631\u062a\u0643\u0632 \u0639\u0644\u0649 \u0627\u0644\u0633\u0644\u0627\u0645\u0629 \u0648\u0627\u0644\u0645\u062a\u0627\u0646\u0629.\n<\/p>\n                                                    <\/div>\n\n                        <!-- Floating SVG Button -->\n                                                    <div class='w-16 h-16 absolute top-0 left-0 bg-primary z-10 flex items-center justify-center'>\n                                <svg class=\"w-12 h-12\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                                    <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                    <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                <\/svg>\n                            <\/div>\n                                            <\/a>\n                                    <!-- Card with overlay - match to Svelte component -->\n\n                    <a href=\"https:\/\/nationalcement.ae\/ar\/project\/%d8%a8%d8%b1%d8%ac-%d8%ae%d9%84%d9%8a%d9%81%d8%a9\/\" class=\"card-with-overlay relative overflow-hidden shadow-md h-80 group\">\n                                                    <!-- Background image -->\n                            <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-all duration-700 group-hover:scale-105\" \n                                 style=\"background-image: url('https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/shutterstock-779374957-jpg.jpg');\"><\/div>\n                            \n                            <!-- Primary red overlay that disappears on hover -->\n                            <div class=\"absolute inset-0 bg-primary\/50 transition-opacity duration-300 group-hover:opacity-0\"><\/div>\n                            \n                            <!-- Black overlay that remains -->\n                            <div class=\"absolute inset-0 bg-black\/40 transition-opacity duration-300\"><\/div>\n                                                \n                        <!-- Content container - exactly matches Svelte positioning -->\n                        <div class=\"absolute inset-0 p-6 flex flex-col justify-end text-white z-10 gap-2\">\n                                                            <div class=\"w-12 h-12 border border-white flex items-center justify-center\">\n                                    <img decoding=\"async\" src=\"https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/Untitled-5-2.png\" alt=\"\u0628\u0631\u062c \u062e\u0644\u064a\u0641\u0629 icon\" \n                                         class=\"w-10 h-10 transition-transform duration-300 group-hover:scale-110\">\n                                <\/div>\n                                                        \n                            <!-- Project title -->\n                            <h3 class=\"text-2xl font-semibold mb-2 border-white border-0 border-r-4 pr-2 mt-2\">\n                                \u0628\u0631\u062c \u062e\u0644\u064a\u0641\u0629                            <\/h3>\n                            \n                            <!-- Project excerpt -->\n                                                            <p class=\"mb-4 line-clamp-3\">\u0627\u0644\u0645\u0633\u0627\u0647\u0645\u0629 \u0628\u0623\u0633\u0645\u0646\u062a \u0639\u0627\u0644\u064a \u0627\u0644\u0623\u062f\u0627\u0621 \u0641\u064a \u0623\u0637\u0648\u0644 \u0646\u0627\u0637\u062d\u0629 \u0633\u062d\u0627\u0628 \u0641\u064a \u0627\u0644\u0639\u0627\u0644\u0645.\n<\/p>\n                                                    <\/div>\n\n                        <!-- Floating SVG Button -->\n                                                    <div class='w-16 h-16 absolute top-0 left-0 bg-primary z-10 flex items-center justify-center'>\n                                <svg class=\"w-12 h-12\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                                    <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                    <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                <\/svg>\n                            <\/div>\n                                            <\/a>\n                                    <!-- Card with overlay - match to Svelte component -->\n\n                    <a href=\"https:\/\/nationalcement.ae\/ar\/project\/%d8%a8%d8%b1%d8%ac-%d8%a7%d9%84%d8%b9%d8%b1%d8%a8\/\" class=\"card-with-overlay relative overflow-hidden shadow-md h-80 group\">\n                                                    <!-- Background image -->\n                            <div class=\"absolute inset-0 w-full h-full bg-cover bg-center transition-all duration-700 group-hover:scale-105\" \n                                 style=\"background-image: url('https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/Visiting-Burj-Al-Arab-blog-1024x685-1.jpg');\"><\/div>\n                            \n                            <!-- Primary red overlay that disappears on hover -->\n                            <div class=\"absolute inset-0 bg-primary\/50 transition-opacity duration-300 group-hover:opacity-0\"><\/div>\n                            \n                            <!-- Black overlay that remains -->\n                            <div class=\"absolute inset-0 bg-black\/40 transition-opacity duration-300\"><\/div>\n                                                \n                        <!-- Content container - exactly matches Svelte positioning -->\n                        <div class=\"absolute inset-0 p-6 flex flex-col justify-end text-white z-10 gap-2\">\n                                                            <div class=\"w-12 h-12 border border-white flex items-center justify-center\">\n                                    <img decoding=\"async\" src=\"https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/Untitled-5-2.png\" alt=\"\u0628\u0631\u062c \u0627\u0644\u0639\u0631\u0628 icon\" \n                                         class=\"w-10 h-10 transition-transform duration-300 group-hover:scale-110\">\n                                <\/div>\n                                                        \n                            <!-- Project title -->\n                            <h3 class=\"text-2xl font-semibold mb-2 border-white border-0 border-r-4 pr-2 mt-2\">\n                                \u0628\u0631\u062c \u0627\u0644\u0639\u0631\u0628                            <\/h3>\n                            \n                            <!-- Project excerpt -->\n                                                            <p class=\"mb-4 line-clamp-3\">\u062a\u0648\u0641\u064a\u0631 \u0625\u0633\u0645\u0646\u062a \u0639\u0627\u0644\u064a \u0627\u0644\u062c\u0648\u062f\u0629 \u0628\u0645\u0639\u0627\u064a\u064a\u0631 \u0628\u062d\u0631\u064a\u0629 \u062e\u0627\u0635\u0629 \u0644\u062f\u0639\u0645 \u0625\u0646\u0634\u0627\u0621 \u0623\u0641\u062e\u0645 \u0641\u0646\u062f\u0642 \u0628\u062d\u0631\u064a \u0641\u064a \u062f\u0628\u064a.\n<\/p>\n                                                    <\/div>\n\n                        <!-- Floating SVG Button -->\n                                                    <div class='w-16 h-16 absolute top-0 left-0 bg-primary z-10 flex items-center justify-center'>\n                                <svg class=\"w-12 h-12\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                                    <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                    <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                <\/svg>\n                            <\/div>\n                                            <\/a>\n                                    <\/div>\n        \n        <!-- Action link - exact match to Svelte ActionLink component -->\n                    <div class=\"flex-1\">\n                <a href=\"\/\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639\/\" \n                   class=\"inline-flex items-center gap-2 px-6 py-3 text-xl font-medium text-white bg-primary border border-white hover:bg-primary\/80 transition-all\">\n                    \u0639\u0631\u0636 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639                    <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                        <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                        <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                    <\/svg>\n                <\/a>\n            <\/div>\n            <\/div>\n<\/section>\n\n<!-- Tailwind-style CSS only for components without native Tailwind equivalents -->\n<style>\n    \/* Custom colors matching Svelte component *\/\n    #projects-section-69f470bd9d386 .text-primary {\n        color: #c81431;\n    }\n    \n    #projects-section-69f470bd9d386 .text-secondary {\n        color: #1a202c;\n    }\n    \n    #projects-section-69f470bd9d386 .bg-primary {\n        background-color: #c81431;\n    }\n    \n    #projects-section-69f470bd9d386 .bg-secondary {\n        background-color: #1a202c;\n    }\n    \n    \/* Hover effect for primary background *\/\n    #projects-section-69f470bd9d386 .hover\\:bg-primary\\\/80:hover {\n        background-color: rgba(200, 20, 49, 0.8);\n    }\n    \n    \/* Scale effect for card background *\/\n    #projects-section-69f470bd9d386 .group-hover\\:scale-105:hover {\n        transform: scale(1.05);\n    }\n    \n    \/* Line clamp for excerpts *\/\n    #projects-section-69f470bd9d386 .line-clamp-3 {\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n    \n    \/* Arrow hover effect *\/\n    #projects-section-69f470bd9d386 .group-hover\\\/link\\:translate-x-1:hover {\n        transform: translateX(0.25rem);\n    }\n    \n    \/* RTL support *\/\n    html[dir=\"rtl\"] #projects-section-69f470bd9d386 .subheader::after {\n        left: auto;\n        right: 0;\n    }\n    \n    html[dir=\"rtl\"] #projects-section-69f470bd9d386 .border-l-4 {\n        border-left-width: 0;\n        border-right-width: 4px;\n        padding-left: 0;\n        padding-right: 0.5rem;\n    }\n    \n    html[dir=\"rtl\"] #projects-section-69f470bd9d386 .w-16.absolute.top-0.right-0 {\n        right: auto;\n        left: 0;\n    }\n    \n    \/* For SVG arrow in RTL *\/\n    html[dir=\"rtl\"] #projects-section-69f470bd9d386 .inline-flex.items-center svg {\n        transform: scaleX(-1);\n    }\n<\/style>\n\n\n<div data-forced-dir=\"rtl\" id=\"products-section-69f470bda7ead\" class=\"nationalcement-products-section w-full\">\n    <section \n        class=\"relative w-full flex items-center justify-center z-0 text-white p-2 md:p-0\" \n        style=\"background-image: url(&#039;https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/06\/04-Last-1-scaled-1.jpg&#039;); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;\">\n        \n        <!-- Background overlay -->\n        <div class=\"absolute w-full h-full bg-primary\/90 -z-10\"><\/div>\n        \n        <!-- Main content container -->\n        <div class=\"flex flex-col w-full md:w-2\/3 py-16 gap-8 text-right\">\n            \n            <!-- Sustainability Section -->\n            <div class=\"subheader text-5xl font-semibold text-white\">\n                \u0645\u0644\u062a\u0632\u0645\u0648\u0646 \u0628\u063a\u062f\u064d \u0623\u0643\u062b\u0631 \u062e\u0636\u0631\u0629                <div class=\"h-1 w-12 mt-2 bg-white\"><\/div>\n            <\/div>\n            \n            <p class=\"text-xl\">\n                \u0645\u0646 \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u0627\u0646\u0628\u0639\u0627\u062b\u0627\u062a \u0627\u0644\u0643\u0631\u0628\u0648\u0646\u064a\u0629 \u0625\u0644\u0649 \u062a\u0646\u0641\u064a\u0630 \u0623\u0646\u0638\u0645\u0629 \u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0647\u062f\u0648\u0631\u0629\u060c \u062a\u0639\u062a\u0628\u0631 \u0627\u0644\u0627\u0633\u062a\u062f\u0627\u0645\u0629 \u062c\u0648\u0647\u0631 \u0643\u0644 \u0645\u0627 \u0646\u0642\u0648\u0645 \u0628\u0647.            <\/p>\n            \n                            <div class=\"flex-1 mt-8\">\n                    <a href=\"#\" class=\"inline-flex items-center gap-2 px-6 py-3 text-xl font-medium text-white bg-secondary border border-white hover:bg-secondary\/80 transition-all\">\n                        \u062a\u0639\u0631\u0641 \u0639\u0644\u0649 \u0645\u0628\u0627\u062f\u0631\u0627\u062a\u0646\u0627                    <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                        <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                        <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                    <\/svg>\n                    <\/a>\n                <\/div>\n                        \n            <hr class=\"bg-white my-12\">\n            \n            <!-- Products Section -->\n            <div class=\"subheader text-5xl font-semibold text-white\">\n                \u0645\u0646\u062a\u062c\u0627\u062a\u0646\u0627\u060c \u0642\u0648\u062a\u0643                <div class=\"h-1 w-12 mt-2 bg-white\"><\/div>\n            <\/div>\n            \n            <p class=\"text-xl\">\n                \u0627\u0643\u062a\u0634\u0641 \u0645\u0646\u062a\u062c\u0627\u062a\u0646\u0627 \u0627\u0644\u0623\u0633\u0645\u0646\u062a\u064a\u0629 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062c\u0648\u062f\u0629 \u0627\u0644\u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u064b\u0627 \u0644\u0644\u0645\u062a\u0627\u0646\u0629 \u0648\u0627\u0644\u0623\u062f\u0627\u0621:            <\/p>\n            \n            <!-- Products Grid -->\n            <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-6\">\n                                                            <a href=\"https:\/\/nationalcement.ae\/ar\/product\/%d8%a3%d8%b3%d9%85%d9%86%d8%aa-%d8%a8%d9%88%d8%b1%d8%aa%d9%84%d8%a7%d9%86%d8%af-%d8%a7%d9%84%d8%b9%d8%a7%d8%af%d9%8a-opc\/\" class=\"w-full h-full flex flex-col bg-white rtl\">\n                            <div class=\"relative w-full h-full z-0\">\n                                <!-- Icon in top corner -->\n                                <div class=\"absolute flex items-center justify-center bg-secondary w-12 h-12 top-0 left-0 z-10\">\n                                    <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                                        <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                        <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                    <\/svg>\n                                <\/div>\n                                \n                                <!-- Product image -->\n                                                                    <img decoding=\"async\" class=\"inset-0 object-cover w-full h-72\" src=\"https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/08-scaled-1.jpg\" alt=\"\u0623\u0633\u0645\u0646\u062a \u0628\u0648\u0631\u062a\u0644\u0627\u0646\u062f \u0627\u0644\u0639\u0627\u062f\u064a (OPC)\" \/>\n                                                                \n                                <!-- Text content -->\n                                <div class=\"flex flex-col w-full gap-4 bg-white py-6 px-4\">\n                                    <h1 class=\"w-full font-semibold text-xl text-primary border-r-4 pr-2 border-primary\">\n                                        \u0623\u0633\u0645\u0646\u062a \u0628\u0648\u0631\u062a\u0644\u0627\u0646\u062f \u0627\u0644\u0639\u0627\u062f\u064a (OPC)                                    <\/h1>\n                                    <p class=\"font-medium text-secondary\">\n                                        \u0623\u0633\u0645\u0646\u062a \u0642\u0648\u064a \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a \u0645\u0646\u0627\u0633\u0628 \u0644\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0633\u0643\u0646\u064a\u0629\u060c \u0648\u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629\u060c \u0648\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629.                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                                            <a href=\"https:\/\/nationalcement.ae\/ar\/product\/%d8%ae%d8%a8%d8%ab-%d8%a3%d9%81%d8%b1%d8%a7%d9%86-%d8%a7%d9%84%d8%b5%d9%87%d8%b1-%d8%a7%d9%84%d9%85%d8%ad%d8%a8%d8%a8-%d8%a7%d9%84%d9%85%d8%b7%d8%ad%d9%88%d9%86-ggbfs\/\" class=\"w-full h-full flex flex-col bg-white rtl\">\n                            <div class=\"relative w-full h-full z-0\">\n                                <!-- Icon in top corner -->\n                                <div class=\"absolute flex items-center justify-center bg-secondary w-12 h-12 top-0 left-0 z-10\">\n                                    <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                                        <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                        <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                    <\/svg>\n                                <\/div>\n                                \n                                <!-- Product image -->\n                                                                    <img decoding=\"async\" class=\"inset-0 object-cover w-full h-72\" src=\"https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/07-2-scaled-1.jpg\" alt=\"\u062e\u0628\u062b \u0623\u0641\u0631\u0627\u0646 \u0627\u0644\u0635\u0647\u0631 \u0627\u0644\u0645\u062d\u0628\u0628 \u0627\u0644\u0645\u0637\u062d\u0648\u0646 (GGBFS)\" \/>\n                                                                \n                                <!-- Text content -->\n                                <div class=\"flex flex-col w-full gap-4 bg-white py-6 px-4\">\n                                    <h1 class=\"w-full font-semibold text-xl text-primary border-r-4 pr-2 border-primary\">\n                                        \u062e\u0628\u062b \u0623\u0641\u0631\u0627\u0646 \u0627\u0644\u0635\u0647\u0631 \u0627\u0644\u0645\u062d\u0628\u0628 \u0627\u0644\u0645\u0637\u062d\u0648\u0646 (GGBFS)                                    <\/h1>\n                                    <p class=\"font-medium text-secondary\">\n                                        \u0628\u062f\u064a\u0644 \u0645\u0633\u062a\u062f\u0627\u0645 \u0644\u0644\u0623\u0633\u0645\u0646\u062a \u0627\u0644\u062a\u0642\u0644\u064a\u062f\u064a\u060c \u064a\u0639\u0632\u0632 \u0645\u062a\u0627\u0646\u0629 \u0627\u0644\u062e\u0631\u0633\u0627\u0646\u0629 \u0648\u064a\u0642\u0644\u0644 \u0645\u0646 \u0627\u0644\u0623\u062b\u0631 \u0627\u0644\u0628\u064a\u0626\u064a.                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                                            <a href=\"https:\/\/nationalcement.ae\/ar\/product\/%d8%a3%d8%b3%d9%85%d9%86%d8%aa-%d9%85%d9%82%d8%a7%d9%88%d9%85-%d9%84%d9%84%d9%83%d8%a8%d8%b1%d9%8a%d8%aa%d8%a7%d8%aa-src\/\" class=\"w-full h-full flex flex-col bg-white rtl\">\n                            <div class=\"relative w-full h-full z-0\">\n                                <!-- Icon in top corner -->\n                                <div class=\"absolute flex items-center justify-center bg-secondary w-12 h-12 top-0 left-0 z-10\">\n                                    <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                                        <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                        <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                                    <\/svg>\n                                <\/div>\n                                \n                                <!-- Product image -->\n                                                                    <img decoding=\"async\" class=\"inset-0 object-cover w-full h-72\" src=\"https:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/02\/07-2-scaled-1.jpg\" alt=\"\u0623\u0633\u0645\u0646\u062a \u0645\u0642\u0627\u0648\u0645 \u0644\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a (SRC)\" \/>\n                                                                \n                                <!-- Text content -->\n                                <div class=\"flex flex-col w-full gap-4 bg-white py-6 px-4\">\n                                    <h1 class=\"w-full font-semibold text-xl text-primary border-r-4 pr-2 border-primary\">\n                                        \u0623\u0633\u0645\u0646\u062a \u0645\u0642\u0627\u0648\u0645 \u0644\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a (SRC)                                    <\/h1>\n                                    <p class=\"font-medium text-secondary\">\n                                        \u0645\u0635\u0645\u0645 \u0644\u062a\u062d\u0645\u0651\u0644 \u0627\u0644\u0628\u064a\u0626\u0627\u062a \u0627\u0644\u0642\u0627\u0633\u064a\u0629 \u0630\u0627\u062a \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0639\u0627\u0644\u064a \u0645\u0646 \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a\u060c \u0645\u062b\u0644 \u0627\u0644\u0645\u0635\u0627\u0641\u064a\u060c \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a \u0627\u0644\u0628\u062d\u0631\u064a\u0629\u060c \u0648\u0645\u062d\u0637\u0627\u062a \u0645\u0639\u0627\u0644\u062c\u0629 \u0627\u0644\u0635\u0631\u0641 \u0627\u0644\u0635\u062d\u064a.                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                                                <\/div>\n            \n                            <div class=\"flex-1\">\n                    <a href=\"#\" class=\"inline-flex items-center gap-2 px-6 py-3 text-xl font-medium text-white bg-secondary border border-white hover:bg-secondary\/80 transition-all\">\n                        \u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a                    <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                        <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                        <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                    <\/svg>\n                    <\/a>\n                <\/div>\n                    <\/div>\n    <\/section>\n<\/div>\n\n<style>\n    \/* Scoped styles for products-section block *\/\n    #products-section-69f470bda7ead .bg-primary {\n        background-color: #c81431; \/* Brand primary red *\/\n    }\n    \n    #products-section-69f470bda7ead .text-primary {\n        color: #c81431;\n    }\n    \n    #products-section-69f470bda7ead .bg-secondary {\n        background-color: #1a202c; \/* Brand secondary dark blue *\/\n    }\n    \n    #products-section-69f470bda7ead .text-secondary {\n        color: #1a202c;\n    }\n    \n    #products-section-69f470bda7ead .subheader {\n        position: relative;\n    }\n    \n    #products-section-69f470bda7ead .stroke-white {\n        stroke: white;\n    }\n    \n    #products-section-69f470bda7ead .border-primary {\n        border-color: #c81431;\n    }\n    \n    \/* Animation keyframes for entrance effects *\/\n    @keyframes fadeIn {\n        from { opacity: 0; }\n        to { opacity: 1; }\n    }\n    \n    @keyframes slideUp {\n        from { transform: translateY(20px); opacity: 0; }\n        to { transform: translateY(0); opacity: 1; }\n    }\n    \n    \/* Apply animations to elements *\/\n    #products-section-69f470bda7ead .subheader {\n        animation: slideUp 0.6s ease-out forwards;\n    }\n    \n    #products-section-69f470bda7ead p {\n        animation: slideUp 0.6s ease-out forwards;\n        animation-delay: 0.2s;\n    }\n    \n    #products-section-69f470bda7ead .grid {\n        animation: fadeIn 0.8s ease-out forwards;\n        animation-delay: 0.4s;\n    }\n    \n    #products-section-69f470bda7ead hr {\n        animation: fadeIn 0.6s ease-out forwards;\n    }\n    \n    #products-section-69f470bda7ead a.inline-flex {\n        animation: slideUp 0.6s ease-out forwards;\n        animation-delay: 0.6s;\n        opacity: 0;\n    }\n<\/style>\n\n\n<div data-forced-dir=\"rtl\" data-forced-dir=\"rtl\" data-forced-dir=\"rtl\" id=\"job-section-69f470bda93f3\" class=\"nationalcement-job-section w-full\" dir=\"rtl\">\n    <section class=\"relative flex w-full h-full min-h-96 px-2 py-20 bg z-0 md:p-0\" style=\"background-image: url(&#039;http:\/\/nationalcement.ae\/ar\/wp-content\/uploads\/2025\/03\/image_fx_-6-1.png&#039;); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;\">\n        <!-- Overlay -->\n        <div class=\"absolute w-full h-full inset-0 bg-secondary\/80 -z-10\"><\/div>\n        \n        <!-- Content Area - Applying position class to control which side it appears on -->\n        <div class=\"flex flex-col justify-center gap-8 p-6 w-full md:w-1\/2 h-full md:py-28 ml-0 mr-auto text-right\">\n            <!-- Header with Icon -->\n            <div class=\"flex items-center gap-4\">\n                                \n                <h1 class=\"text-2xl md:text-4xl font-semibold uppercase text-white\">\n                    <strong>\u0627\u0646\u0636\u0645 \u0625\u0644\u0649 \u0641\u0631\u064a\u0642\u0646\u0627<\/strong>                <\/h1>\n            <\/div>\n            \n            <!-- Main Content -->\n            <p class=\"text-xl font-medium text-white\">\n                \u0643\u0646 \u062c\u0632\u0621\u0627\u064b \u0645\u0646 \u0634\u0631\u0643\u0629 \u062a\u0628\u0646\u064a \u0627\u0644\u0648\u0637\u0646 \u0648\u062a\u0634\u0643\u0644 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644.            <\/p>\n            \n            <!-- Action Link\/Button -->\n                            <div class=\"flex-1 mt-8\">\n                    <a href=\"#\" class=\"inline-flex items-center gap-2 px-6 py-3 text-xl font-medium flex-row-reverse text-white bg-primary border border-white hover:bg-opacity-90 transition-all\">\n                        \u0639\u0631\u0636 \u0627\u0644\u0648\u0638\u0627\u0626\u0641                        <svg class=\"w-8 h-8\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <circle cx=\"50\" cy=\"50\" r=\"45\" class=\"stroke-white\" stroke-width=\"4\" fill=\"none\"\/>\n                            <line x1=\"30\" y1=\"40\" x2=\"50\" y2=\"70\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                            <line x1=\"50\" y1=\"70\" x2=\"70\" y2=\"40\" class=\"stroke-white\" stroke-width=\"4\"\/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n                    <\/div>\n    <\/section>\n<\/div>\n\n<style>\n    \/* Scoped styles for job-section block *\/\n    #job-section-69f470bda93f3 .stroke-white {\n        stroke: white;\n    }\n    \n    #job-section-69f470bda93f3 .bg-primary {\n        background-color: #c81431; \/* Brand primary red *\/\n    }\n    \n    #job-section-69f470bda93f3 .text-primary {\n        color: #c81431;\n    }\n    \n    #job-section-69f470bda93f3 .bg-secondary {\n        background-color: #1a202c; \/* Brand secondary dark blue *\/\n    }\n    \n    #job-section-69f470bda93f3 .text-secondary {\n        color: #1a202c;\n    }\n    \n    \/* Background image handling similar to the Svelte component *\/\n    #job-section-69f470bda93f3 .bg {\n        -webkit-background-size: cover;\n        -moz-background-size: cover;\n        -o-background-size: cover;\n        background-size: cover;\n    }\n<\/style>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":737,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-715","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/nationalcement.ae\/ar\/wp-json\/wp\/v2\/pages\/715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nationalcement.ae\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nationalcement.ae\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nationalcement.ae\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nationalcement.ae\/ar\/wp-json\/wp\/v2\/comments?post=715"}],"version-history":[{"count":1,"href":"https:\/\/nationalcement.ae\/ar\/wp-json\/wp\/v2\/pages\/715\/revisions"}],"predecessor-version":[{"id":920,"href":"https:\/\/nationalcement.ae\/ar\/wp-json\/wp\/v2\/pages\/715\/revisions\/920"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nationalcement.ae\/ar\/wp-json\/wp\/v2\/media\/737"}],"wp:attachment":[{"href":"https:\/\/nationalcement.ae\/ar\/wp-json\/wp\/v2\/media?parent=715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}