{"id":466,"date":"2026-09-09T13:21:23","date_gmt":"2026-09-09T13:21:23","guid":{"rendered":"https:\/\/hbgroup-eg.com\/home\/"},"modified":"2026-09-22T15:14:41","modified_gmt":"2026-09-22T15:14:41","slug":"home","status":"publish","type":"page","link":"https:\/\/hbgroup-eg.com\/ar\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"466\" class=\"elementor elementor-466 elementor-15\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-496b3af3 e-con-full e-flex e-con e-parent\" data-id=\"496b3af3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-257b2ab e-transform elementor-widget elementor-widget-html\" data-id=\"257b2ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_translateY_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:74,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:110,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<div class=\"hero-content\" dir=\"rtl\">\r\n\r\n    <span class=\"hero-tag\">\r\n        <span class=\"hero-tag-dot\"><\/span>\r\n        \u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 HP Group\r\n    <\/span>\r\n\r\n    <h1>\r\n        \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0645\u0648\u062b\u0648\u0642\r\n        <span id=\"typed\"><\/span>\r\n    <\/h1>\r\n\r\n    <p>\r\n        \u0641\u064a \u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a\u060c \u0646\u0642\u062f\u0645 \u062d\u0644\u0648\u0644 \u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0648\u062a\u0635\u062f\u064a\u0631 \u0645\u062a\u0643\u0627\u0645\u0644\u0629\u061b \u0646\u0633\u062a\u0648\u0631\u062f \u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629\u060c\r\n        \u0625\u0636\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0639\u0644\u0627\u0641\u060c \u0627\u0644\u0644\u0642\u0627\u062d\u0627\u062a \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629\u060c \u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629\u060c \u0627\u0644\u0628\u0630\u0648\u0631\u060c \u0627\u0644\u0645\u0628\u064a\u062f\u0627\u062a\u060c \u0648\u0627\u0644\u0634\u062a\u0644\u0627\u062a\u060c\r\n        \u0643\u0645\u0627 \u0646\u0635\u062f\u0631 \u0627\u0644\u062e\u0636\u0627\u0631 \u0648\u0627\u0644\u0641\u0648\u0627\u0643\u0647 \u0627\u0644\u0637\u0627\u0632\u062c\u0629 \u0648\u0627\u0644\u0645\u062c\u0645\u062f\u0629\u060c \u0627\u0644\u0639\u0635\u0627\u0626\u0631\u060c \u0648\u0627\u0644\u062d\u0644\u0648\u064a\u0627\u062a. \u0645\u0639 \u0627\u0644\u062c\u0648\u062f\u0629 \u0648\u0627\u0644\u0645\u0648\u062b\u0648\u0642\u064a\u0629\r\n        \u0648\u0627\u0644\u0648\u0635\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u060c \u0646\u0642\u062f\u0645 \u0627\u0644\u062a\u0645\u064a\u0632 \u0641\u064a \u0643\u0644 \u0634\u062d\u0646\u0629.\r\n    <\/p>\r\n\r\n    <div class=\"hero-actions\">\r\n        <a href=\"https:\/\/hbgroup-eg.com\/ar\/about\/\" class=\"hero-btn hero-btn-primary\">\r\n            \u062a\u0639\u0631\u0651\u0641 \u0639\u0644\u064a\u0646\u0627\r\n            <i class=\"hero-btn-icon\">\u2190<\/i>\r\n        <\/a>\r\n        \r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\/* ===== Base ===== *\/\r\n.hero-content{\r\n    display:flex;\r\n    flex-direction:column;\r\n    justify-content:flex-start;\r\n    align-items:flex-start;\r\n    text-align:right;\r\n    max-width:1000px;\r\n    padding:0;\r\n    box-sizing:border-box;\r\n    font-family:'El Messiri', sans-serif;\r\n    direction:rtl;\r\n}\r\n.hero-content *,\r\n.hero-content *::before,\r\n.hero-content *::after{\r\n    box-sizing:border-box;\r\n}\r\n\r\n\/* ===== Tag (mini label) ===== *\/\r\n.hero-tag{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    padding:8px 18px;\r\n    background:rgba(60,153,59,.15);\r\n    border:1px solid rgba(60,153,59,.35);\r\n    border-radius:100px;\r\n    color:#3C993B;\r\n    font-size:13px;\r\n    font-weight:600;\r\n    letter-spacing:.3px;\r\n    margin-bottom:22px;\r\n    backdrop-filter:blur(10px);\r\n}\r\n.hero-tag-dot{\r\n    width:8px;\r\n    height:8px;\r\n    background:#3C993B;\r\n    border-radius:50%;\r\n    position:relative;\r\n    box-shadow:0 0 0 4px rgba(60,153,59,.2);\r\n    animation:heroPulse 2s ease-out infinite;\r\n}\r\n@keyframes heroPulse{\r\n    0%,100%{ box-shadow:0 0 0 4px rgba(60,153,59,.2); }\r\n    50%{ box-shadow:0 0 0 8px rgba(60,153,59,.05); }\r\n}\r\n\r\n\/* ===== H1 ===== *\/\r\n.hero-content h1{\r\n    font-size:60px;\r\n    line-height:1.2;\r\n    color:#fff;\r\n    font-weight:700;\r\n    margin:0 0 22px;\r\n    font-family:'El Messiri', sans-serif;\r\n    letter-spacing:-1px;\r\n}\r\n#typed{\r\n    color:#3C993B;\r\n    font-weight:700;\r\n    margin-right:10px;\r\n    display:inline-block;\r\n}\r\n\r\n\/* ===== Paragraph ===== *\/\r\n.hero-content p{\r\n    max-width:780px;\r\n    color:rgba(255,255,255,.9);\r\n    font-size:18px;\r\n    line-height:1.85;\r\n    margin:0 0 38px;\r\n    font-family:'El Messiri', sans-serif;\r\n    font-weight:400;\r\n}\r\n\r\n\/* ===== Buttons Row ===== *\/\r\n.hero-actions{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:14px;\r\n}\r\n.hero-btn{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    gap:10px;\r\n    padding:18px 34px;\r\n    color:#fff;\r\n    text-decoration:none;\r\n    border-radius:12px;\r\n    font-size:16px;\r\n    font-weight:600;\r\n    transition:.35s cubic-bezier(.2,.8,.2,1);\r\n    font-family:'El Messiri', sans-serif;\r\n    border:1px solid transparent;\r\n    white-space:nowrap;\r\n}\r\n.hero-btn-icon{\r\n    font-size:16px;\r\n    transition:transform .35s cubic-bezier(.2,.8,.2,1);\r\n    display:inline-block;\r\n}\r\n.hero-btn:hover .hero-btn-icon{\r\n    transform:translateX(-6px);\r\n}\r\n\r\n\/* Primary \u2014 Green *\/\r\n.hero-btn-primary{\r\n    background:linear-gradient(135deg, #3C993B, #2e7a2d);\r\n    box-shadow:0 15px 35px -12px rgba(60,153,59,.6);\r\n}\r\n.hero-btn-primary:hover{\r\n    transform:translateY(-4px);\r\n    box-shadow:0 22px 45px -14px rgba(60,153,59,.85);\r\n    background:linear-gradient(135deg, #2e7a2d, #3C993B);\r\n}\r\n\r\n\/* WhatsApp *\/\r\n.hero-btn-wa{\r\n    background:rgba(37,211,102,.15);\r\n    border-color:rgba(37,211,102,.4);\r\n    color:#fff;\r\n    backdrop-filter:blur(10px);\r\n}\r\n.hero-btn-wa .hero-btn-icon{\r\n    font-size:18px;\r\n}\r\n.hero-btn-wa:hover{\r\n    background:#25D366;\r\n    border-color:#25D366;\r\n    transform:translateY(-4px);\r\n    box-shadow:0 20px 40px -14px rgba(37,211,102,.6);\r\n}\r\n.hero-btn-wa:hover .hero-btn-icon{\r\n    transform:translateY(-3px) rotate(-8deg);\r\n}\r\n\r\n\/* ===== Responsive ===== *\/\r\n@media(max-width:1030px){\r\n    .hero-content{\r\n        padding:0;\r\n        align-items:flex-start;\r\n        text-align:right;\r\n    }\r\n\r\n    .hero-content h1{\r\n        font-size:40px;\r\n        line-height:1.3;\r\n    }\r\n\r\n    .hero-content p{\r\n        font-size:15.5px;\r\n        line-height:1.8;\r\n        margin-bottom:28px;\r\n    }\r\n\r\n    .hero-btn{\r\n        padding:14px 22px;\r\n        font-size:14.5px;\r\n    }\r\n}\r\n\r\n@media(max-width:640px){\r\n    .hero-tag{\r\n        font-size:11.5px;\r\n        padding:6px 14px;\r\n        margin-bottom:18px;\r\n    }\r\n    .hero-content h1{\r\n        font-size:30px;\r\n        line-height:1.35;\r\n        letter-spacing:0;\r\n    }\r\n    #typed{\r\n        margin-right:6px;\r\n        display:block;\r\n        margin-top:6px;\r\n    }\r\n    .hero-content p{\r\n        font-size:14.5px;\r\n        line-height:1.85;\r\n        margin-bottom:24px;\r\n    }\r\n    .hero-actions{\r\n        width:100%;\r\n        gap:10px;\r\n    }\r\n    .hero-btn{\r\n        flex:1;\r\n        padding:13px 18px;\r\n        font-size:13.5px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/typed.js@2.0.12\"><\/script>\r\n\r\n<script>\r\n(function(){\r\n    'use strict';\r\n\r\n    function heroInit(){\r\n        var target = document.getElementById('typed');\r\n        if(!target || typeof Typed === 'undefined') return;\r\n\r\n        new Typed('#typed', {\r\n            strings: [\r\n                '\u0641\u064a \u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629.',\r\n                '\u0641\u064a \u0625\u0636\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0639\u0644\u0627\u0641.',\r\n                '\u0641\u064a \u0627\u0644\u0644\u0642\u0627\u062d\u0627\u062a \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629.',\r\n                '\u0641\u064a \u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629.',\r\n                '\u0641\u064a \u0627\u0644\u0628\u0630\u0648\u0631 \u0648\u0627\u0644\u0634\u062a\u0644\u0627\u062a.',\r\n                '\u0641\u064a \u0627\u0644\u0645\u0628\u064a\u062f\u0627\u062a.',\r\n                '\u0641\u064a \u0627\u0644\u062e\u0636\u0627\u0631 \u0648\u0627\u0644\u0641\u0648\u0627\u0643\u0647 \u0627\u0644\u0637\u0627\u0632\u062c\u0629.',\r\n                '\u0641\u064a \u0627\u0644\u062e\u0636\u0627\u0631 \u0648\u0627\u0644\u0641\u0648\u0627\u0643\u0647 \u0627\u0644\u0645\u062c\u0645\u062f\u0629.',\r\n                '\u0641\u064a \u0627\u0644\u0641\u0631\u0627\u0648\u0644\u0629.',\r\n                '\u0641\u064a \u0627\u0644\u062e\u0636\u0627\u0631 \u0627\u0644\u0645\u0634\u0643\u0644.',\r\n                '\u0641\u064a \u0627\u0644\u0628\u0637\u0627\u0637\u0633 \u0646\u0635\u0641 \u0627\u0644\u0645\u062c\u0645\u062f\u0629.',\r\n                '\u0641\u064a \u0627\u0644\u0645\u0634\u0631\u0648\u0628\u0627\u062a \u0648\u0627\u0644\u0639\u0635\u0627\u0626\u0631.',\r\n                '\u0641\u064a \u0645\u0634\u0631\u0648\u0628 \u0627\u0644\u0632\u0628\u064a\u0628 \u0627\u0644\u063a\u0627\u0632\u064a.',\r\n                '\u0641\u064a \u0627\u0644\u062d\u0644\u0648\u064a\u0627\u062a.',\r\n                '\u0641\u064a \u0627\u0644\u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0648\u0627\u0644\u062a\u0635\u062f\u064a\u0631.'\r\n            ],\r\n            typeSpeed: 70,\r\n            backSpeed: 40,\r\n            backDelay: 2000,\r\n            loop: true,\r\n            showCursor: true,\r\n            cursorChar: '|',\r\n            smartBackspace: true\r\n        });\r\n    }\r\n\r\n    if(document.readyState === 'loading'){\r\n        document.addEventListener('DOMContentLoaded', heroInit);\r\n    } else {\r\n        heroInit();\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-82a63f4 e-con-full e-flex e-con e-parent\" data-id=\"82a63f4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-07996c4 e-con-full e-flex e-con e-child\" data-id=\"07996c4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-accbf07 e-con-full e-flex e-con e-child\" data-id=\"accbf07\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-025679c elementor-widget elementor-widget-html\" data-id=\"025679c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<section class=\"hpb-bento\" id=\"about\" dir=\"rtl\">\r\n\r\n  <div class=\"hpb-noise\"><\/div>\r\n  <div class=\"hpb-orb hpb-orb-1\"><\/div>\r\n  <div class=\"hpb-orb hpb-orb-2\"><\/div>\r\n\r\n  <div class=\"hpb-marquee\">\r\n    <div class=\"hpb-marquee-track\">\r\n      <span>\u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/span><span class=\"hpb-star\">\u2726<\/span>\r\n      <span>\u062a\u0635\u062f\u064a\u0631<\/span><span class=\"hpb-star\">\u2726<\/span>\r\n      <span>\u062c\u0648\u062f\u0629<\/span><span class=\"hpb-star\">\u2726<\/span>\r\n      <span>\u062a\u062c\u0627\u0631\u0629 \u0639\u0627\u0644\u0645\u064a\u0629<\/span><span class=\"hpb-star\">\u2726<\/span>\r\n      <span>\u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/span><span class=\"hpb-star\">\u2726<\/span>\r\n      <span>\u062a\u0635\u062f\u064a\u0631<\/span><span class=\"hpb-star\">\u2726<\/span>\r\n      <span>\u062c\u0648\u062f\u0629<\/span><span class=\"hpb-star\">\u2726<\/span>\r\n      <span>\u062a\u062c\u0627\u0631\u0629 \u0639\u0627\u0644\u0645\u064a\u0629<\/span><span class=\"hpb-star\">\u2726<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"hpb-container\">\r\n\r\n    <div class=\"hpb-header\">\r\n      <div class=\"hpb-label\">\r\n        <span class=\"hpb-label-dot\"><\/span>\r\n        <span>\u0645\u0646 \u0646\u062d\u0646 \u2014 \u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a<\/span>\r\n      <\/div>\r\n\r\n      <h2 class=\"hpb-headline\">\r\n        \u0646\u0646\u0642\u0644 <em>\u0627\u0644\u062c\u0648\u062f\u0629<\/em><br>\r\n        \u0639\u0628\u0631 <span class=\"hpb-highlight\">\u0627\u0644\u062d\u062f\u0648\u062f<\/span>.\r\n      <\/h2>\r\n\r\n      <p class=\"hpb-sub\">\r\n        \u0634\u0631\u0643\u0629 \u0645\u0635\u0631\u064a\u0629 \u062d\u062f\u064a\u062b\u0629 \u0644\u0644\u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0648\u0627\u0644\u062a\u0635\u062f\u064a\u0631 \u2014 \u0646\u0628\u0646\u064a \u0627\u0644\u062b\u0642\u0629 \u0628\u064a\u0646 \u0627\u0644\u0645\u0648\u0631\u062f\u064a\u0646\r\n        \u0648\u0627\u0644\u0623\u0633\u0648\u0627\u0642\u060c \u0634\u062d\u0646\u0629 \u062a\u0644\u0648 \u0627\u0644\u0623\u062e\u0631\u0649.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"hpb-grid\">\r\n\r\n      <div class=\"hpb-card hpb-card-1\" data-reveal>\r\n        <div class=\"hpb-card-bg-img\"><\/div>\r\n        <div class=\"hpb-card-content\">\r\n          <span class=\"hpb-card-tag\">01 \/ \u0642\u0635\u062a\u0646\u0627<\/span>\r\n          <h3>\u0627\u0646\u0637\u0644\u0642\u0646\u0627 \u0645\u0646 \u0628\u0646\u0647\u0627.<br>\u0645\u0648\u062b\u0648\u0642\u0648\u0646 \u0639\u0627\u0644\u0645\u064a\u064b\u0627.<\/h3>\r\n          <p>\r\n            \u0645\u0646 \u0642\u0644\u0628 \u062f\u0644\u062a\u0627 \u0627\u0644\u0646\u064a\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u0648\u0627\u0646\u0626 \u0639\u0628\u0631 \u0627\u0644\u0642\u0627\u0631\u0627\u062a \u2014 \u0646\u0645\u062a \u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a\r\n            \u0644\u062a\u0635\u0628\u062d \u0634\u0631\u064a\u0643\u064b\u0627 \u062a\u062c\u0627\u0631\u064a\u064b\u0627 \u0645\u062a\u0643\u0627\u0645\u0644\u064b\u0627 \u0641\u064a \u0642\u0637\u0627\u0639\u0627\u062a \u0627\u0644\u0637\u0628 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u060c \u0648\u0627\u0644\u0632\u0631\u0627\u0639\u0629\u060c\r\n            \u0648\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0637\u0627\u0632\u062c\u0629.\r\n          <\/p>\r\n        <\/div>\r\n        <div class=\"hpb-card-arrow\">\r\n          <i class=\"fa-solid fa-arrow-up-left-from-square\"><\/i>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hpb-card hpb-card-2\" data-reveal>\r\n        <span class=\"hpb-card-tag\">02 \/ \u0623\u0631\u0642\u0627\u0645\u0646\u0627<\/span>\r\n        <div class=\"hpb-counter-block\">\r\n          <div class=\"hpb-counter-row\">\r\n            <span class=\"hpb-counter-value\" data-count=\"15\">15<\/span>\r\n            <span class=\"hpb-counter-plus\">+<\/span>\r\n          <\/div>\r\n          <span class=\"hpb-counter-name\">\u062f\u0648\u0644\u0629 \u0646\u062e\u062f\u0645\u0647\u0627<\/span>\r\n        <\/div>\r\n        <div class=\"hpb-counter-block\">\r\n          <div class=\"hpb-counter-row\">\r\n            <span class=\"hpb-counter-value\" data-count=\"500\">500<\/span>\r\n            <span class=\"hpb-counter-plus\">+<\/span>\r\n          <\/div>\r\n          <span class=\"hpb-counter-name\">\u0645\u0646\u062a\u062c<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hpb-card hpb-card-3\" data-reveal>\r\n        <div class=\"hpb-icon-box\">\r\n          <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n        <\/div>\r\n        <h4>\u062c\u0648\u062f\u0629 \u0645\u0639\u062a\u0645\u062f\u0629<\/h4>\r\n        <p>\u0643\u0644 \u0645\u0646\u062a\u062c \u064a\u062c\u062a\u0627\u0632 \u0645\u0639\u0627\u064a\u064a\u0631 \u062f\u0648\u0644\u064a\u0629 \u0635\u0627\u0631\u0645\u0629 \u0642\u0628\u0644 \u0623\u0646 \u064a\u063a\u0627\u062f\u0631 \u0623\u064a\u062f\u064a\u0646\u0627.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"hpb-card hpb-card-4\" data-reveal>\r\n        <span class=\"hpb-card-tag\">03 \/ \u0645\u062c\u0627\u0644\u0627\u062a\u0646\u0627<\/span>\r\n        <h4>\u0645\u0627\u0630\u0627 \u0646\u062a\u062f\u0627\u0648\u0644<\/h4>\r\n        <div class=\"hpb-tags\">\r\n          <span>\u0628\u064a\u0637\u0631\u064a<\/span>\r\n          <span>\u0623\u0633\u0645\u062f\u0629<\/span>\r\n          <span>\u0628\u0630\u0648\u0631<\/span>\r\n          <span>\u0645\u0628\u064a\u062f\u0627\u062a<\/span>\r\n          <span>\u0641\u0648\u0627\u0643\u0647 \u0637\u0627\u0632\u062c\u0629<\/span>\r\n          <span>\u0645\u062c\u0645\u062f\u0629<\/span>\r\n          <span>\u0639\u0635\u0627\u0626\u0631<\/span>\r\n          <span>\u062d\u0644\u0648\u064a\u0627\u062a<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hpb-card hpb-card-5\" data-reveal>\r\n        <i class=\"fa-solid fa-quote-left hpb-quote-icon\"><\/i>\r\n        <p class=\"hpb-quote\">\r\n          \u0627\u0644\u062a\u0645\u064a\u0632 \u0644\u064a\u0633 \u0648\u062c\u0647\u0629 \u2014 \u0628\u0644 \u0627\u0644\u0645\u0639\u064a\u0627\u0631 \u0627\u0644\u0630\u064a \u0646\u0631\u0633\u0644 \u0628\u0647 \u0643\u0644 \u0634\u062d\u0646\u0629.\r\n        <\/p>\r\n        <div class=\"hpb-quote-author\">\r\n          <span class=\"hpb-quote-line\"><\/span>\r\n          <span>\u0641\u0631\u064a\u0642 \u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hpb-card hpb-card-6\" data-reveal>\r\n        <h4>\u062c\u0627\u0647\u0632 \u0644\u0644\u062a\u0639\u0627\u0645\u0644<br>\u0645\u0639\u0646\u0627\u061f<\/h4>\r\n        <a href=\"https:\/\/wa.me\/201000049051?text=\u0645\u0631\u062d\u0628\u064b\u0627%20HP%20Group\u060c%20\u0623\u0648\u062f%20\u0627\u0644\u062a\u0648\u0627\u0635\u0644%20\u0645\u0639\u0643\u0645.\"\r\n           target=\"_blank\"\r\n           rel=\"noopener\"\r\n           class=\"hpb-cta\">\r\n          <i class=\"fa-brands fa-whatsapp hpb-cta-wa-icon\"><\/i>\r\n          <span>\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/span>\r\n          <i class=\"fa-solid fa-arrow-left hpb-cta-arrow\"><\/i>\r\n        <\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== Base ===== *\/\r\n.hpb-bento{\r\n  position:relative;\r\n  padding:20px 0px;\r\n  background:#050a07;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  color:#fff;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  width:100%;\r\n  box-sizing:border-box;\r\n  border-radius: 20px;\r\n  direction:rtl;\r\n}\r\n.hpb-bento *,\r\n.hpb-bento *::before,\r\n.hpb-bento *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n\/* \u2705 \u0641\u0631\u0636 El Messiri \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0633\u064a\u0643\u0634\u0646 *\/\r\n.hpb-bento,\r\n.hpb-bento *{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n.hpb-noise{\r\n  position:absolute; inset:0;\r\n  background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'\/%3E%3C\/svg%3E\");\r\n  opacity:.08;\r\n  pointer-events:none;\r\n  z-index:1;\r\n}\r\n\r\n.hpb-orb{\r\n  position:absolute;\r\n  border-radius:50%;\r\n  filter:blur(140px);\r\n  pointer-events:none;\r\n  z-index:0;\r\n}\r\n.hpb-orb-1{\r\n  width:700px; height:700px;\r\n  background:radial-gradient(circle,rgba(60,153,59,.45),transparent 70%);\r\n  top:-250px; right:-250px;\r\n  animation:hpbFloat1 18s ease-in-out infinite;\r\n}\r\n.hpb-orb-2{\r\n  width:600px; height:600px;\r\n  background:radial-gradient(circle,rgba(136,136,136,.22),transparent 70%);\r\n  bottom:-200px; left:-200px;\r\n  animation:hpbFloat2 22s ease-in-out infinite;\r\n}\r\n@keyframes hpbFloat1{\r\n  0%,100%{ transform:translate(0,0); }\r\n  50%{ transform:translate(-80px,60px); }\r\n}\r\n@keyframes hpbFloat2{\r\n  0%,100%{ transform:translate(0,0); }\r\n  50%{ transform:translate(70px,-50px); }\r\n}\r\n\r\n\/* ===== Marquee ===== *\/\r\n.hpb-marquee{\r\n  position:relative;\r\n  z-index:2;\r\n  overflow:hidden;\r\n  border-top:1px solid rgba(255,255,255,.08);\r\n  border-bottom:1px solid rgba(255,255,255,.08);\r\n  padding:22px 0;\r\n  margin-bottom:70px;\r\n  width:100%;\r\n  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);\r\n          mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);\r\n}\r\n.hpb-marquee-track{\r\n  display:flex;\r\n  gap:40px;\r\n  width:max-content;\r\n  animation:hpbMarqueeScroll 28s linear infinite;\r\n}\r\n.hpb-marquee-track span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:26px;\r\n  font-weight:400;\r\n  letter-spacing:2px;\r\n  color:rgba(255,255,255,.35);\r\n  white-space:nowrap;\r\n}\r\n.hpb-star{\r\n  color:#3C993B !important;\r\n  font-size:18px !important;\r\n  letter-spacing:0 !important;\r\n}\r\n@keyframes hpbMarqueeScroll{\r\n  from{ transform:translateX(0); }\r\n  to{ transform:translateX(50%); }\r\n}\r\n\r\n\/* ===== Container ===== *\/\r\n.hpb-container{\r\n  max-width:100%;\r\n  width:100%;\r\n  margin:0;\r\n  padding:0 24px;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n\/* ===== Header ===== *\/\r\n.hpb-header{\r\n  margin-bottom:70px;\r\n  max-width:100%;\r\n}\r\n.hpb-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:30px;\r\n}\r\n.hpb-label-dot{\r\n  width:8px; height:8px;\r\n  background:#3C993B;\r\n  border-radius:50%;\r\n  position:relative;\r\n}\r\n.hpb-label-dot::after{\r\n  content:\"\";\r\n  position:absolute; inset:-4px;\r\n  border:1px solid rgba(60,153,59,.4);\r\n  border-radius:50%;\r\n  animation:hpbPulse 2s ease-out infinite;\r\n}\r\n@keyframes hpbPulse{\r\n  0%{ transform:scale(1); opacity:1; }\r\n  100%{ transform:scale(2.2); opacity:0; }\r\n}\r\n.hpb-label span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 Headline \u2014 El Messiri \u0635\u0631\u064a\u062d *\/\r\n.hpb-headline{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(38px, 6.5vw, 88px);\r\n  line-height:1.1;\r\n  font-weight:700;\r\n  letter-spacing:-1.5px;\r\n  margin:0 0 30px;\r\n  color:#fff;\r\n  max-width:1100px;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 em \u2014 El Messiri \u0628\u062f\u0644 Playfair Display (\u0645\u0634 \u0628\u064a\u062f\u0639\u0645 \u0639\u0631\u0628\u064a) *\/\r\n.hpb-headline em{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-weight:700;\r\n  color:#3C993B;\r\n}\r\n\r\n.hpb-highlight{\r\n  position:relative;\r\n  display:inline-block;\r\n}\r\n.hpb-highlight::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  right:0; bottom:8px;\r\n  width:100%; height:14px;\r\n  background:linear-gradient(270deg,#2e7a2d,#3C993B);\r\n  z-index:-1;\r\n  border-radius:3px;\r\n  opacity:.6;\r\n}\r\n\r\n.hpb-sub{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  line-height:1.9;\r\n  color:#94a89b;\r\n  max-width:700px;\r\n  margin:0;\r\n  font-weight:400;\r\n}\r\n\r\n\/* ===== Bento Grid ===== *\/\r\n.hpb-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(6,1fr);\r\n  grid-auto-rows:minmax(200px, auto);\r\n  gap:18px;\r\n  width:100%;\r\n}\r\n\r\n.hpb-card{\r\n  background:rgba(255,255,255,.03);\r\n  border:1px solid rgba(255,255,255,.07);\r\n  border-radius:20px;\r\n  padding:32px;\r\n  position:relative;\r\n  overflow:hidden;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  opacity:0;\r\n  transform:translateY(40px);\r\n}\r\n.hpb-card.hpb-revealed{\r\n  opacity:1;\r\n  transform:translateY(0);\r\n}\r\n.hpb-card:hover{\r\n  border-color:rgba(60,153,59,.4);\r\n  background:rgba(60,153,59,.06);\r\n  transform:translateY(-4px);\r\n}\r\n\r\n.hpb-card-1{\r\n  grid-column:span 4;\r\n  grid-row:span 2;\r\n  padding:0;\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:flex-end;\r\n  min-height:440px;\r\n}\r\n.hpb-card-bg-img{\r\n  position:absolute; inset:0;\r\n  background:\r\n    linear-gradient(180deg, rgba(5,10,7,.2) 0%, rgba(5,10,7,.95) 100%),\r\n    url(\"https:\/\/images.unsplash.com\/photo-1578575437130-527eed3abbec?w=1200\") center\/cover;\r\n  transition:transform 1.5s cubic-bezier(.2,.8,.2,1);\r\n  z-index:0;\r\n}\r\n.hpb-card-1:hover .hpb-card-bg-img{\r\n  transform:scale(1.05);\r\n}\r\n.hpb-card-content{\r\n  position:relative;\r\n  z-index:1;\r\n  padding:36px 36px 40px;\r\n  text-align:right;\r\n}\r\n.hpb-card-tag{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:2px;\r\n  color:#3C993B;\r\n  font-weight:600;\r\n  display:block;\r\n  margin-bottom:16px;\r\n}\r\n.hpb-card-content h3{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(24px, 3vw, 38px);\r\n  line-height:1.25;\r\n  font-weight:700;\r\n  margin:0 0 16px;\r\n  letter-spacing:-.5px;\r\n  color:#fff;\r\n}\r\n.hpb-card-content p{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  color:#c9d6cf;\r\n  line-height:1.9;\r\n  font-size:15px;\r\n  margin:0;\r\n  max-width:520px;\r\n  font-weight:400;\r\n}\r\n.hpb-card-arrow{\r\n  position:absolute;\r\n  top:28px; left:28px;\r\n  width:48px; height:48px;\r\n  background:rgba(255,255,255,.08);\r\n  border:1px solid rgba(255,255,255,.15);\r\n  border-radius:50%;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#fff;\r\n  font-size:14px;\r\n  backdrop-filter:blur(10px);\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  z-index:2;\r\n}\r\n.hpb-card-1:hover .hpb-card-arrow{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:rotate(45deg);\r\n}\r\n\r\n\/* ===== Card 2 \u2014 Numbers ===== *\/\r\n.hpb-card-2{\r\n  grid-column:span 2;\r\n  grid-row:span 2;\r\n  background:linear-gradient(135deg, rgba(60,153,59,.15), rgba(60,153,59,.05));\r\n  border-color:rgba(60,153,59,.25);\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:space-between;\r\n  padding:32px;\r\n}\r\n.hpb-counter-block{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:4px;\r\n}\r\n.hpb-counter-row{\r\n  display:flex;\r\n  align-items:flex-start;\r\n  line-height:1;\r\n  flex-direction:row-reverse;\r\n  justify-content:flex-end;\r\n}\r\n.hpb-counter-value{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(48px, 5vw, 72px);\r\n  font-weight:700;\r\n  letter-spacing:-2px;\r\n  color:#fff;\r\n  font-variant-numeric:tabular-nums;\r\n  display:inline-block;\r\n  direction:ltr;\r\n}\r\n.hpb-counter-plus{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:32px;\r\n  color:#3C993B;\r\n  font-weight:600;\r\n  margin-top:8px;\r\n  margin-left:6px;\r\n}\r\n.hpb-counter-name{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:1px;\r\n  color:#94a89b;\r\n  font-weight:500;\r\n}\r\n\r\n\/* ===== Card 3 ===== *\/\r\n.hpb-card-3{\r\n  grid-column:span 2;\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:space-between;\r\n}\r\n.hpb-icon-box{\r\n  width:56px; height:56px;\r\n  border-radius:14px;\r\n  background:linear-gradient(135deg,#2e7a2d,#3C993B);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  font-size:22px;\r\n  color:#fff;\r\n  margin-bottom:24px;\r\n  box-shadow:0 8px 24px rgba(60,153,59,.4);\r\n}\r\n.hpb-card-3 h4{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:18px;\r\n  margin:0 0 10px;\r\n  font-weight:600;\r\n  color:#fff;\r\n}\r\n.hpb-card-3 p{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  color:#94a89b;\r\n  font-size:14px;\r\n  line-height:1.85;\r\n  margin:0;\r\n  font-weight:400;\r\n}\r\n\r\n\/* ===== Card 4 ===== *\/\r\n.hpb-card-4{\r\n  grid-column:span 2;\r\n  grid-row:span 2;\r\n}\r\n.hpb-card-4 h4{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:22px;\r\n  font-weight:700;\r\n  margin:0 0 22px;\r\n  letter-spacing:-.3px;\r\n}\r\n.hpb-tags{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:8px;\r\n}\r\n.hpb-tags span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  padding:8px 14px;\r\n  background:rgba(255,255,255,.05);\r\n  border:1px solid rgba(255,255,255,.1);\r\n  border-radius:100px;\r\n  font-size:12.5px;\r\n  color:#c9d6cf;\r\n  transition:.3s;\r\n  cursor:default;\r\n  font-weight:400;\r\n}\r\n.hpb-tags span:hover{\r\n  background:#3C993B;\r\n  color:#fff;\r\n  border-color:#3C993B;\r\n  transform:translateY(-2px);\r\n}\r\n\r\n\/* ===== Card 5 ===== *\/\r\n.hpb-card-5{\r\n  grid-column:span 2;\r\n  background:linear-gradient(135deg, rgba(60,153,59,.08), rgba(60,153,59,.02));\r\n  border-color:rgba(60,153,59,.2);\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:space-between;\r\n}\r\n.hpb-quote-icon{\r\n  color:#3C993B;\r\n  font-size:22px;\r\n  margin-bottom:20px;\r\n}\r\n.hpb-quote{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-size:17px;\r\n  line-height:1.75;\r\n  color:#fff;\r\n  margin:0 0 24px;\r\n  font-weight:700;\r\n}\r\n.hpb-quote-author{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:12px;\r\n}\r\n.hpb-quote-line{\r\n  flex:1;\r\n  height:1px;\r\n  background:linear-gradient(90deg,#3C993B,transparent);\r\n}\r\n.hpb-quote-author span:last-child{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:1px;\r\n  color:#94a89b;\r\n  font-weight:600;\r\n}\r\n\r\n\/* ===== Card 6 \u2014 CTA ===== *\/\r\n.hpb-card-6{\r\n  grid-column:span 2;\r\n  background:linear-gradient(135deg,#3C993B 0%,#2e7a2d 100%);\r\n  border-color:transparent;\r\n  color:#fff;\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:space-between;\r\n  padding:32px;\r\n}\r\n.hpb-card-6 h4{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:24px;\r\n  line-height:1.3;\r\n  font-weight:700;\r\n  letter-spacing:-.3px;\r\n  color:#fff;\r\n  margin:0 0 24px;\r\n}\r\n.hpb-cta{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  padding:16px 22px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-weight:600;\r\n  font-size:14px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  box-shadow:0 15px 35px -12px rgba(0,0,0,.3);\r\n}\r\n.hpb-cta-wa-icon{\r\n  font-size:20px;\r\n}\r\n.hpb-cta span{\r\n  flex:1;\r\n  text-align:center;\r\n}\r\n.hpb-cta-arrow{\r\n  transition:transform .4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hpb-cta:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 22px 45px -14px rgba(37,211,102,.7);\r\n}\r\n.hpb-cta:hover .hpb-cta-arrow{\r\n  transform:translateX(-5px);\r\n}\r\n\r\n\/* ===== Responsive ===== *\/\r\n@media(max-width:1024px){\r\n  .hpb-grid{\r\n    grid-template-columns:repeat(4,1fr);\r\n  }\r\n  .hpb-card-1{ grid-column:span 4; }\r\n  .hpb-card-2{ grid-column:span 2; grid-row:span 1; }\r\n  .hpb-card-3{ grid-column:span 2; }\r\n  .hpb-card-4{ grid-column:span 2; grid-row:span 1; }\r\n  .hpb-card-5{ grid-column:span 2; }\r\n  .hpb-card-6{ grid-column:span 2; }\r\n}\r\n\r\n@media(max-width:680px){\r\n  .hpb-bento{ padding:12px 0px; }\r\n  .hpb-container{ padding:0 14px; }\r\n  .hpb-marquee{ margin-bottom:50px; }\r\n  .hpb-marquee-track span{ font-size:16px; letter-spacing:1px; }\r\n  .hpb-header{ margin-bottom:50px; }\r\n  .hpb-headline{ letter-spacing:-.5px; }\r\n  .hpb-grid{\r\n    grid-template-columns:1fr;\r\n    gap:14px;\r\n  }\r\n  .hpb-card-1,\r\n  .hpb-card-2,\r\n  .hpb-card-3,\r\n  .hpb-card-4,\r\n  .hpb-card-5,\r\n  .hpb-card-6{\r\n    grid-column:span 1;\r\n    grid-row:span 1;\r\n  }\r\n  .hpb-card-1{ min-height:340px; }\r\n  .hpb-card{ padding:26px; }\r\n  .hpb-card-content{ padding:26px 26px 30px; }\r\n  .hpb-counter-value{ font-size:56px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/* ==================================================\r\n   HP Bento \u2014 Reveal + Counter\r\n   Prefix: hpb- (unique, no conflicts)\r\n   ================================================== *\/\r\n\r\n(function(){\r\n  'use strict';\r\n\r\n  function hpbBentoInit(){\r\n\r\n    \/* ---------- 1) Reveal cards ---------- *\/\r\n    var cards = document.querySelectorAll('.hpb-card[data-reveal]');\r\n    if(cards.length){\r\n      if('IntersectionObserver' in window){\r\n        var ioCards = new IntersectionObserver(function(entries){\r\n          entries.forEach(function(entry, i){\r\n            if(entry.isIntersecting){\r\n              setTimeout(function(){\r\n                entry.target.classList.add('hpb-revealed');\r\n              }, i * 90);\r\n              ioCards.unobserve(entry.target);\r\n            }\r\n          });\r\n        }, { threshold: 0.15 });\r\n        for(var i = 0; i < cards.length; i++){\r\n          ioCards.observe(cards[i]);\r\n        }\r\n      } else {\r\n        for(var j = 0; j < cards.length; j++){\r\n          cards[j].classList.add('hpb-revealed');\r\n        }\r\n      }\r\n    }\r\n\r\n    \/* ---------- 2) Counter animation ---------- *\/\r\n    var values = document.querySelectorAll('.hpb-counter-value');\r\n    if(!values.length) return;\r\n\r\n    function animateValue(el, target){\r\n      var dur = 1600;\r\n      var start = performance.now();\r\n      el.textContent = '0';\r\n\r\n      function tick(now){\r\n        var p = Math.min((now - start) \/ dur, 1);\r\n        var eased = 1 - Math.pow(1 - p, 3);\r\n        var val = Math.floor(eased * target);\r\n        el.textContent = val.toLocaleString();\r\n        if(p < 1){\r\n          requestAnimationFrame(tick);\r\n        } else {\r\n          el.textContent = target.toLocaleString();\r\n        }\r\n      }\r\n      requestAnimationFrame(tick);\r\n    }\r\n\r\n    function prepareAndRun(el){\r\n      if(el.dataset.hpbDone === '1') return;\r\n      el.dataset.hpbDone = '1';\r\n\r\n      var raw = el.getAttribute('data-count');\r\n      var target = parseInt(raw, 10);\r\n\r\n      if(!target || isNaN(target)){\r\n        var txt = (el.textContent || '').replace(\/[^0-9]\/g, '');\r\n        target = parseInt(txt, 10);\r\n      }\r\n\r\n      if(!target || isNaN(target) || target <= 0){\r\n        return;\r\n      }\r\n\r\n      animateValue(el, target);\r\n    }\r\n\r\n    if('IntersectionObserver' in window){\r\n      var ioVals = new IntersectionObserver(function(entries){\r\n        entries.forEach(function(entry){\r\n          if(entry.isIntersecting){\r\n            prepareAndRun(entry.target);\r\n            ioVals.unobserve(entry.target);\r\n          }\r\n        });\r\n      }, { threshold: 0.3 });\r\n\r\n      for(var k = 0; k < values.length; k++){\r\n        ioVals.observe(values[k]);\r\n      }\r\n    } else {\r\n      for(var m = 0; m < values.length; m++){\r\n        prepareAndRun(values[m]);\r\n      }\r\n    }\r\n  }\r\n\r\n  if(document.readyState === 'loading'){\r\n    document.addEventListener('DOMContentLoaded', hpbBentoInit);\r\n  } else {\r\n    hpbBentoInit();\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7996881 e-con-full e-flex e-con e-child\" data-id=\"7996881\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-98a5727 elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"98a5727\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<section class=\"hp-export\" id=\"export\" dir=\"rtl\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"hp-export-header\">\r\n    <div class=\"hp-export-label\">\r\n      <span class=\"hp-export-dot\"><\/span>\r\n      <span>\u0645\u0627 \u0646\u0635\u062f\u0631\u0647<\/span>\r\n    <\/div>\r\n\r\n    <h2 class=\"hp-export-title\">\r\n      \u0645\u0646 \u0645\u0635\u0631\u060c<br>\r\n      <em>\u0625\u0644\u0649 \u0627\u0644\u0639\u0627\u0644\u0645.<\/em>\r\n    <\/h2>\r\n\r\n    <p class=\"hp-export-sub\">\r\n      \u0637\u0627\u0632\u062c\u060c \u0645\u062c\u0645\u062f\u060c \u0648\u0645\u0635\u0646\u0651\u0639 \u2014 \u062e\u0637 \u0627\u0644\u062a\u0635\u062f\u064a\u0631 \u0644\u062f\u064a\u0646\u0627 \u064a\u062d\u0645\u0644 \u0623\u062c\u0648\u062f \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a\r\n      \u0627\u0644\u0645\u0635\u0631\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0623\u0633\u0648\u0627\u0642 \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645.\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <!-- Interactive List + Image -->\r\n  <div class=\"hp-export-body\">\r\n\r\n    <!-- Right: The List -->\r\n    <ul class=\"hp-export-list\" id=\"exportList\">\r\n\r\n      <li class=\"hp-export-item active\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1610832958506-aa56368176cf?w=1200\"\r\n          data-tag=\"01\">\r\n        <span class=\"hp-export-num\">01<\/span>\r\n        <span class=\"hp-export-name\">\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0637\u0627\u0632\u062c\u0629<\/span>\r\n        <span class=\"hp-export-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-export-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-export-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1584270354949-c26b0d5b4a0c?w=1200\"\r\n          data-tag=\"02\">\r\n        <span class=\"hp-export-num\">02<\/span>\r\n        <span class=\"hp-export-name\">\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0645\u062c\u0645\u062f\u0629<\/span>\r\n        <span class=\"hp-export-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-export-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-export-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1464965911861-746a04b4bca6?w=1200\"\r\n          data-tag=\"03\">\r\n        <span class=\"hp-export-num\">03<\/span>\r\n        <span class=\"hp-export-name\">\u0627\u0644\u0641\u0631\u0627\u0648\u0644\u0629<\/span>\r\n        <span class=\"hp-export-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-export-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-export-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1540420773420-3366772f4999?w=1200\"\r\n          data-tag=\"04\">\r\n        <span class=\"hp-export-num\">04<\/span>\r\n        <span class=\"hp-export-name\">\u062e\u0636\u0627\u0631 \u0645\u0634\u0643\u0644<\/span>\r\n        <span class=\"hp-export-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-export-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-export-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1518977676601-b53f82aba655?w=1200\"\r\n          data-tag=\"05\">\r\n        <span class=\"hp-export-num\">05<\/span>\r\n        <span class=\"hp-export-name\">\u0628\u0637\u0627\u0637\u0633 \u0646\u0635\u0641 \u0645\u062c\u0645\u062f\u0629<\/span>\r\n        <span class=\"hp-export-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-export-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-export-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1600271886742-f049cd451bba?w=1200\"\r\n          data-tag=\"06\">\r\n        <span class=\"hp-export-num\">06<\/span>\r\n        <span class=\"hp-export-name\">\u0645\u0634\u0631\u0648\u0628\u0627\u062a \u0648\u0639\u0635\u0627\u0626\u0631<\/span>\r\n        <span class=\"hp-export-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-export-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-export-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1622597467836-f3285f2131b8?w=1200\"\r\n          data-tag=\"07\">\r\n        <span class=\"hp-export-num\">07<\/span>\r\n        <span class=\"hp-export-name\">\u0639\u0635\u0627\u0626\u0631 \u0648\u0645\u0634\u0631\u0648\u0628 \u0632\u0628\u064a\u0628 \u063a\u0627\u0632\u064a<\/span>\r\n        <span class=\"hp-export-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-export-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-export-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1582058091505-f87a2e55a40f?w=1200\"\r\n          data-tag=\"08\">\r\n        <span class=\"hp-export-num\">08<\/span>\r\n        <span class=\"hp-export-name\">\u062d\u0644\u0648\u064a\u0627\u062a<\/span>\r\n        <span class=\"hp-export-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-export-bar\"><\/span>\r\n      <\/li>\r\n\r\n    <\/ul>\r\n\r\n    <!-- Left: Image Preview -->\r\n    <div class=\"hp-export-preview\">\r\n      <div class=\"hp-export-img-wrap\">\r\n        <img decoding=\"async\" id=\"exportImg\"\r\n             src=\"https:\/\/images.unsplash.com\/photo-1610832958506-aa56368176cf?w=1200\"\r\n             alt=\"Export Preview\">\r\n        <div class=\"hp-export-img-overlay\"><\/div>\r\n\r\n        <div class=\"hp-export-meta\">\r\n          <span class=\"hp-export-meta-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u062a\u0635\u062f\u064a\u0631<\/span>\r\n          <span class=\"hp-export-meta-counter\" id=\"exportCounter\">01 \/ 08<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"hp-export-caption\">\r\n          <span class=\"hp-export-caption-lbl\">\u062a\u0634\u0627\u0647\u062f\u0647 \u0627\u0644\u0622\u0646<\/span>\r\n          <h3 id=\"exportCaptionTitle\">\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0637\u0627\u0632\u062c\u0629<\/h3>\r\n        <\/div>\r\n\r\n        <!-- WhatsApp Button (\u0641\u0648\u0642 \u0627\u0644\u0635\u0648\u0631\u0629) -->\r\n        <a href=\"#\" class=\"hp-export-wa\" id=\"waPreviewBtn\"\r\n           data-product=\"\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0637\u0627\u0632\u062c\u0629\">\r\n          <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n          <span>\u0627\u0637\u0644\u0628 \u0647\u0630\u0627 \u0627\u0644\u0645\u0646\u062a\u062c<\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- Decorations -->\r\n      <div class=\"hp-export-deco-circle\"><\/div>\r\n      <div class=\"hp-export-deco-line\"><\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Bottom CTA -->\r\n  <div class=\"hp-export-footer\">\r\n    <div class=\"hp-export-footer-left\">\r\n      <i class=\"fa-solid fa-truck-fast\"><\/i>\r\n      <span>\u0634\u062d\u0646 \u0639\u0627\u0644\u0645\u064a \u0648\u062c\u0627\u0647\u0632\u064a\u0629 \u0633\u0644\u0633\u0644\u0629 \u0627\u0644\u062a\u0628\u0631\u064a\u062f<\/span>\r\n    <\/div>\r\n    <a href=\"#\" class=\"hp-export-cta\" id=\"waFooterBtn\">\r\n      <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n      <span>\u0627\u0637\u0644\u0628 \u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u062a\u0635\u062f\u064a\u0631<\/span>\r\n      <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n    <\/a>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== Base ===== *\/\r\n.hp-export{\r\n  position:relative;\r\n  width:100%;\r\n  background:#fafaf7;\r\n  padding:20px 20px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  color:#0b2c1d;\r\n  box-sizing:border-box;\r\n  direction:rtl;\r\n}\r\n.hp-export *,\r\n.hp-export *::before,\r\n.hp-export *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n\/* \u2705 \u0641\u0631\u0636 El Messiri \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0633\u064a\u0643\u0634\u0646 *\/\r\n.hp-export,\r\n.hp-export *{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* Big background word *\/\r\n.hp-export::before{\r\n  content:\"\u062a\u0635\u062f\u064a\u0631\";\r\n  position:absolute;\r\n  top:40px;\r\n  left:-40px;\r\n  font-size:280px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.08);\r\n  letter-spacing:-8px;\r\n  pointer-events:none;\r\n  line-height:1;\r\n  z-index:0;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* ===== Header ===== *\/\r\n.hp-export-header{\r\n  max-width:820px;\r\n  margin:0 0 80px;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n.hp-export-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:26px;\r\n}\r\n.hp-export-dot{\r\n  width:8px;\r\n  height:8px;\r\n  background:#3C993B;\r\n  border-radius:50%;\r\n  position:relative;\r\n}\r\n.hp-export-dot::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-4px;\r\n  border:1px solid rgba(60,153,59,.4);\r\n  border-radius:50%;\r\n  animation:hpPulse 2s ease-out infinite;\r\n}\r\n@keyframes hpPulse{\r\n  0%{ transform:scale(1); opacity:1; }\r\n  100%{ transform:scale(2.4); opacity:0; }\r\n}\r\n.hp-export-label span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-export-title{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(42px, 5.5vw, 84px);\r\n  line-height:1.15;\r\n  font-weight:700;\r\n  letter-spacing:-1.2px;\r\n  margin:0 0 24px;\r\n  color:#0b2c1d;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 em \u2014 El Messiri \u0628\u062f\u0644 Playfair Display *\/\r\n.hp-export-title em{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-weight:700;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-export-sub{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  max-width:560px;\r\n  margin:0;\r\n  font-weight:400;\r\n}\r\n\r\n\/* ===== Body Layout ===== *\/\r\n.hp-export-body{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:70px;\r\n  position:relative;\r\n  z-index:2;\r\n  margin-bottom:70px;\r\n  align-items:flex-start;\r\n}\r\n\r\n\/* ===== List ===== *\/\r\n.hp-export-list{\r\n  list-style:none;\r\n  padding:0;\r\n  margin:0;\r\n  display:flex;\r\n  flex-direction:column;\r\n  border-top:1px solid rgba(11,44,29,.1);\r\n}\r\n\r\n.hp-export-item{\r\n  position:relative;\r\n  display:grid;\r\n  grid-template-columns:56px 1fr auto;\r\n  align-items:center;\r\n  gap:20px;\r\n  padding:26px 0;\r\n  border-bottom:1px solid rgba(11,44,29,.1);\r\n  cursor:pointer;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  overflow:hidden;\r\n}\r\n\r\n.hp-export-num{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:14px;\r\n  font-weight:600;\r\n  color:#888888;\r\n  letter-spacing:2px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  font-variant-numeric:tabular-nums;\r\n}\r\n\r\n.hp-export-name{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(18px, 1.6vw, 24px);\r\n  font-weight:600;\r\n  color:#0b2c1d;\r\n  letter-spacing:-.3px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  display:inline-block;\r\n}\r\n\r\n.hp-export-arrow{\r\n  width:44px;\r\n  height:44px;\r\n  border-radius:50%;\r\n  border:1px solid rgba(11,44,29,.12);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#0b2c1d;\r\n  font-size:13px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  background:transparent;\r\n  flex-shrink:0;\r\n}\r\n\r\n\/* progress bar *\/\r\n.hp-export-bar{\r\n  position:absolute;\r\n  right:0;\r\n  bottom:0;\r\n  height:2px;\r\n  width:0;\r\n  background:linear-gradient(90deg,#888888,#3C993B);\r\n  border-radius:2px;\r\n  transition:.2s linear;\r\n}\r\n\r\n\/* Hover \/ Active state *\/\r\n.hp-export-item:hover .hp-export-num,\r\n.hp-export-item.active .hp-export-num{\r\n  color:#3C993B;\r\n}\r\n.hp-export-item:hover .hp-export-name,\r\n.hp-export-item.active .hp-export-name{\r\n  color:#3C993B;\r\n  transform:translateX(-12px);\r\n}\r\n.hp-export-item:hover .hp-export-arrow,\r\n.hp-export-item.active .hp-export-arrow{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:rotate(45deg);\r\n}\r\n\r\n\/* ===== Preview (Image) ===== *\/\r\n.hp-export-preview{\r\n  position:sticky;\r\n  top:60px;\r\n  height:580px;\r\n  position:relative;\r\n}\r\n\r\n.hp-export-img-wrap{\r\n  position:relative;\r\n  width:100%;\r\n  height:100%;\r\n  border-radius:24px;\r\n  overflow:hidden;\r\n  box-shadow:0 50px 100px -30px rgba(11,44,29,.35);\r\n  background:#0b2c1d;\r\n}\r\n\r\n.hp-export-img-wrap img{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  transition:opacity .6s ease, transform 1.4s cubic-bezier(.2,.8,.2,1);\r\n  display:block;\r\n}\r\n.hp-export-img-wrap img.switching{\r\n  opacity:0;\r\n  transform:scale(1.06);\r\n}\r\n\r\n.hp-export-img-overlay{\r\n  position:absolute;\r\n  inset:0;\r\n  background:linear-gradient(\r\n    180deg,\r\n    rgba(11,44,29,.15) 0%,\r\n    rgba(11,44,29,0) 30%,\r\n    rgba(11,44,29,0) 55%,\r\n    rgba(11,44,29,.9) 100%\r\n  );\r\n  pointer-events:none;\r\n}\r\n\r\n\/* Meta top *\/\r\n.hp-export-meta{\r\n  position:absolute;\r\n  top:24px;\r\n  left:24px;\r\n  right:24px;\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  z-index:2;\r\n}\r\n.hp-export-meta-tag{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#fff;\r\n  padding:8px 14px;\r\n  background:rgba(255,255,255,.12);\r\n  backdrop-filter:blur(12px);\r\n  border:1px solid rgba(255,255,255,.2);\r\n  border-radius:100px;\r\n}\r\n.hp-export-meta-counter{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:13px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#fff;\r\n  font-variant-numeric:tabular-nums;\r\n  padding:8px 14px;\r\n  background:rgba(60,153,59,.9);\r\n  border-radius:100px;\r\n  direction:ltr;\r\n}\r\n\r\n\/* Caption bottom *\/\r\n.hp-export-caption{\r\n  position:absolute;\r\n  left:28px;\r\n  right:28px;\r\n  bottom:100px;\r\n  z-index:2;\r\n}\r\n.hp-export-caption-lbl{\r\n  display:block;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:2px;\r\n  color:#3C993B;\r\n  font-weight:600;\r\n  margin-bottom:10px;\r\n}\r\n.hp-export-caption h3{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(20px, 2vw, 28px);\r\n  line-height:1.3;\r\n  font-weight:700;\r\n  color:#fff;\r\n  letter-spacing:-.3px;\r\n  margin:0;\r\n}\r\n\r\n\/* WhatsApp button on preview *\/\r\n.hp-export-wa{\r\n  position:absolute;\r\n  left:28px;\r\n  right:28px;\r\n  bottom:28px;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:12px;\r\n  padding:16px 24px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-weight:600;\r\n  font-size:14px;\r\n  letter-spacing:.3px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  z-index:3;\r\n  box-shadow:0 15px 35px -10px rgba(37,211,102,.6);\r\n}\r\n.hp-export-wa i{\r\n  font-size:20px;\r\n}\r\n.hp-export-wa:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 22px 45px -12px rgba(37,211,102,.75);\r\n}\r\n\r\n\/* Decorations *\/\r\n.hp-export-deco-circle{\r\n  position:absolute;\r\n  width:180px;\r\n  height:180px;\r\n  border-radius:50%;\r\n  border:1px dashed rgba(60,153,59,.4);\r\n  top:-40px;\r\n  left:-40px;\r\n  animation:hpRotate 24s linear infinite;\r\n  pointer-events:none;\r\n}\r\n@keyframes hpRotate{\r\n  to{ transform:rotate(360deg); }\r\n}\r\n.hp-export-deco-line{\r\n  position:absolute;\r\n  width:80px;\r\n  height:80px;\r\n  border-right:2px solid #3C993B;\r\n  border-bottom:2px solid #3C993B;\r\n  bottom:-24px;\r\n  right:-24px;\r\n  border-radius:0 0 12px 0;\r\n  pointer-events:none;\r\n}\r\n\r\n\/* ===== Footer ===== *\/\r\n.hp-export-footer{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  padding-top:40px;\r\n  border-top:1px solid rgba(11,44,29,.1);\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n.hp-export-footer-left{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  color:#888888;\r\n  font-size:14px;\r\n  font-weight:400;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n.hp-export-footer-left i{\r\n  color:#3C993B;\r\n  font-size:20px;\r\n}\r\n.hp-export-cta{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  padding:18px 32px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-weight:600;\r\n  font-size:14px;\r\n  letter-spacing:.3px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  box-shadow:0 15px 35px -12px rgba(37,211,102,.5);\r\n}\r\n.hp-export-cta i:first-child{\r\n  font-size:20px;\r\n}\r\n.hp-export-cta i:last-child{\r\n  transition:transform .4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-export-cta:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 22px 45px -12px rgba(37,211,102,.75);\r\n}\r\n.hp-export-cta:hover i:last-child{\r\n  transform:translateX(-6px);\r\n}\r\n\r\n\/* ===== Responsive ===== *\/\r\n@media(max-width:1024px){\r\n  .hp-export{ padding:80px 24px 70px; }\r\n  .hp-export::before{ font-size:180px; }\r\n  .hp-export-body{\r\n    grid-template-columns:1fr;\r\n    gap:50px;\r\n  }\r\n  .hp-export-preview{\r\n    position:relative;\r\n    top:0;\r\n    height:460px;\r\n    order:-1;\r\n  }\r\n}\r\n\r\n@media(max-width:640px){\r\n  .hp-export{ padding:60px 16px 60px; }\r\n  .hp-export::before{ font-size:120px; letter-spacing:-4px; }\r\n  .hp-export-header{ margin-bottom:50px; }\r\n  .hp-export-title{ letter-spacing:-.5px; }\r\n  .hp-export-item{\r\n    grid-template-columns:40px 1fr auto;\r\n    padding:20px 0;\r\n    gap:12px;\r\n  }\r\n  .hp-export-arrow{\r\n    width:36px;\r\n    height:36px;\r\n    font-size:11px;\r\n  }\r\n  .hp-export-preview{ height:400px; }\r\n  .hp-export-caption{ left:20px; right:20px; bottom:90px; }\r\n  .hp-export-caption h3{ font-size:18px; }\r\n  .hp-export-wa{\r\n    left:20px;\r\n    right:20px;\r\n    bottom:20px;\r\n    padding:14px 20px;\r\n    font-size:13px;\r\n  }\r\n  .hp-export-meta{ top:16px; left:16px; right:16px; }\r\n  .hp-export-meta-tag,\r\n  .hp-export-meta-counter{\r\n    font-size:10px;\r\n    padding:6px 10px;\r\n    letter-spacing:1px;\r\n  }\r\n  .hp-export-footer{\r\n    flex-direction:column;\r\n    align-items:stretch;\r\n    text-align:center;\r\n  }\r\n  .hp-export-cta{\r\n    justify-content:center;\r\n  }\r\n  .hp-export-deco-circle{ width:100px; height:100px; top:-20px; left:-20px; }\r\n  .hp-export-deco-line{ display:none; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  \/* ============================================\r\n     \u2699\ufe0f \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628\r\n     ============================================ *\/\r\n  const WHATSAPP_NUMBER = \"201000049051\"; \/\/ \u0643\u0648\u062f \u0645\u0635\u0631 + \u0627\u0644\u0631\u0642\u0645 \u0628\u062f\u0648\u0646 \u0635\u0641\u0631\r\n  const DEFAULT_MESSAGE = \"\u0645\u0631\u062d\u0628\u064b\u0627 HP Group\u060c \u0623\u0648\u062f \u0637\u0644\u0628 \u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u062a\u0635\u062f\u064a\u0631.\";\r\n\r\n  \/* ============================================\r\n     Slider Logic\r\n     ============================================ *\/\r\n  const items = document.querySelectorAll('.hp-export-item');\r\n  const img = document.getElementById('exportImg');\r\n  const counter = document.getElementById('exportCounter');\r\n  const captionTitle = document.getElementById('exportCaptionTitle');\r\n  const waPreviewBtn = document.getElementById('waPreviewBtn');\r\n\r\n  let currentIndex = 0;\r\n  let autoTimer = null;\r\n  const AUTO_DELAY = 4000;\r\n\r\n  function activate(index){\r\n    const item = items[index];\r\n    if(!item) return;\r\n\r\n    items.forEach(i => {\r\n      i.classList.remove('active');\r\n      const bar = i.querySelector('.hp-export-bar');\r\n      bar.style.transition = 'none';\r\n      bar.style.width = '0%';\r\n    });\r\n\r\n    item.classList.add('active');\r\n    currentIndex = index;\r\n\r\n    \/\/ switch image\r\n    img.classList.add('switching');\r\n    setTimeout(() => {\r\n      img.src = item.dataset.img;\r\n      img.onload = () => img.classList.remove('switching');\r\n      setTimeout(() => img.classList.remove('switching'), 400);\r\n    }, 200);\r\n\r\n    \/\/ update counter\r\n    counter.textContent = String(index + 1).padStart(2, '0') + ' \/ ' + String(items.length).padStart(2, '0');\r\n\r\n    \/\/ update caption\r\n    const productName = item.querySelector('.hp-export-name').textContent.trim();\r\n    captionTitle.textContent = productName;\r\n\r\n    \/\/ update WhatsApp button product name\r\n    if(waPreviewBtn){\r\n      waPreviewBtn.dataset.product = productName;\r\n    }\r\n\r\n    \/\/ progress bar\r\n    const bar = item.querySelector('.hp-export-bar');\r\n    requestAnimationFrame(() => {\r\n      bar.style.transition = 'width ' + AUTO_DELAY + 'ms linear';\r\n      bar.style.width = '100%';\r\n    });\r\n  }\r\n\r\n  function next(){\r\n    activate((currentIndex + 1) % items.length);\r\n  }\r\n\r\n  function startAuto(){\r\n    stopAuto();\r\n    autoTimer = setInterval(next, AUTO_DELAY);\r\n  }\r\n\r\n  function stopAuto(){\r\n    if(autoTimer) clearInterval(autoTimer);\r\n    autoTimer = null;\r\n  }\r\n\r\n  items.forEach((item, index) => {\r\n    item.addEventListener('mouseenter', () => {\r\n      stopAuto();\r\n      activate(index);\r\n    });\r\n    item.addEventListener('click', () => {\r\n      stopAuto();\r\n      activate(index);\r\n    });\r\n  });\r\n\r\n  const listEl = document.getElementById('exportList');\r\n  if(listEl){\r\n    listEl.addEventListener('mouseleave', () => {\r\n      startAuto();\r\n    });\r\n  }\r\n\r\n  \/* ============================================\r\n     WhatsApp Click Handlers\r\n     ============================================ *\/\r\n  function openWhatsApp(message){\r\n    const url = \"https:\/\/wa.me\/\" + WHATSAPP_NUMBER + \"?text=\" + encodeURIComponent(message);\r\n    window.open(url, \"_blank\", \"noopener\");\r\n  }\r\n\r\n  \/\/ \u0632\u0631 \u0648\u0627\u062a\u0633\u0627\u0628 \u0641\u0648\u0642 \u0627\u0644\u0635\u0648\u0631\u0629\r\n  if(waPreviewBtn){\r\n    waPreviewBtn.addEventListener('click', function(e){\r\n      e.preventDefault();\r\n      const product = this.dataset.product || \"\";\r\n      const msg = product\r\n        ? \"\u0645\u0631\u062d\u0628\u064b\u0627 HP Group\u060c \u0623\u0648\u062f \u0627\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u0639\u0646 \u0623\u0633\u0639\u0627\u0631 \" + product + \".\"\r\n        : DEFAULT_MESSAGE;\r\n      openWhatsApp(msg);\r\n    });\r\n  }\r\n\r\n  \/\/ \u0632\u0631 \u0627\u0644\u0641\u0648\u062a\u0631\r\n  const waFooterBtn = document.getElementById('waFooterBtn');\r\n  if(waFooterBtn){\r\n    waFooterBtn.addEventListener('click', function(e){\r\n      e.preventDefault();\r\n      openWhatsApp(DEFAULT_MESSAGE);\r\n    });\r\n  }\r\n\r\n  \/* ============================================\r\n     Init\r\n     ============================================ *\/\r\n  activate(0);\r\n  startAuto();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a0a86b1 elementor-hidden-desktop elementor-widget elementor-widget-html\" data-id=\"a0a86b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<section class=\"hp-exp-acc\" id=\"export\" dir=\"rtl\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"hp-exp-acc-header\">\r\n    <div class=\"hp-exp-acc-label\">\r\n      <span class=\"hp-exp-acc-dot\"><\/span>\r\n      <span>\u0645\u0627 \u0646\u0635\u062f\u0631\u0647<\/span>\r\n    <\/div>\r\n\r\n    <h2 class=\"hp-exp-acc-title\">\r\n      \u0645\u0646 \u0645\u0635\u0631\u060c<br>\r\n      <em>\u0625\u0644\u0649 \u0627\u0644\u0639\u0627\u0644\u0645.<\/em>\r\n    <\/h2>\r\n\r\n    <p class=\"hp-exp-acc-sub\">\r\n      \u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0623\u064a \u0645\u0646\u062a\u062c \u0644\u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0645\u0627 \u0646\u0642\u062f\u0645\u0647 \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645.\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <!-- Accordion List -->\r\n  <div class=\"hp-exp-acc-list\" id=\"exportAccordion\">\r\n\r\n    <!-- Item 01 -->\r\n    <div class=\"hp-exp-acc-item active\">\r\n      <button class=\"hp-exp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-exp-acc-num\">01<\/span>\r\n        <span class=\"hp-exp-acc-name\">\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0637\u0627\u0632\u062c\u0629<\/span>\r\n        <span class=\"hp-exp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-exp-acc-panel\">\r\n        <div class=\"hp-exp-acc-panel-inner\">\r\n          <div class=\"hp-exp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1610832958506-aa56368176cf?w=1400\" alt=\"\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0637\u0627\u0632\u062c\u0629\">\r\n            <div class=\"hp-exp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u062a\u0635\u062f\u064a\u0631<\/div>\r\n          <\/div>\r\n          <div class=\"hp-exp-acc-text\">\r\n            <h4>\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0637\u0627\u0632\u062c\u0629<\/h4>\r\n            <p>\r\n              \u0645\u0646\u062a\u0642\u0627\u0629 \u0628\u0639\u0646\u0627\u064a\u0629 \u0648\u0645\u0635\u0646\u0651\u0641\u0629 \u0648\u0645\u064f\u0639\u0628\u0623\u0629 \u0641\u064a \u0633\u0644\u0633\u0644\u0629 \u062a\u0628\u0631\u064a\u062f \u062e\u0644\u0627\u0644 \u0633\u0627\u0639\u0627\u062a \u0645\u0646 \u0627\u0644\u062d\u0635\u0627\u062f \u2014\r\n              \u0644\u0646\u0648\u0635\u0644 \u0627\u0644\u0637\u0632\u0627\u062c\u0629 \u0627\u0644\u0645\u0635\u0631\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0648\u0627\u0644\u0645\u0648\u0632\u0639\u064a\u0646 \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-exp-acc-cta\" data-product=\"\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0637\u0627\u0632\u062c\u0629\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 02 -->\r\n    <div class=\"hp-exp-acc-item\">\r\n      <button class=\"hp-exp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-exp-acc-num\">02<\/span>\r\n        <span class=\"hp-exp-acc-name\">\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0645\u062c\u0645\u062f\u0629<\/span>\r\n        <span class=\"hp-exp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-exp-acc-panel\">\r\n        <div class=\"hp-exp-acc-panel-inner\">\r\n          <div class=\"hp-exp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1584270354949-c26b0d5b4a0c?w=1200\" alt=\"\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0645\u062c\u0645\u062f\u0629\">\r\n            <div class=\"hp-exp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u062a\u0635\u062f\u064a\u0631<\/div>\r\n          <\/div>\r\n          <div class=\"hp-exp-acc-text\">\r\n            <h4>\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0645\u062c\u0645\u062f\u0629<\/h4>\r\n            <p>\r\n              \u062a\u062c\u0645\u064a\u062f \u0633\u0631\u064a\u0639 IQF \u0648\u062a\u062c\u0645\u064a\u062f \u0628\u0627\u0644\u062c\u0645\u0644\u0629\u060c \u0645\u0639 \u0627\u0644\u0627\u062d\u062a\u0641\u0627\u0638 \u0628\u0623\u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u064a\u0627\u062a \u0627\u0644\u0646\u0636\u0627\u0631\u0629 \u2014\r\n              \u062c\u0627\u0647\u0632\u0629 \u0644\u0645\u0635\u0646\u0651\u0639\u064a \u0627\u0644\u0623\u063a\u0630\u064a\u0629 \u0648\u062a\u062c\u0627\u0631 \u0627\u0644\u062a\u062c\u0632\u0626\u0629 \u0648\u0642\u0637\u0627\u0639 \u0627\u0644\u0641\u0646\u0627\u062f\u0642 \u0648\u0627\u0644\u0645\u0637\u0627\u0639\u0645.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-exp-acc-cta\" data-product=\"\u062e\u0636\u0627\u0631 \u0648\u0641\u0648\u0627\u0643\u0647 \u0645\u062c\u0645\u062f\u0629\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 03 -->\r\n    <div class=\"hp-exp-acc-item\">\r\n      <button class=\"hp-exp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-exp-acc-num\">03<\/span>\r\n        <span class=\"hp-exp-acc-name\">\u0627\u0644\u0641\u0631\u0627\u0648\u0644\u0629<\/span>\r\n        <span class=\"hp-exp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-exp-acc-panel\">\r\n        <div class=\"hp-exp-acc-panel-inner\">\r\n          <div class=\"hp-exp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1464965911861-746a04b4bca6?w=1400\" alt=\"\u0627\u0644\u0641\u0631\u0627\u0648\u0644\u0629\">\r\n            <div class=\"hp-exp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u062a\u0635\u062f\u064a\u0631<\/div>\r\n          <\/div>\r\n          <div class=\"hp-exp-acc-text\">\r\n            <h4>\u0627\u0644\u0641\u0631\u0627\u0648\u0644\u0629<\/h4>\r\n            <p>\r\n              \u0641\u0631\u0627\u0648\u0644\u0629 \u0645\u0635\u0631\u064a\u0629 \u0641\u0627\u062e\u0631\u0629 \u2014 \u0637\u0627\u0632\u062c\u0629 \u0623\u0648 \u0645\u062c\u0645\u062f\u0629 \u0623\u0648 \u0628\u064a\u0648\u0631\u064a\u0647 \u2014 \u0628\u0644\u0648\u0646 \u062b\u0627\u0628\u062a\r\n              \u0648\u062d\u0644\u0627\u0648\u0629 \u0648\u0645\u0633\u062a\u0648\u064a\u0627\u062a \u0628\u0631\u064a\u0643\u0633 \u0645\u062a\u0648\u0627\u0632\u0646\u0629 \u062a\u0646\u0627\u0633\u0628 \u0627\u0644\u0623\u0633\u0648\u0627\u0642 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-exp-acc-cta\" data-product=\"\u0627\u0644\u0641\u0631\u0627\u0648\u0644\u0629\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 04 -->\r\n    <div class=\"hp-exp-acc-item\">\r\n      <button class=\"hp-exp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-exp-acc-num\">04<\/span>\r\n        <span class=\"hp-exp-acc-name\">\u062e\u0636\u0627\u0631 \u0645\u0634\u0643\u0644<\/span>\r\n        <span class=\"hp-exp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-exp-acc-panel\">\r\n        <div class=\"hp-exp-acc-panel-inner\">\r\n          <div class=\"hp-exp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1540420773420-3366772f4999?w=1400\" alt=\"\u062e\u0636\u0627\u0631 \u0645\u0634\u0643\u0644\">\r\n            <div class=\"hp-exp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u062a\u0635\u062f\u064a\u0631<\/div>\r\n          <\/div>\r\n          <div class=\"hp-exp-acc-text\">\r\n            <h4>\u062e\u0636\u0627\u0631 \u0645\u0634\u0643\u0644<\/h4>\r\n            <p>\r\n              \u062e\u0644\u0637\u0627\u062a \u0645\u062e\u0635\u0635\u0629 \u0645\u0646 \u0627\u0644\u0628\u0627\u0632\u0644\u0627\u0621 \u0648\u0627\u0644\u062c\u0632\u0631 \u0648\u0627\u0644\u0630\u0631\u0629 \u0648\u0627\u0644\u0641\u0627\u0635\u0648\u0644\u064a\u0627 \u2014\r\n              \u0645\u064f\u0639\u062f\u0651\u0629 \u0628\u0646\u0633\u0628\u0643 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 \u0648\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0627\u0644\u062a\u0639\u0628\u0626\u0629 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0643.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-exp-acc-cta\" data-product=\"\u062e\u0636\u0627\u0631 \u0645\u0634\u0643\u0644\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 05 -->\r\n    <div class=\"hp-exp-acc-item\">\r\n      <button class=\"hp-exp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-exp-acc-num\">05<\/span>\r\n        <span class=\"hp-exp-acc-name\">\u0628\u0637\u0627\u0637\u0633 \u0646\u0635\u0641 \u0645\u062c\u0645\u062f\u0629<\/span>\r\n        <span class=\"hp-exp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-exp-acc-panel\">\r\n        <div class=\"hp-exp-acc-panel-inner\">\r\n          <div class=\"hp-exp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518977676601-b53f82aba655?w=1400\" alt=\"\u0628\u0637\u0627\u0637\u0633 \u0646\u0635\u0641 \u0645\u062c\u0645\u062f\u0629\">\r\n            <div class=\"hp-exp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u062a\u0635\u062f\u064a\u0631<\/div>\r\n          <\/div>\r\n          <div class=\"hp-exp-acc-text\">\r\n            <h4>\u0628\u0637\u0627\u0637\u0633 \u0646\u0635\u0641 \u0645\u062c\u0645\u062f\u0629<\/h4>\r\n            <p>\r\n              \u0645\u0646\u062a\u062c\u0627\u062a \u0628\u0637\u0627\u0637\u0633 \u0645\u0642\u0644\u064a\u0629 \u0648\u0645\u062c\u0645\u062f\u0629 \u0646\u0635\u0641 \u062a\u062c\u0645\u064a\u062f \u2014 \u0623\u0635\u0627\u0628\u0639 \u0648\u0648\u062f\u062c\u0632 \u0648\u062a\u0642\u0637\u064a\u0639\u0627\u062a\r\n              \u062e\u0627\u0635\u0629 \u2014 \u0645\u0635\u0645\u0645\u0629 \u0644\u0623\u062f\u0627\u0621 \u062b\u0627\u0628\u062a \u0641\u064a \u0627\u0644\u0645\u0637\u0627\u0628\u062e.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-exp-acc-cta\" data-product=\"\u0628\u0637\u0627\u0637\u0633 \u0646\u0635\u0641 \u0645\u062c\u0645\u062f\u0629\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 06 -->\r\n    <div class=\"hp-exp-acc-item\">\r\n      <button class=\"hp-exp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-exp-acc-num\">06<\/span>\r\n        <span class=\"hp-exp-acc-name\">\u0645\u0634\u0631\u0648\u0628\u0627\u062a \u0648\u0639\u0635\u0627\u0626\u0631<\/span>\r\n        <span class=\"hp-exp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-exp-acc-panel\">\r\n        <div class=\"hp-exp-acc-panel-inner\">\r\n          <div class=\"hp-exp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600271886742-f049cd451bba?w=1400\" alt=\"\u0645\u0634\u0631\u0648\u0628\u0627\u062a \u0648\u0639\u0635\u0627\u0626\u0631\">\r\n            <div class=\"hp-exp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u062a\u0635\u062f\u064a\u0631<\/div>\r\n          <\/div>\r\n          <div class=\"hp-exp-acc-text\">\r\n            <h4>\u0645\u0634\u0631\u0648\u0628\u0627\u062a \u0648\u0639\u0635\u0627\u0626\u0631<\/h4>\r\n            <p>\r\n              \u062a\u0634\u0643\u064a\u0644\u0629 \u0643\u0627\u0645\u0644\u0629 \u0645\u0646 \u0627\u0644\u0645\u0634\u0631\u0648\u0628\u0627\u062a \u0627\u0644\u062c\u0627\u0647\u0632\u0629 \u0648\u0627\u0644\u0639\u0635\u0627\u0626\u0631 \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629 \u2014\r\n              \u0645\u0639\u0628\u0623\u0629 \u0644\u0644\u0628\u064a\u0639 \u0628\u0627\u0644\u062a\u062c\u0632\u0626\u0629 \u0648\u0627\u0644\u062c\u0645\u0644\u0629 \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062f\u0648\u0644\u064a.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-exp-acc-cta\" data-product=\"\u0645\u0634\u0631\u0648\u0628\u0627\u062a \u0648\u0639\u0635\u0627\u0626\u0631\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 07 -->\r\n    <div class=\"hp-exp-acc-item\">\r\n      <button class=\"hp-exp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-exp-acc-num\">07<\/span>\r\n        <span class=\"hp-exp-acc-name\">\u0639\u0635\u0627\u0626\u0631 \u0648\u0645\u0634\u0631\u0648\u0628 \u0632\u0628\u064a\u0628 \u063a\u0627\u0632\u064a<\/span>\r\n        <span class=\"hp-exp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-exp-acc-panel\">\r\n        <div class=\"hp-exp-acc-panel-inner\">\r\n          <div class=\"hp-exp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1622597467836-f3285f2131b8?w=1400\" alt=\"\u0639\u0635\u0627\u0626\u0631 \u0648\u0645\u0634\u0631\u0648\u0628 \u0632\u0628\u064a\u0628 \u063a\u0627\u0632\u064a\">\r\n            <div class=\"hp-exp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u062a\u0635\u062f\u064a\u0631<\/div>\r\n          <\/div>\r\n          <div class=\"hp-exp-acc-text\">\r\n            <h4>\u0639\u0635\u0627\u0626\u0631 \u0648\u0645\u0634\u0631\u0648\u0628 \u0632\u0628\u064a\u0628 \u063a\u0627\u0632\u064a<\/h4>\r\n            <p>\r\n              \u0645\u0634\u0631\u0648\u0628 \u0627\u0644\u0632\u0628\u064a\u0628 \u0627\u0644\u063a\u0627\u0632\u064a \u0627\u0644\u0645\u0635\u0631\u064a \u0627\u0644\u0645\u0645\u064a\u0632 \u0648\u0627\u0644\u0639\u0635\u0627\u0626\u0631 \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629 \u2014\r\n              \u0645\u062d\u0628\u0648\u0628\u0629 \u0641\u064a \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637 \u0648\u062e\u0627\u0631\u062c\u0647.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-exp-acc-cta\" data-product=\"\u0639\u0635\u0627\u0626\u0631 \u0648\u0645\u0634\u0631\u0648\u0628 \u0632\u0628\u064a\u0628 \u063a\u0627\u0632\u064a\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 08 -->\r\n    <div class=\"hp-exp-acc-item\">\r\n      <button class=\"hp-exp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-exp-acc-num\">08<\/span>\r\n        <span class=\"hp-exp-acc-name\">\u062d\u0644\u0648\u064a\u0627\u062a<\/span>\r\n        <span class=\"hp-exp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-exp-acc-panel\">\r\n        <div class=\"hp-exp-acc-panel-inner\">\r\n          <div class=\"hp-exp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1582058091505-f87a2e55a40f?w=1400\" alt=\"\u062d\u0644\u0648\u064a\u0627\u062a\">\r\n            <div class=\"hp-exp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u062a\u0635\u062f\u064a\u0631<\/div>\r\n          <\/div>\r\n          <div class=\"hp-exp-acc-text\">\r\n            <h4>\u062d\u0644\u0648\u064a\u0627\u062a<\/h4>\r\n            <p>\r\n              \u062d\u0644\u0648\u064a\u0627\u062a \u062a\u0642\u0644\u064a\u062f\u064a\u0629 \u0648\u062d\u062f\u064a\u062b\u0629 \u2014 \u0645\u0635\u0646\u0648\u0639\u0629 \u0644\u0644\u0628\u064a\u0639 \u0628\u0627\u0644\u062a\u062c\u0632\u0626\u0629 \u0648\u0627\u0644\u0647\u062f\u0627\u064a\u0627\r\n              \u0648\u0627\u0644\u062a\u0648\u0632\u064a\u0639 \u0639\u0644\u0649 \u0646\u0637\u0627\u0642 \u0648\u0627\u0633\u0639.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-exp-acc-cta\" data-product=\"\u062d\u0644\u0648\u064a\u0627\u062a\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Footer -->\r\n  <div class=\"hp-exp-acc-footer\">\r\n    <div class=\"hp-exp-acc-footer-left\">\r\n      <i class=\"fa-solid fa-truck-fast\"><\/i>\r\n      <span>\u0634\u062d\u0646 \u0639\u0627\u0644\u0645\u064a \u0648\u062c\u0627\u0647\u0632\u064a\u0629 \u0633\u0644\u0633\u0644\u0629 \u0627\u0644\u062a\u0628\u0631\u064a\u062f<\/span>\r\n    <\/div>\r\n    <a href=\"#\" class=\"hp-exp-acc-btn\" data-product=\"\">\r\n      <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n      <span>\u0627\u0637\u0644\u0628 \u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u062a\u0635\u062f\u064a\u0631<\/span>\r\n      <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n    <\/a>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== Base ===== *\/\r\n.hp-exp-acc{\r\n  position:relative;\r\n  width:100%;\r\n  background:#fafaf7;\r\n  padding:110px 40px 90px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  color:#0b2c1d;\r\n  box-sizing:border-box;\r\n  direction:rtl;\r\n}\r\n.hp-exp-acc *,\r\n.hp-exp-acc *::before,\r\n.hp-exp-acc *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n\/* \u2705 \u0641\u0631\u0636 El Messiri \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0633\u064a\u0643\u0634\u0646 *\/\r\n.hp-exp-acc,\r\n.hp-exp-acc *{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* Background word *\/\r\n.hp-exp-acc::before{\r\n  content:\"\u062a\u0635\u062f\u064a\u0631\";\r\n  position:absolute;\r\n  top:40px;\r\n  left:-40px;\r\n  font-size:280px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.08);\r\n  letter-spacing:-8px;\r\n  pointer-events:none;\r\n  line-height:1;\r\n  z-index:0;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* ===== Header ===== *\/\r\n.hp-exp-acc-header{\r\n  max-width:820px;\r\n  margin:0 auto 70px;\r\n  position:relative;\r\n  z-index:2;\r\n  text-align:center;\r\n}\r\n.hp-exp-acc-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:26px;\r\n}\r\n.hp-exp-acc-dot{\r\n  width:8px;\r\n  height:8px;\r\n  background:#3C993B;\r\n  border-radius:50%;\r\n  position:relative;\r\n}\r\n.hp-exp-acc-dot::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-4px;\r\n  border:1px solid rgba(60,153,59,.4);\r\n  border-radius:50%;\r\n  animation:hpAccPulse 2s ease-out infinite;\r\n}\r\n@keyframes hpAccPulse{\r\n  0%{ transform:scale(1); opacity:1; }\r\n  100%{ transform:scale(2.4); opacity:0; }\r\n}\r\n.hp-exp-acc-label span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-exp-acc-title{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(42px, 5.5vw, 84px);\r\n  line-height:1.15;\r\n  font-weight:700;\r\n  letter-spacing:-1.2px;\r\n  margin:0 0 24px;\r\n  color:#0b2c1d;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 em \u2014 El Messiri \u0628\u062f\u0644 Playfair Display *\/\r\n.hp-exp-acc-title em{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-weight:700;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-exp-acc-sub{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  max-width:560px;\r\n  margin:0 auto;\r\n  font-weight:400;\r\n}\r\n\r\n\/* ===== Accordion List ===== *\/\r\n.hp-exp-acc-list{\r\n  max-width:1200px;\r\n  margin:0 auto;\r\n  position:relative;\r\n  z-index:2;\r\n  border-top:1px solid rgba(11,44,29,.1);\r\n}\r\n\r\n.hp-exp-acc-item{\r\n  border-bottom:1px solid rgba(11,44,29,.1);\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\/* Trigger button *\/\r\n.hp-exp-acc-trigger{\r\n  width:100%;\r\n  display:grid;\r\n  grid-template-columns:70px 1fr auto;\r\n  align-items:center;\r\n  gap:24px;\r\n  padding:32px 4px;\r\n  background:transparent;\r\n  border:none;\r\n  cursor:pointer;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  text-align:right;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  color:#0b2c1d;\r\n}\r\n\r\n.hp-exp-acc-num{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:14px;\r\n  font-weight:600;\r\n  color:#888888;\r\n  letter-spacing:2px;\r\n  font-variant-numeric:tabular-nums;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.hp-exp-acc-name{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(20px, 2.2vw, 32px);\r\n  font-weight:600;\r\n  color:#0b2c1d;\r\n  letter-spacing:-.3px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  display:block;\r\n  line-height:1.3;\r\n}\r\n\r\n.hp-exp-acc-icon{\r\n  width:52px;\r\n  height:52px;\r\n  border-radius:50%;\r\n  border:1px solid rgba(11,44,29,.15);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#0b2c1d;\r\n  font-size:15px;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  background:transparent;\r\n  flex-shrink:0;\r\n}\r\n\r\n.hp-exp-acc-trigger:hover .hp-exp-acc-num{\r\n  color:#3C993B;\r\n}\r\n.hp-exp-acc-trigger:hover .hp-exp-acc-name{\r\n  color:#3C993B;\r\n  transform:translateX(-8px);\r\n}\r\n.hp-exp-acc-trigger:hover .hp-exp-acc-icon{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n}\r\n\r\n.hp-exp-acc-item.active .hp-exp-acc-num{\r\n  color:#3C993B;\r\n}\r\n.hp-exp-acc-item.active .hp-exp-acc-name{\r\n  color:#3C993B;\r\n}\r\n.hp-exp-acc-item.active .hp-exp-acc-icon{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:rotate(45deg);\r\n}\r\n\r\n\/* ===== Panel ===== *\/\r\n.hp-exp-acc-panel{\r\n  max-height:0;\r\n  overflow:hidden;\r\n  transition:max-height .8s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.hp-exp-acc-item.active .hp-exp-acc-panel{\r\n  max-height:900px;\r\n}\r\n\r\n.hp-exp-acc-panel-inner{\r\n  display:grid;\r\n  grid-template-columns:1.2fr 1fr;\r\n  gap:50px;\r\n  align-items:center;\r\n  padding:10px 0 50px;\r\n  opacity:0;\r\n  transform:translateY(-10px);\r\n  transition:.6s cubic-bezier(.2,.8,.2,1) .15s;\r\n}\r\n.hp-exp-acc-item.active .hp-exp-acc-panel-inner{\r\n  opacity:1;\r\n  transform:translateY(0);\r\n}\r\n\r\n\/* Image *\/\r\n.hp-exp-acc-img-wrap{\r\n  position:relative;\r\n  border-radius:20px;\r\n  overflow:hidden;\r\n  aspect-ratio:16\/10;\r\n  box-shadow:0 40px 80px -30px rgba(11,44,29,.35);\r\n}\r\n.hp-exp-acc-img-wrap img{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  display:block;\r\n  transition:transform 1.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-exp-acc-img-wrap:hover img{\r\n  transform:scale(1.05);\r\n}\r\n.hp-exp-acc-img-tag{\r\n  position:absolute;\r\n  top:20px;\r\n  right:20px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:1.5px;\r\n  font-weight:600;\r\n  color:#fff;\r\n  padding:8px 14px;\r\n  background:rgba(255,255,255,.15);\r\n  backdrop-filter:blur(12px);\r\n  border:1px solid rgba(255,255,255,.25);\r\n  border-radius:100px;\r\n}\r\n\r\n\/* Text *\/\r\n.hp-exp-acc-text h4{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:24px;\r\n  font-weight:700;\r\n  color:#0b2c1d;\r\n  margin:0 0 16px;\r\n  letter-spacing:-.3px;\r\n}\r\n.hp-exp-acc-text p{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:15px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  margin:0 0 26px;\r\n  font-weight:400;\r\n}\r\n\r\n\/* CTA Button \u2014 WhatsApp Style *\/\r\n.hp-exp-acc-cta{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  padding:14px 26px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-size:13.5px;\r\n  font-weight:600;\r\n  letter-spacing:.2px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  box-shadow:0 12px 30px -12px rgba(37,211,102,.6);\r\n}\r\n.hp-exp-acc-cta i:first-child{\r\n  font-size:18px;\r\n}\r\n.hp-exp-acc-cta i:last-child{\r\n  color:#fff;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-exp-acc-cta:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 18px 40px -15px rgba(37,211,102,.75);\r\n}\r\n.hp-exp-acc-cta:hover i:last-child{\r\n  transform:translateX(-5px);\r\n}\r\n\r\n\/* ===== Footer ===== *\/\r\n.hp-exp-acc-footer{\r\n  max-width:1200px;\r\n  margin:60px auto 0;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  padding-top:40px;\r\n  border-top:1px solid rgba(11,44,29,.1);\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n.hp-exp-acc-footer-left{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  color:#888888;\r\n  font-size:14px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n.hp-exp-acc-footer-left i{\r\n  color:#3C993B;\r\n  font-size:20px;\r\n}\r\n\r\n\/* Footer CTA \u2014 WhatsApp Style *\/\r\n.hp-exp-acc-btn{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  padding:18px 32px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-weight:600;\r\n  font-size:14px;\r\n  letter-spacing:.2px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  box-shadow:0 15px 35px -12px rgba(37,211,102,.6);\r\n}\r\n.hp-exp-acc-btn i:first-child{\r\n  font-size:20px;\r\n}\r\n.hp-exp-acc-btn i:last-child{\r\n  color:#fff;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-exp-acc-btn:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 22px 45px -12px rgba(37,211,102,.75);\r\n}\r\n.hp-exp-acc-btn:hover i:last-child{\r\n  transform:translateX(-6px);\r\n}\r\n\r\n\/* ===== Responsive ===== *\/\r\n@media(max-width:1024px){\r\n  .hp-exp-acc{ padding:80px 24px 70px; }\r\n  .hp-exp-acc::before{ font-size:180px; }\r\n  .hp-exp-acc-panel-inner{\r\n    grid-template-columns:1fr;\r\n    gap:30px;\r\n    padding-bottom:40px;\r\n  }\r\n  .hp-exp-acc-item.active .hp-exp-acc-panel{\r\n    max-height:1400px;\r\n  }\r\n}\r\n\r\n@media(max-width:640px){\r\n  .hp-exp-acc{ padding:60px 16px 60px; }\r\n  .hp-exp-acc::before{ font-size:110px; letter-spacing:-4px; }\r\n  .hp-exp-acc-header{ margin-bottom:50px; }\r\n  .hp-exp-acc-title{ letter-spacing:-.5px; }\r\n  .hp-exp-acc-trigger{\r\n    grid-template-columns:40px 1fr auto;\r\n    gap:14px;\r\n    padding:24px 0;\r\n  }\r\n  .hp-exp-acc-icon{\r\n    width:42px;\r\n    height:42px;\r\n    font-size:13px;\r\n  }\r\n  .hp-exp-acc-text h4{ font-size:19px; }\r\n  .hp-exp-acc-footer{\r\n    flex-direction:column;\r\n    align-items:stretch;\r\n    text-align:center;\r\n  }\r\n  .hp-exp-acc-btn{\r\n    justify-content:center;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  \/* ============================================\r\n     \u2699\ufe0f \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628\r\n     ============================================ *\/\r\n  const WHATSAPP_NUMBER = \"201000049051\"; \/\/ \u0643\u0648\u062f \u0645\u0635\u0631 + \u0627\u0644\u0631\u0642\u0645 \u0628\u062f\u0648\u0646 \u0635\u0641\u0631\r\n  const CATALOG_MESSAGE = \"\u0645\u0631\u062d\u0628\u064b\u0627 HP Group\u060c \u0623\u0648\u062f \u0637\u0644\u0628 \u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u062a\u0635\u062f\u064a\u0631.\";\r\n\r\n  \/* ============================================\r\n     Accordion Logic\r\n     ============================================ *\/\r\n  const items = document.querySelectorAll('.hp-exp-acc-item');\r\n\r\n  items.forEach(item => {\r\n    const trigger = item.querySelector('.hp-exp-acc-trigger');\r\n\r\n    trigger.addEventListener('click', () => {\r\n      const isActive = item.classList.contains('active');\r\n\r\n      items.forEach(i => i.classList.remove('active'));\r\n\r\n      if(!isActive){\r\n        item.classList.add('active');\r\n\r\n        setTimeout(() => {\r\n          const rect = item.getBoundingClientRect();\r\n          const offset = 100;\r\n          if(rect.top < offset){\r\n            window.scrollBy({\r\n              top: rect.top - offset,\r\n              behavior: 'smooth'\r\n            });\r\n          }\r\n        }, 400);\r\n      }\r\n    });\r\n  });\r\n\r\n  \/* ============================================\r\n     WhatsApp Click Handlers\r\n     ============================================ *\/\r\n  function openWhatsApp(message){\r\n    const url = \"https:\/\/wa.me\/\" + WHATSAPP_NUMBER + \"?text=\" + encodeURIComponent(message);\r\n    window.open(url, \"_blank\", \"noopener\");\r\n  }\r\n\r\n  \/\/ \u0623\u0632\u0631\u0627\u0631 \"\u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631\" \u062c\u0648\u0647 \u0643\u0644 \u062e\u062f\u0645\u0629\r\n  const productBtns = document.querySelectorAll('.hp-exp-acc-cta');\r\n  productBtns.forEach(btn => {\r\n    btn.addEventListener('click', function(e){\r\n      e.preventDefault();\r\n      const product = this.dataset.product || \"\";\r\n      const msg = product\r\n        ? \"\u0645\u0631\u062d\u0628\u064b\u0627 HP Group\u060c \u0623\u0648\u062f \u0627\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u0639\u0646 \u0623\u0633\u0639\u0627\u0631 \" + product + \".\"\r\n        : CATALOG_MESSAGE;\r\n      openWhatsApp(msg);\r\n    });\r\n  });\r\n\r\n  \/\/ \u0632\u0631 \u0627\u0644\u0641\u0648\u062a\u0631 \"\u0627\u0637\u0644\u0628 \u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u062a\u0635\u062f\u064a\u0631\"\r\n  const footerBtn = document.querySelector('.hp-exp-acc-btn');\r\n  if(footerBtn){\r\n    footerBtn.addEventListener('click', function(e){\r\n      e.preventDefault();\r\n      openWhatsApp(CATALOG_MESSAGE);\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0e54c07 e-con-full e-flex e-con e-child\" data-id=\"0e54c07\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf03072 elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"bf03072\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<section class=\"hp-import\" id=\"import\" dir=\"rtl\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"hp-import-header\">\r\n    <div class=\"hp-import-label\">\r\n      <span class=\"hp-import-dot\"><\/span>\r\n      <span>\u0645\u0627 \u0646\u0633\u062a\u0648\u0631\u062f\u0647<\/span>\r\n    <\/div>\r\n\r\n    <h2 class=\"hp-import-title\">\r\n      \u0645\u0646 \u0627\u0644\u0639\u0627\u0644\u0645\u060c<br>\r\n      <em>\u0628\u062b\u0642\u0629 \u0645\u062d\u0644\u064a\u0629.<\/em>\r\n    <\/h2>\r\n\r\n    <p class=\"hp-import-sub\">\r\n      \u0645\u0646 \u0627\u0644\u0645\u0633\u062a\u0644\u0632\u0645\u0627\u062a \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629 \u2014 \u0646\u0633\u062a\u0648\u0631\u062f \u0623\u062c\u0648\u062f\r\n      \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0644\u062f\u0639\u0645 \u0627\u0644\u0645\u0632\u0627\u0631\u0639 \u0648\u0627\u0644\u0639\u064a\u0627\u062f\u0627\u062a \u0648\u0627\u0644\u0623\u0633\u0648\u0627\u0642 \u0641\u064a \u0645\u0635\u0631.\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <!-- Interactive List + Image -->\r\n  <div class=\"hp-import-body\">\r\n\r\n    <!-- Right: The List -->\r\n    <ul class=\"hp-import-list\" id=\"importList\">\r\n\r\n      <li class=\"hp-import-item active\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1584308666744-24d5c474f2ae?w=1200\"\r\n          data-tag=\"01\">\r\n        <span class=\"hp-import-num\">01<\/span>\r\n        <span class=\"hp-import-name\">\u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629<\/span>\r\n        <span class=\"hp-import-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-import-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-import-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1500382017468-9049fed747ef?w=1200\"\r\n          data-tag=\"02\">\r\n        <span class=\"hp-import-num\">02<\/span>\r\n        <span class=\"hp-import-name\">\u0625\u0636\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0639\u0644\u0627\u0641<\/span>\r\n        <span class=\"hp-import-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-import-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-import-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1612277795421-9bc7706a4a34?w=1200\"\r\n          data-tag=\"03\">\r\n        <span class=\"hp-import-num\">03<\/span>\r\n        <span class=\"hp-import-name\">\u0627\u0644\u0644\u0642\u0627\u062d\u0627\u062a \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629<\/span>\r\n        <span class=\"hp-import-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-import-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-import-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1592982537447-7440770cbfc9?w=1200\"\r\n          data-tag=\"04\">\r\n        <span class=\"hp-import-num\">04<\/span>\r\n        <span class=\"hp-import-name\">\u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629<\/span>\r\n        <span class=\"hp-import-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-import-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-import-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1523348837708-15d4a09cfac2?w=1200\"\r\n          data-tag=\"05\">\r\n        <span class=\"hp-import-num\">05<\/span>\r\n        <span class=\"hp-import-name\">\u0627\u0644\u0628\u0630\u0648\u0631<\/span>\r\n        <span class=\"hp-import-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-import-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-import-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1589923188900-85dae523342b?w=1200\"\r\n          data-tag=\"06\">\r\n        <span class=\"hp-import-num\">06<\/span>\r\n        <span class=\"hp-import-name\">\u0627\u0644\u0645\u0628\u064a\u062f\u0627\u062a<\/span>\r\n        <span class=\"hp-import-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-import-bar\"><\/span>\r\n      <\/li>\r\n\r\n      <li class=\"hp-import-item\"\r\n          data-img=\"https:\/\/images.unsplash.com\/photo-1591857177580-dc82b9ac4e1e?w=1200\"\r\n          data-tag=\"07\">\r\n        <span class=\"hp-import-num\">07<\/span>\r\n        <span class=\"hp-import-name\">\u0627\u0644\u0634\u062a\u0644\u0627\u062a<\/span>\r\n        <span class=\"hp-import-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/span>\r\n        <span class=\"hp-import-bar\"><\/span>\r\n      <\/li>\r\n\r\n    <\/ul>\r\n\r\n    <!-- Left: Image Preview -->\r\n    <div class=\"hp-import-preview\">\r\n      <div class=\"hp-import-img-wrap\">\r\n        <img decoding=\"async\" id=\"importImg\"\r\n             src=\"https:\/\/images.unsplash.com\/photo-1584308666744-24d5c474f2ae?w=1200\"\r\n             alt=\"Import Preview\">\r\n        <div class=\"hp-import-img-overlay\"><\/div>\r\n\r\n        <div class=\"hp-import-meta\">\r\n          <span class=\"hp-import-meta-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/span>\r\n          <span class=\"hp-import-meta-counter\" id=\"importCounter\">01 \/ 07<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"hp-import-caption\">\r\n          <span class=\"hp-import-caption-lbl\">\u062a\u0634\u0627\u0647\u062f\u0647 \u0627\u0644\u0622\u0646<\/span>\r\n          <h3 id=\"importCaptionTitle\">\u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629<\/h3>\r\n        <\/div>\r\n\r\n        <!-- WhatsApp Button -->\r\n        <a href=\"#\" class=\"hp-import-wa\" id=\"waImportPreviewBtn\"\r\n           data-product=\"\u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629\">\r\n          <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n          <span>\u0627\u0637\u0644\u0628 \u0647\u0630\u0627 \u0627\u0644\u0645\u0646\u062a\u062c<\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- Decorations -->\r\n      <div class=\"hp-import-deco-circle\"><\/div>\r\n      <div class=\"hp-import-deco-line\"><\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Bottom CTA -->\r\n  <div class=\"hp-import-footer\">\r\n    <div class=\"hp-import-footer-left\">\r\n      <i class=\"fa-solid fa-boxes-packing\"><\/i>\r\n      <span>\u0645\u0648\u0631\u062f\u0648\u0646 \u0645\u0639\u062a\u0645\u062f\u0648\u0646 \u0648\u0645\u0635\u0627\u062f\u0631 \u0639\u0627\u0644\u0645\u064a\u0629<\/span>\r\n    <\/div>\r\n    <a href=\"#\" class=\"hp-import-cta\" id=\"waImportFooterBtn\">\r\n      <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n      <span>\u0627\u0637\u0644\u0628 \u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/span>\r\n      <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n    <\/a>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== Base ===== *\/\r\n.hp-import{\r\n  position:relative;\r\n  width:100%;\r\n  background:#fafaf7;\r\n  padding:20px 20px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  color:#0b2c1d;\r\n  box-sizing:border-box;\r\n  direction:rtl;\r\n}\r\n.hp-import *,\r\n.hp-import *::before,\r\n.hp-import *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n\/* \u2705 \u0641\u0631\u0636 El Messiri \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0633\u064a\u0643\u0634\u0646 *\/\r\n.hp-import,\r\n.hp-import *{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* Big background word *\/\r\n.hp-import::before{\r\n  content:\"\u0627\u0633\u062a\u064a\u0631\u0627\u062f\";\r\n  position:absolute;\r\n  top:40px;\r\n  left:-40px;\r\n  font-size:280px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.08);\r\n  letter-spacing:-8px;\r\n  pointer-events:none;\r\n  line-height:1;\r\n  z-index:0;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* ===== Header ===== *\/\r\n.hp-import-header{\r\n  max-width:820px;\r\n  margin:0 0 80px;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n.hp-import-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:26px;\r\n}\r\n.hp-import-dot{\r\n  width:8px;\r\n  height:8px;\r\n  background:#3C993B;\r\n  border-radius:50%;\r\n  position:relative;\r\n}\r\n.hp-import-dot::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-4px;\r\n  border:1px solid rgba(60,153,59,.4);\r\n  border-radius:50%;\r\n  animation:hpImpPulse 2s ease-out infinite;\r\n}\r\n@keyframes hpImpPulse{\r\n  0%{ transform:scale(1); opacity:1; }\r\n  100%{ transform:scale(2.4); opacity:0; }\r\n}\r\n.hp-import-label span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-import-title{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(42px, 5.5vw, 84px);\r\n  line-height:1.15;\r\n  font-weight:700;\r\n  letter-spacing:-1.2px;\r\n  margin:0 0 24px;\r\n  color:#0b2c1d;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 em \u2014 El Messiri \u0628\u062f\u0644 Playfair Display *\/\r\n.hp-import-title em{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-weight:700;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-import-sub{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  max-width:560px;\r\n  margin:0;\r\n  font-weight:400;\r\n}\r\n\r\n\/* ===== Body Layout ===== *\/\r\n.hp-import-body{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:70px;\r\n  position:relative;\r\n  z-index:2;\r\n  margin-bottom:70px;\r\n  align-items:flex-start;\r\n}\r\n\r\n\/* ===== List ===== *\/\r\n.hp-import-list{\r\n  list-style:none;\r\n  padding:0;\r\n  margin:0;\r\n  display:flex;\r\n  flex-direction:column;\r\n  border-top:1px solid rgba(11,44,29,.1);\r\n}\r\n\r\n.hp-import-item{\r\n  position:relative;\r\n  display:grid;\r\n  grid-template-columns:56px 1fr auto;\r\n  align-items:center;\r\n  gap:20px;\r\n  padding:26px 0;\r\n  border-bottom:1px solid rgba(11,44,29,.1);\r\n  cursor:pointer;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  overflow:hidden;\r\n}\r\n\r\n.hp-import-num{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:14px;\r\n  font-weight:600;\r\n  color:#888888;\r\n  letter-spacing:2px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  font-variant-numeric:tabular-nums;\r\n}\r\n\r\n.hp-import-name{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(18px, 1.6vw, 24px);\r\n  font-weight:600;\r\n  color:#0b2c1d;\r\n  letter-spacing:-.3px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  display:inline-block;\r\n}\r\n\r\n.hp-import-arrow{\r\n  width:44px;\r\n  height:44px;\r\n  border-radius:50%;\r\n  border:1px solid rgba(11,44,29,.12);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#0b2c1d;\r\n  font-size:13px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  background:transparent;\r\n  flex-shrink:0;\r\n}\r\n\r\n.hp-import-bar{\r\n  position:absolute;\r\n  right:0;\r\n  bottom:0;\r\n  height:2px;\r\n  width:0;\r\n  background:linear-gradient(90deg,#888888,#3C993B);\r\n  border-radius:2px;\r\n  transition:.2s linear;\r\n}\r\n\r\n.hp-import-item:hover .hp-import-num,\r\n.hp-import-item.active .hp-import-num{\r\n  color:#3C993B;\r\n}\r\n.hp-import-item:hover .hp-import-name,\r\n.hp-import-item.active .hp-import-name{\r\n  color:#3C993B;\r\n  transform:translateX(-12px);\r\n}\r\n.hp-import-item:hover .hp-import-arrow,\r\n.hp-import-item.active .hp-import-arrow{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:rotate(45deg);\r\n}\r\n\r\n\/* ===== Preview ===== *\/\r\n.hp-import-preview{\r\n  position:sticky;\r\n  top:60px;\r\n  height:580px;\r\n  position:relative;\r\n}\r\n\r\n.hp-import-img-wrap{\r\n  position:relative;\r\n  width:100%;\r\n  height:100%;\r\n  border-radius:24px;\r\n  overflow:hidden;\r\n  box-shadow:0 50px 100px -30px rgba(11,44,29,.35);\r\n  background:#0b2c1d;\r\n}\r\n\r\n.hp-import-img-wrap img{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  transition:opacity .6s ease, transform 1.4s cubic-bezier(.2,.8,.2,1);\r\n  display:block;\r\n}\r\n.hp-import-img-wrap img.switching{\r\n  opacity:0;\r\n  transform:scale(1.06);\r\n}\r\n\r\n.hp-import-img-overlay{\r\n  position:absolute;\r\n  inset:0;\r\n  background:linear-gradient(\r\n    180deg,\r\n    rgba(11,44,29,.15) 0%,\r\n    rgba(11,44,29,0) 30%,\r\n    rgba(11,44,29,0) 55%,\r\n    rgba(11,44,29,.9) 100%\r\n  );\r\n  pointer-events:none;\r\n}\r\n\r\n.hp-import-meta{\r\n  position:absolute;\r\n  top:24px;\r\n  left:24px;\r\n  right:24px;\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  z-index:2;\r\n}\r\n.hp-import-meta-tag{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#fff;\r\n  padding:8px 14px;\r\n  background:rgba(255,255,255,.12);\r\n  backdrop-filter:blur(12px);\r\n  border:1px solid rgba(255,255,255,.2);\r\n  border-radius:100px;\r\n}\r\n.hp-import-meta-counter{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:13px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#fff;\r\n  font-variant-numeric:tabular-nums;\r\n  padding:8px 14px;\r\n  background:rgba(60,153,59,.9);\r\n  border-radius:100px;\r\n  direction:ltr;\r\n}\r\n\r\n.hp-import-caption{\r\n  position:absolute;\r\n  left:28px;\r\n  right:28px;\r\n  bottom:100px;\r\n  z-index:2;\r\n}\r\n.hp-import-caption-lbl{\r\n  display:block;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:2px;\r\n  color:#3C993B;\r\n  font-weight:600;\r\n  margin-bottom:10px;\r\n}\r\n.hp-import-caption h3{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(20px, 2vw, 28px);\r\n  line-height:1.3;\r\n  font-weight:700;\r\n  color:#fff;\r\n  letter-spacing:-.3px;\r\n  margin:0;\r\n}\r\n\r\n\/* WhatsApp button on preview *\/\r\n.hp-import-wa{\r\n  position:absolute;\r\n  left:28px;\r\n  right:28px;\r\n  bottom:28px;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:12px;\r\n  padding:16px 24px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-weight:600;\r\n  font-size:14px;\r\n  letter-spacing:.3px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  z-index:3;\r\n  box-shadow:0 15px 35px -10px rgba(37,211,102,.6);\r\n}\r\n.hp-import-wa i{\r\n  font-size:20px;\r\n}\r\n.hp-import-wa:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 22px 45px -12px rgba(37,211,102,.75);\r\n}\r\n\r\n\/* Decorations *\/\r\n.hp-import-deco-circle{\r\n  position:absolute;\r\n  width:180px;\r\n  height:180px;\r\n  border-radius:50%;\r\n  border:1px dashed rgba(60,153,59,.4);\r\n  top:-40px;\r\n  left:-40px;\r\n  animation:hpImpRotate 24s linear infinite;\r\n  pointer-events:none;\r\n}\r\n@keyframes hpImpRotate{\r\n  to{ transform:rotate(360deg); }\r\n}\r\n.hp-import-deco-line{\r\n  position:absolute;\r\n  width:80px;\r\n  height:80px;\r\n  border-right:2px solid #3C993B;\r\n  border-bottom:2px solid #3C993B;\r\n  bottom:-24px;\r\n  right:-24px;\r\n  border-radius:0 0 12px 0;\r\n  pointer-events:none;\r\n}\r\n\r\n\/* ===== Footer ===== *\/\r\n.hp-import-footer{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  padding-top:40px;\r\n  border-top:1px solid rgba(11,44,29,.1);\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n.hp-import-footer-left{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  color:#888888;\r\n  font-size:14px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-weight:400;\r\n}\r\n.hp-import-footer-left i{\r\n  color:#3C993B;\r\n  font-size:20px;\r\n}\r\n.hp-import-cta{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  padding:18px 32px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-weight:600;\r\n  font-size:14px;\r\n  letter-spacing:.3px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  box-shadow:0 15px 35px -12px rgba(37,211,102,.5);\r\n}\r\n.hp-import-cta i:first-child{\r\n  font-size:20px;\r\n}\r\n.hp-import-cta i:last-child{\r\n  transition:transform .4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-import-cta:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 22px 45px -12px rgba(37,211,102,.75);\r\n}\r\n.hp-import-cta:hover i:last-child{\r\n  transform:translateX(-6px);\r\n}\r\n\r\n\/* ===== Responsive ===== *\/\r\n@media(max-width:1024px){\r\n  .hp-import{ padding:80px 24px 70px; }\r\n  .hp-import::before{ font-size:180px; }\r\n  .hp-import-body{\r\n    grid-template-columns:1fr;\r\n    gap:50px;\r\n  }\r\n  .hp-import-preview{\r\n    position:relative;\r\n    top:0;\r\n    height:460px;\r\n    order:-1;\r\n  }\r\n}\r\n\r\n@media(max-width:640px){\r\n  .hp-import{ padding:60px 16px 60px; }\r\n  .hp-import::before{ font-size:120px; letter-spacing:-4px; }\r\n  .hp-import-header{ margin-bottom:50px; }\r\n  .hp-import-title{ letter-spacing:-.5px; }\r\n  .hp-import-item{\r\n    grid-template-columns:40px 1fr auto;\r\n    padding:20px 0;\r\n    gap:12px;\r\n  }\r\n  .hp-import-arrow{\r\n    width:36px;\r\n    height:36px;\r\n    font-size:11px;\r\n  }\r\n  .hp-import-preview{ height:400px; }\r\n  .hp-import-caption{ left:20px; right:20px; bottom:90px; }\r\n  .hp-import-caption h3{ font-size:18px; }\r\n  .hp-import-wa{\r\n    left:20px;\r\n    right:20px;\r\n    bottom:20px;\r\n    padding:14px 20px;\r\n    font-size:13px;\r\n  }\r\n  .hp-import-meta{ top:16px; left:16px; right:16px; }\r\n  .hp-import-meta-tag,\r\n  .hp-import-meta-counter{\r\n    font-size:10px;\r\n    padding:6px 10px;\r\n    letter-spacing:1px;\r\n  }\r\n  .hp-import-footer{\r\n    flex-direction:column;\r\n    align-items:stretch;\r\n    text-align:center;\r\n  }\r\n  .hp-import-cta{\r\n    justify-content:center;\r\n  }\r\n  .hp-import-deco-circle{ width:100px; height:100px; top:-20px; left:-20px; }\r\n  .hp-import-deco-line{ display:none; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  \/* ============================================\r\n     \u2699\ufe0f \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628\r\n     ============================================ *\/\r\n  const WHATSAPP_NUMBER = \"201000049051\"; \/\/ \u0643\u0648\u062f \u0645\u0635\u0631 + \u0627\u0644\u0631\u0642\u0645 \u0628\u062f\u0648\u0646 \u0635\u0641\u0631\r\n  const DEFAULT_MESSAGE = \"\u0645\u0631\u062d\u0628\u064b\u0627 HP Group\u060c \u0623\u0648\u062f \u0637\u0644\u0628 \u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0627\u0633\u062a\u064a\u0631\u0627\u062f.\";\r\n\r\n  \/* ============================================\r\n     Slider Logic\r\n     ============================================ *\/\r\n  const items = document.querySelectorAll('.hp-import-item');\r\n  const img = document.getElementById('importImg');\r\n  const counter = document.getElementById('importCounter');\r\n  const captionTitle = document.getElementById('importCaptionTitle');\r\n  const waPreviewBtn = document.getElementById('waImportPreviewBtn');\r\n\r\n  let currentIndex = 0;\r\n  let autoTimer = null;\r\n  const AUTO_DELAY = 4000;\r\n\r\n  function activate(index){\r\n    const item = items[index];\r\n    if(!item) return;\r\n\r\n    items.forEach(i => {\r\n      i.classList.remove('active');\r\n      const bar = i.querySelector('.hp-import-bar');\r\n      bar.style.transition = 'none';\r\n      bar.style.width = '0%';\r\n    });\r\n\r\n    item.classList.add('active');\r\n    currentIndex = index;\r\n\r\n    \/\/ switch image\r\n    img.classList.add('switching');\r\n    setTimeout(() => {\r\n      img.src = item.dataset.img;\r\n      img.onload = () => img.classList.remove('switching');\r\n      setTimeout(() => img.classList.remove('switching'), 400);\r\n    }, 200);\r\n\r\n    \/\/ update counter\r\n    counter.textContent = String(index + 1).padStart(2, '0') + ' \/ ' + String(items.length).padStart(2, '0');\r\n\r\n    \/\/ update caption\r\n    const productName = item.querySelector('.hp-import-name').textContent.trim();\r\n    captionTitle.textContent = productName;\r\n\r\n    \/\/ update WhatsApp button product name\r\n    if(waPreviewBtn){\r\n      waPreviewBtn.dataset.product = productName;\r\n    }\r\n\r\n    \/\/ progress bar\r\n    const bar = item.querySelector('.hp-import-bar');\r\n    requestAnimationFrame(() => {\r\n      bar.style.transition = 'width ' + AUTO_DELAY + 'ms linear';\r\n      bar.style.width = '100%';\r\n    });\r\n  }\r\n\r\n  function next(){\r\n    activate((currentIndex + 1) % items.length);\r\n  }\r\n\r\n  function startAuto(){\r\n    stopAuto();\r\n    autoTimer = setInterval(next, AUTO_DELAY);\r\n  }\r\n\r\n  function stopAuto(){\r\n    if(autoTimer) clearInterval(autoTimer);\r\n    autoTimer = null;\r\n  }\r\n\r\n  items.forEach((item, index) => {\r\n    item.addEventListener('mouseenter', () => {\r\n      stopAuto();\r\n      activate(index);\r\n    });\r\n    item.addEventListener('click', () => {\r\n      stopAuto();\r\n      activate(index);\r\n    });\r\n  });\r\n\r\n  const listEl = document.getElementById('importList');\r\n  if(listEl){\r\n    listEl.addEventListener('mouseleave', () => {\r\n      startAuto();\r\n    });\r\n  }\r\n\r\n  \/* ============================================\r\n     WhatsApp Click Handlers\r\n     ============================================ *\/\r\n  function openWhatsApp(message){\r\n    const url = \"https:\/\/wa.me\/\" + WHATSAPP_NUMBER + \"?text=\" + encodeURIComponent(message);\r\n    window.open(url, \"_blank\", \"noopener\");\r\n  }\r\n\r\n  \/\/ \u0632\u0631 \u0648\u0627\u062a\u0633\u0627\u0628 \u0641\u0648\u0642 \u0627\u0644\u0635\u0648\u0631\u0629\r\n  if(waPreviewBtn){\r\n    waPreviewBtn.addEventListener('click', function(e){\r\n      e.preventDefault();\r\n      const product = this.dataset.product || \"\";\r\n      const msg = product\r\n        ? \"\u0645\u0631\u062d\u0628\u064b\u0627 HP Group\u060c \u0623\u0648\u062f \u0627\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u0639\u0646 \u0623\u0633\u0639\u0627\u0631 \" + product + \".\"\r\n        : DEFAULT_MESSAGE;\r\n      openWhatsApp(msg);\r\n    });\r\n  }\r\n\r\n  \/\/ \u0632\u0631 \u0627\u0644\u0641\u0648\u062a\u0631\r\n  const waFooterBtn = document.getElementById('waImportFooterBtn');\r\n  if(waFooterBtn){\r\n    waFooterBtn.addEventListener('click', function(e){\r\n      e.preventDefault();\r\n      openWhatsApp(DEFAULT_MESSAGE);\r\n    });\r\n  }\r\n\r\n  \/* ============================================\r\n     Init\r\n     ============================================ *\/\r\n  activate(0);\r\n  startAuto();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f340f05 elementor-hidden-desktop elementor-widget elementor-widget-html\" data-id=\"f340f05\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<section class=\"hp-imp-acc\" id=\"import\" dir=\"rtl\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"hp-imp-acc-header\">\r\n    <div class=\"hp-imp-acc-label\">\r\n      <span class=\"hp-imp-acc-dot\"><\/span>\r\n      <span>\u0645\u0627 \u0646\u0633\u062a\u0648\u0631\u062f\u0647<\/span>\r\n    <\/div>\r\n\r\n    <h2 class=\"hp-imp-acc-title\">\r\n      \u0645\u0646 \u0627\u0644\u0639\u0627\u0644\u0645\u060c<br>\r\n      <em>\u0628\u062b\u0642\u0629 \u0645\u062d\u0644\u064a\u0629.<\/em>\r\n    <\/h2>\r\n\r\n    <p class=\"hp-imp-acc-sub\">\r\n      \u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0623\u064a \u0645\u0646\u062a\u062c \u0644\u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0645\u0627 \u0646\u0648\u0641\u0631\u0647 \u0641\u064a \u062c\u0645\u064a\u0639 \u0623\u0646\u062d\u0627\u0621 \u0645\u0635\u0631.\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <!-- Accordion List -->\r\n  <div class=\"hp-imp-acc-list\" id=\"importAccordion\">\r\n\r\n    <!-- Item 01 -->\r\n    <div class=\"hp-imp-acc-item active\">\r\n      <button class=\"hp-imp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-imp-acc-num\">01<\/span>\r\n        <span class=\"hp-imp-acc-name\">\u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629<\/span>\r\n        <span class=\"hp-imp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-imp-acc-panel\">\r\n        <div class=\"hp-imp-acc-panel-inner\">\r\n          <div class=\"hp-imp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1584308666744-24d5c474f2ae?w=1400\" alt=\"\u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629\">\r\n            <div class=\"hp-imp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/div>\r\n          <\/div>\r\n          <div class=\"hp-imp-acc-text\">\r\n            <h4>\u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629<\/h4>\r\n            <p>\r\n              \u0645\u0633\u062a\u062d\u0636\u0631\u0627\u062a \u0628\u064a\u0637\u0631\u064a\u0629 \u0645\u0639\u062a\u0645\u062f\u0629 \u0645\u0646 \u0643\u0628\u0631\u0649 \u0627\u0644\u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629 \u2014\r\n              \u0644\u0636\u0645\u0627\u0646 \u0635\u062d\u0629 \u0627\u0644\u062d\u064a\u0648\u0627\u0646 \u0648\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0625\u0646\u062a\u0627\u062c\u064a\u0629 \u0641\u064a \u0645\u0635\u0631.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-imp-acc-cta\" data-product=\"\u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 02 -->\r\n    <div class=\"hp-imp-acc-item\">\r\n      <button class=\"hp-imp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-imp-acc-num\">02<\/span>\r\n        <span class=\"hp-imp-acc-name\">\u0625\u0636\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0639\u0644\u0627\u0641<\/span>\r\n        <span class=\"hp-imp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-imp-acc-panel\">\r\n        <div class=\"hp-imp-acc-panel-inner\">\r\n          <div class=\"hp-imp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1500382017468-9049fed747ef?w=1400\" alt=\"\u0625\u0636\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0639\u0644\u0627\u0641\">\r\n            <div class=\"hp-imp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/div>\r\n          <\/div>\r\n          <div class=\"hp-imp-acc-text\">\r\n            <h4>\u0625\u0636\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0639\u0644\u0627\u0641<\/h4>\r\n            <p>\r\n              \u0625\u0636\u0627\u0641\u0627\u062a \u063a\u0630\u0627\u0626\u064a\u0629 \u0648\u0645\u0643\u0645\u0651\u0644\u0627\u062a \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062c\u0648\u062f\u0629 \u0645\u064f\u0635\u0645\u0645\u0629 \u0644\u062a\u0639\u0632\u064a\u0632\r\n              \u0623\u062f\u0627\u0621 \u0627\u0644\u0645\u0627\u0634\u064a\u0629 \u0648\u0635\u062d\u062a\u0647\u0627 \u0648\u0643\u0641\u0627\u0621\u0629 \u0627\u0644\u062a\u063a\u0630\u064a\u0629.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-imp-acc-cta\" data-product=\"\u0625\u0636\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0639\u0644\u0627\u0641\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 03 -->\r\n    <div class=\"hp-imp-acc-item\">\r\n      <button class=\"hp-imp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-imp-acc-num\">03<\/span>\r\n        <span class=\"hp-imp-acc-name\">\u0627\u0644\u0644\u0642\u0627\u062d\u0627\u062a \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629<\/span>\r\n        <span class=\"hp-imp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-imp-acc-panel\">\r\n        <div class=\"hp-imp-acc-panel-inner\">\r\n          <div class=\"hp-imp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1612277795421-9bc7706a4a34?w=1400\" alt=\"\u0627\u0644\u0644\u0642\u0627\u062d\u0627\u062a \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629\">\r\n            <div class=\"hp-imp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/div>\r\n          <\/div>\r\n          <div class=\"hp-imp-acc-text\">\r\n            <h4>\u0627\u0644\u0644\u0642\u0627\u062d\u0627\u062a \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629<\/h4>\r\n            <p>\r\n              \u0644\u0642\u0627\u062d\u0627\u062a \u0645\u062d\u0645\u064a\u0629 \u0628\u0633\u0644\u0633\u0644\u0629 \u062a\u0628\u0631\u064a\u062f \u0645\u0646 \u0645\u062e\u062a\u0628\u0631\u0627\u062a \u062f\u0648\u0644\u064a\u0629 \u0645\u0648\u062b\u0648\u0642\u0629 \u2014\r\n              \u0644\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0642\u0637\u0639\u0627\u0646 \u0648\u0627\u0644\u0645\u0627\u0634\u064a\u0629 \u0645\u0646 \u0627\u0644\u0623\u0645\u0631\u0627\u0636 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-imp-acc-cta\" data-product=\"\u0627\u0644\u0644\u0642\u0627\u062d\u0627\u062a \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 04 -->\r\n    <div class=\"hp-imp-acc-item\">\r\n      <button class=\"hp-imp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-imp-acc-num\">04<\/span>\r\n        <span class=\"hp-imp-acc-name\">\u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629<\/span>\r\n        <span class=\"hp-imp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-imp-acc-panel\">\r\n        <div class=\"hp-imp-acc-panel-inner\">\r\n          <div class=\"hp-imp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1592982537447-7440770cbfc9?w=1400\" alt=\"\u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629\">\r\n            <div class=\"hp-imp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/div>\r\n          <\/div>\r\n          <div class=\"hp-imp-acc-text\">\r\n            <h4>\u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629<\/h4>\r\n            <p>\r\n              \u0645\u062c\u0645\u0648\u0639\u0629 \u0643\u0627\u0645\u0644\u0629 \u0645\u0646 \u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0639\u0636\u0648\u064a\u0629 \u0648\u0627\u0644\u0645\u0639\u062f\u0646\u064a\u0629 \u0627\u0644\u0645\u064f\u0635\u0645\u0645\u0629\r\n              \u0644\u062a\u062d\u0642\u064a\u0642 \u0645\u062d\u0627\u0635\u064a\u0644 \u0623\u0648\u0641\u0631 \u0648\u062a\u0631\u0628\u0629 \u0623\u0643\u062b\u0631 \u0635\u062d\u0629 \u0644\u0643\u0644 \u0632\u0631\u0627\u0639\u0629.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-imp-acc-cta\" data-product=\"\u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 05 -->\r\n    <div class=\"hp-imp-acc-item\">\r\n      <button class=\"hp-imp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-imp-acc-num\">05<\/span>\r\n        <span class=\"hp-imp-acc-name\">\u0627\u0644\u0628\u0630\u0648\u0631<\/span>\r\n        <span class=\"hp-imp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-imp-acc-panel\">\r\n        <div class=\"hp-imp-acc-panel-inner\">\r\n          <div class=\"hp-imp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1523348837708-15d4a09cfac2?w=1400\" alt=\"\u0627\u0644\u0628\u0630\u0648\u0631\">\r\n            <div class=\"hp-imp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/div>\r\n          <\/div>\r\n          <div class=\"hp-imp-acc-text\">\r\n            <h4>\u0627\u0644\u0628\u0630\u0648\u0631<\/h4>\r\n            <p>\r\n              \u0628\u0630\u0648\u0631 \u0647\u062c\u064a\u0646\u0629 \u0648\u0645\u064f\u0644\u0642\u0651\u062d\u0629 \u0630\u0627\u062a \u0646\u0633\u0628\u0629 \u0625\u0646\u0628\u0627\u062a \u0639\u0627\u0644\u064a\u0629 \u2014 \u0645\u062e\u062a\u0627\u0631\u0629\r\n              \u0644\u0645\u0642\u0627\u0648\u0645\u062a\u0647\u0627 \u0644\u0644\u0645\u0646\u0627\u062e \u0648\u062a\u062c\u0627\u0646\u0633\u0647\u0627 \u0648\u062c\u0648\u062f\u0629 \u0645\u062d\u0627\u0635\u064a\u0644\u0647\u0627 \u0627\u0644\u0645\u0645\u062a\u0627\u0632\u0629.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-imp-acc-cta\" data-product=\"\u0627\u0644\u0628\u0630\u0648\u0631\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 06 -->\r\n    <div class=\"hp-imp-acc-item\">\r\n      <button class=\"hp-imp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-imp-acc-num\">06<\/span>\r\n        <span class=\"hp-imp-acc-name\">\u0627\u0644\u0645\u0628\u064a\u062f\u0627\u062a<\/span>\r\n        <span class=\"hp-imp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-imp-acc-panel\">\r\n        <div class=\"hp-imp-acc-panel-inner\">\r\n          <div class=\"hp-imp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1589923188900-85dae523342b?w=1400\" alt=\"\u0627\u0644\u0645\u0628\u064a\u062f\u0627\u062a\">\r\n            <div class=\"hp-imp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/div>\r\n          <\/div>\r\n          <div class=\"hp-imp-acc-text\">\r\n            <h4>\u0627\u0644\u0645\u0628\u064a\u062f\u0627\u062a<\/h4>\r\n            <p>\r\n              \u062d\u0644\u0648\u0644 \u0645\u0639\u062a\u0645\u062f\u0629 \u0644\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0645\u062d\u0627\u0635\u064a\u0644 \u2014 \u0645\u0628\u064a\u062f\u0627\u062a \u062d\u0634\u0631\u064a\u0629 \u0648\u0641\u0637\u0631\u064a\u0629\r\n              \u0648\u0623\u0639\u0634\u0627\u0628 \u2014 \u0645\u0637\u0627\u0628\u0642\u0629 \u0644\u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u0633\u0644\u0627\u0645\u0629 \u0648\u0627\u0644\u062d\u062f\u0648\u062f \u0627\u0644\u0645\u062a\u0628\u0642\u064a\u0629 \u0627\u0644\u0635\u0627\u0631\u0645\u0629.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-imp-acc-cta\" data-product=\"\u0627\u0644\u0645\u0628\u064a\u062f\u0627\u062a\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Item 07 -->\r\n    <div class=\"hp-imp-acc-item\">\r\n      <button class=\"hp-imp-acc-trigger\" type=\"button\">\r\n        <span class=\"hp-imp-acc-num\">07<\/span>\r\n        <span class=\"hp-imp-acc-name\">\u0627\u0644\u0634\u062a\u0644\u0627\u062a<\/span>\r\n        <span class=\"hp-imp-acc-icon\">\r\n          <i class=\"fa-solid fa-plus\"><\/i>\r\n        <\/span>\r\n      <\/button>\r\n      <div class=\"hp-imp-acc-panel\">\r\n        <div class=\"hp-imp-acc-panel-inner\">\r\n          <div class=\"hp-imp-acc-img-wrap\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1591857177580-dc82b9ac4e1e?w=1400\" alt=\"\u0627\u0644\u0634\u062a\u0644\u0627\u062a\">\r\n            <div class=\"hp-imp-acc-img-tag\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 \u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/div>\r\n          <\/div>\r\n          <div class=\"hp-imp-acc-text\">\r\n            <h4>\u0627\u0644\u0634\u062a\u0644\u0627\u062a<\/h4>\r\n            <p>\r\n              \u0634\u062a\u0644\u0627\u062a \u0642\u0648\u064a\u0629 \u0648\u062e\u0627\u0644\u064a\u0629 \u0645\u0646 \u0627\u0644\u0623\u0645\u0631\u0627\u0636 \u062c\u0627\u0647\u0632\u0629 \u0644\u0644\u0632\u0631\u0627\u0639\u0629 \u2014\r\n              \u062a\u062f\u0639\u0645 \u0627\u0644\u0628\u0633\u0627\u062a\u064a\u0646 \u0648\u0627\u0644\u0635\u0648\u0628 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629 \u0648\u0627\u0644\u0632\u0631\u0627\u0639\u0629 \u0627\u0644\u0645\u0643\u0634\u0648\u0641\u0629.\r\n            <\/p>\r\n            <a href=\"#\" class=\"hp-imp-acc-cta\" data-product=\"\u0627\u0644\u0634\u062a\u0644\u0627\u062a\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n              \u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Footer -->\r\n  <div class=\"hp-imp-acc-footer\">\r\n    <div class=\"hp-imp-acc-footer-left\">\r\n      <i class=\"fa-solid fa-boxes-packing\"><\/i>\r\n      <span>\u0645\u0648\u0631\u062f\u0648\u0646 \u0645\u0639\u062a\u0645\u062f\u0648\u0646 \u0648\u0645\u0635\u0627\u062f\u0631 \u0639\u0627\u0644\u0645\u064a\u0629<\/span>\r\n    <\/div>\r\n    <a href=\"#\" class=\"hp-imp-acc-btn\" data-product=\"\">\r\n      <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n      <span>\u0627\u0637\u0644\u0628 \u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/span>\r\n      <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n    <\/a>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== Base ===== *\/\r\n.hp-imp-acc{\r\n  position:relative;\r\n  width:100%;\r\n  background:#fafaf7;\r\n  padding:110px 40px 90px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  color:#0b2c1d;\r\n  box-sizing:border-box;\r\n  direction:rtl;\r\n}\r\n.hp-imp-acc *,\r\n.hp-imp-acc *::before,\r\n.hp-imp-acc *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n\/* \u2705 \u0641\u0631\u0636 El Messiri \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0633\u064a\u0643\u0634\u0646 *\/\r\n.hp-imp-acc,\r\n.hp-imp-acc *{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* Background word *\/\r\n.hp-imp-acc::before{\r\n  content:\"\u0627\u0633\u062a\u064a\u0631\u0627\u062f\";\r\n  position:absolute;\r\n  top:40px;\r\n  left:-40px;\r\n  font-size:280px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.08);\r\n  letter-spacing:-8px;\r\n  pointer-events:none;\r\n  line-height:1;\r\n  z-index:0;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* ===== Header ===== *\/\r\n.hp-imp-acc-header{\r\n  max-width:820px;\r\n  margin:0 auto 70px;\r\n  position:relative;\r\n  z-index:2;\r\n  text-align:center;\r\n}\r\n.hp-imp-acc-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:26px;\r\n}\r\n.hp-imp-acc-dot{\r\n  width:8px;\r\n  height:8px;\r\n  background:#3C993B;\r\n  border-radius:50%;\r\n  position:relative;\r\n}\r\n.hp-imp-acc-dot::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-4px;\r\n  border:1px solid rgba(60,153,59,.4);\r\n  border-radius:50%;\r\n  animation:hpImpAccPulse 2s ease-out infinite;\r\n}\r\n@keyframes hpImpAccPulse{\r\n  0%{ transform:scale(1); opacity:1; }\r\n  100%{ transform:scale(2.4); opacity:0; }\r\n}\r\n.hp-imp-acc-label span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-imp-acc-title{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(42px, 5.5vw, 84px);\r\n  line-height:1.15;\r\n  font-weight:700;\r\n  letter-spacing:-1.2px;\r\n  margin:0 0 24px;\r\n  color:#0b2c1d;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 em \u2014 El Messiri \u0628\u062f\u0644 Playfair Display *\/\r\n.hp-imp-acc-title em{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-weight:700;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-imp-acc-sub{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  max-width:560px;\r\n  margin:0 auto;\r\n  font-weight:400;\r\n}\r\n\r\n\/* ===== Accordion List ===== *\/\r\n.hp-imp-acc-list{\r\n  max-width:1200px;\r\n  margin:0 auto;\r\n  position:relative;\r\n  z-index:2;\r\n  border-top:1px solid rgba(11,44,29,.1);\r\n}\r\n\r\n.hp-imp-acc-item{\r\n  border-bottom:1px solid rgba(11,44,29,.1);\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\/* Trigger button *\/\r\n.hp-imp-acc-trigger{\r\n  width:100%;\r\n  display:grid;\r\n  grid-template-columns:70px 1fr auto;\r\n  align-items:center;\r\n  gap:24px;\r\n  padding:32px 4px;\r\n  background:transparent;\r\n  border:none;\r\n  cursor:pointer;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  text-align:right;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  color:#0b2c1d;\r\n}\r\n\r\n.hp-imp-acc-num{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:14px;\r\n  font-weight:600;\r\n  color:#888888;\r\n  letter-spacing:2px;\r\n  font-variant-numeric:tabular-nums;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.hp-imp-acc-name{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(20px, 2.2vw, 32px);\r\n  font-weight:600;\r\n  color:#0b2c1d;\r\n  letter-spacing:-.3px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  display:block;\r\n  line-height:1.3;\r\n}\r\n\r\n.hp-imp-acc-icon{\r\n  width:52px;\r\n  height:52px;\r\n  border-radius:50%;\r\n  border:1px solid rgba(11,44,29,.15);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#0b2c1d;\r\n  font-size:15px;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  background:transparent;\r\n  flex-shrink:0;\r\n}\r\n\r\n.hp-imp-acc-trigger:hover .hp-imp-acc-num{\r\n  color:#3C993B;\r\n}\r\n.hp-imp-acc-trigger:hover .hp-imp-acc-name{\r\n  color:#3C993B;\r\n  transform:translateX(-8px);\r\n}\r\n.hp-imp-acc-trigger:hover .hp-imp-acc-icon{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n}\r\n\r\n.hp-imp-acc-item.active .hp-imp-acc-num{\r\n  color:#3C993B;\r\n}\r\n.hp-imp-acc-item.active .hp-imp-acc-name{\r\n  color:#3C993B;\r\n}\r\n.hp-imp-acc-item.active .hp-imp-acc-icon{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:rotate(45deg);\r\n}\r\n\r\n\/* ===== Panel ===== *\/\r\n.hp-imp-acc-panel{\r\n  max-height:0;\r\n  overflow:hidden;\r\n  transition:max-height .8s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.hp-imp-acc-item.active .hp-imp-acc-panel{\r\n  max-height:900px;\r\n}\r\n\r\n.hp-imp-acc-panel-inner{\r\n  display:grid;\r\n  grid-template-columns:1.2fr 1fr;\r\n  gap:50px;\r\n  align-items:center;\r\n  padding:10px 0 50px;\r\n  opacity:0;\r\n  transform:translateY(-10px);\r\n  transition:.6s cubic-bezier(.2,.8,.2,1) .15s;\r\n}\r\n.hp-imp-acc-item.active .hp-imp-acc-panel-inner{\r\n  opacity:1;\r\n  transform:translateY(0);\r\n}\r\n\r\n\/* Image *\/\r\n.hp-imp-acc-img-wrap{\r\n  position:relative;\r\n  border-radius:20px;\r\n  overflow:hidden;\r\n  aspect-ratio:16\/10;\r\n  box-shadow:0 40px 80px -30px rgba(11,44,29,.35);\r\n}\r\n.hp-imp-acc-img-wrap img{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  display:block;\r\n  transition:transform 1.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-imp-acc-img-wrap:hover img{\r\n  transform:scale(1.05);\r\n}\r\n.hp-imp-acc-img-tag{\r\n  position:absolute;\r\n  top:20px;\r\n  right:20px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:1.5px;\r\n  font-weight:600;\r\n  color:#fff;\r\n  padding:8px 14px;\r\n  background:rgba(255,255,255,.15);\r\n  backdrop-filter:blur(12px);\r\n  border:1px solid rgba(255,255,255,.25);\r\n  border-radius:100px;\r\n}\r\n\r\n\/* Text *\/\r\n.hp-imp-acc-text h4{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:24px;\r\n  font-weight:700;\r\n  color:#0b2c1d;\r\n  margin:0 0 16px;\r\n  letter-spacing:-.3px;\r\n}\r\n.hp-imp-acc-text p{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:15px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  margin:0 0 26px;\r\n  font-weight:400;\r\n}\r\n\r\n\/* CTA Button \u2014 WhatsApp Style *\/\r\n.hp-imp-acc-cta{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  padding:14px 26px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-size:13.5px;\r\n  font-weight:600;\r\n  letter-spacing:.2px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  box-shadow:0 12px 30px -12px rgba(37,211,102,.6);\r\n}\r\n.hp-imp-acc-cta i:first-child{\r\n  font-size:18px;\r\n}\r\n.hp-imp-acc-cta i:last-child{\r\n  color:#fff;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-imp-acc-cta:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 18px 40px -15px rgba(37,211,102,.75);\r\n}\r\n.hp-imp-acc-cta:hover i:last-child{\r\n  transform:translateX(-5px);\r\n}\r\n\r\n\/* ===== Footer ===== *\/\r\n.hp-imp-acc-footer{\r\n  max-width:1200px;\r\n  margin:60px auto 0;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  padding-top:40px;\r\n  border-top:1px solid rgba(11,44,29,.1);\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n.hp-imp-acc-footer-left{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  color:#888888;\r\n  font-size:14px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n.hp-imp-acc-footer-left i{\r\n  color:#3C993B;\r\n  font-size:20px;\r\n}\r\n\r\n\/* Footer CTA \u2014 WhatsApp Style *\/\r\n.hp-imp-acc-btn{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  padding:18px 32px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-weight:600;\r\n  font-size:14px;\r\n  letter-spacing:.2px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  box-shadow:0 15px 35px -12px rgba(37,211,102,.6);\r\n}\r\n.hp-imp-acc-btn i:first-child{\r\n  font-size:20px;\r\n}\r\n.hp-imp-acc-btn i:last-child{\r\n  color:#fff;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-imp-acc-btn:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 22px 45px -12px rgba(37,211,102,.75);\r\n}\r\n.hp-imp-acc-btn:hover i:last-child{\r\n  transform:translateX(-6px);\r\n}\r\n\r\n\/* ===== Responsive ===== *\/\r\n@media(max-width:1024px){\r\n  .hp-imp-acc{ padding:80px 24px 70px; }\r\n  .hp-imp-acc::before{ font-size:180px; }\r\n  .hp-imp-acc-panel-inner{\r\n    grid-template-columns:1fr;\r\n    gap:30px;\r\n    padding-bottom:40px;\r\n  }\r\n  .hp-imp-acc-item.active .hp-imp-acc-panel{\r\n    max-height:1400px;\r\n  }\r\n}\r\n\r\n@media(max-width:640px){\r\n  .hp-imp-acc{ padding:60px 16px 60px; }\r\n  .hp-imp-acc::before{ font-size:110px; letter-spacing:-4px; }\r\n  .hp-imp-acc-header{ margin-bottom:50px; }\r\n  .hp-imp-acc-title{ letter-spacing:-.5px; }\r\n  .hp-imp-acc-trigger{\r\n    grid-template-columns:40px 1fr auto;\r\n    gap:14px;\r\n    padding:24px 0;\r\n  }\r\n  .hp-imp-acc-icon{\r\n    width:42px;\r\n    height:42px;\r\n    font-size:13px;\r\n  }\r\n  .hp-imp-acc-text h4{ font-size:19px; }\r\n  .hp-imp-acc-footer{\r\n    flex-direction:column;\r\n    align-items:stretch;\r\n    text-align:center;\r\n  }\r\n  .hp-imp-acc-btn{\r\n    justify-content:center;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  \/* ============================================\r\n     \u2699\ufe0f \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628\r\n     ============================================ *\/\r\n  const WHATSAPP_NUMBER = \"201000049051\"; \/\/ \u0643\u0648\u062f \u0645\u0635\u0631 + \u0627\u0644\u0631\u0642\u0645 \u0628\u062f\u0648\u0646 \u0635\u0641\u0631\r\n  const CATALOG_MESSAGE = \"\u0645\u0631\u062d\u0628\u064b\u0627 HP Group\u060c \u0623\u0648\u062f \u0637\u0644\u0628 \u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0627\u0633\u062a\u064a\u0631\u0627\u062f.\";\r\n\r\n  \/* ============================================\r\n     Accordion Logic\r\n     ============================================ *\/\r\n  const items = document.querySelectorAll('.hp-imp-acc-item');\r\n\r\n  items.forEach(item => {\r\n    const trigger = item.querySelector('.hp-imp-acc-trigger');\r\n\r\n    trigger.addEventListener('click', () => {\r\n      const isActive = item.classList.contains('active');\r\n\r\n      items.forEach(i => i.classList.remove('active'));\r\n\r\n      if(!isActive){\r\n        item.classList.add('active');\r\n\r\n        setTimeout(() => {\r\n          const rect = item.getBoundingClientRect();\r\n          const offset = 100;\r\n          if(rect.top < offset){\r\n            window.scrollBy({\r\n              top: rect.top - offset,\r\n              behavior: 'smooth'\r\n            });\r\n          }\r\n        }, 400);\r\n      }\r\n    });\r\n  });\r\n\r\n  \/* ============================================\r\n     WhatsApp Click Handlers\r\n     ============================================ *\/\r\n  function openWhatsApp(message){\r\n    const url = \"https:\/\/wa.me\/\" + WHATSAPP_NUMBER + \"?text=\" + encodeURIComponent(message);\r\n    window.open(url, \"_blank\", \"noopener\");\r\n  }\r\n\r\n  \/\/ \u0623\u0632\u0631\u0627\u0631 \"\u0627\u0637\u0644\u0628 \u0627\u0644\u0623\u0633\u0639\u0627\u0631\" \u062c\u0648\u0647 \u0643\u0644 \u062e\u062f\u0645\u0629\r\n  const productBtns = document.querySelectorAll('.hp-imp-acc-cta');\r\n  productBtns.forEach(btn => {\r\n    btn.addEventListener('click', function(e){\r\n      e.preventDefault();\r\n      const product = this.dataset.product || \"\";\r\n      const msg = product\r\n        ? \"\u0645\u0631\u062d\u0628\u064b\u0627 HP Group\u060c \u0623\u0648\u062f \u0627\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u0639\u0646 \u0623\u0633\u0639\u0627\u0631 \" + product + \".\"\r\n        : CATALOG_MESSAGE;\r\n      openWhatsApp(msg);\r\n    });\r\n  });\r\n\r\n  \/\/ \u0632\u0631 \u0627\u0644\u0641\u0648\u062a\u0631 \"\u0627\u0637\u0644\u0628 \u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0627\u0633\u062a\u064a\u0631\u0627\u062f\"\r\n  const footerBtn = document.querySelector('.hp-imp-acc-btn');\r\n  if(footerBtn){\r\n    footerBtn.addEventListener('click', function(e){\r\n      e.preventDefault();\r\n      openWhatsApp(CATALOG_MESSAGE);\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d332fa0 e-con-full e-flex e-con e-child\" data-id=\"d332fa0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2fb3c59 elementor-widget elementor-widget-html\" data-id=\"2fb3c59\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<section class=\"hp-flow\" id=\"workflow\" dir=\"rtl\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"hp-flow-header\">\r\n    <div class=\"hp-flow-label\">\r\n      <span class=\"hp-flow-dot\"><\/span>\r\n      <span>\u0643\u064a\u0641 \u0646\u0639\u0645\u0644<\/span>\r\n    <\/div>\r\n\r\n    <h2 class=\"hp-flow-title\">\r\n      \u0645\u0631\u0627\u062d\u0644 <em>\u0639\u0645\u0644\u0646\u0627<\/em> \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629\r\n    <\/h2>\r\n\r\n    <p class=\"hp-flow-sub\">\r\n      \u0645\u0646 \u0627\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u062d\u062a\u0649 \u0627\u0644\u062a\u0633\u0644\u064a\u0645 \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u2014 \u062f\u0642\u0629 \u0641\u064a \u0643\u0644 \u062e\u0637\u0648\u0629.\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <!-- Timeline -->\r\n  <div class=\"hp-flow-timeline\">\r\n\r\n    <!-- Connector line -->\r\n    <div class=\"hp-flow-line\">\r\n      <div class=\"hp-flow-line-fill\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Steps -->\r\n    <div class=\"hp-flow-steps\">\r\n\r\n      <!-- Step 01 -->\r\n      <div class=\"hp-flow-step active\" data-step=\"1\">\r\n        <div class=\"hp-flow-num\">01<\/div>\r\n        <div class=\"hp-flow-circle\">\r\n          <i class=\"fa-regular fa-envelope\"><\/i>\r\n        <\/div>\r\n        <div class=\"hp-flow-name\">\u0627\u0644\u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/div>\r\n        <div class=\"hp-flow-desc\">\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0637\u0644\u0628\u0643<\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 02 -->\r\n      <div class=\"hp-flow-step\" data-step=\"2\">\r\n        <div class=\"hp-flow-num\">02<\/div>\r\n        <div class=\"hp-flow-circle\">\r\n          <i class=\"fa-solid fa-magnifying-glass\"><\/i>\r\n        <\/div>\r\n        <div class=\"hp-flow-name\">\u0627\u0644\u062a\u0648\u0631\u064a\u062f \u0648\u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631<\/div>\r\n        <div class=\"hp-flow-desc\">\u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0648\u0631\u062f\u064a\u0646 \u0639\u0627\u0644\u0645\u064a\u064b\u0627<\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 03 -->\r\n      <div class=\"hp-flow-step\" data-step=\"3\">\r\n        <div class=\"hp-flow-num\">03<\/div>\r\n        <div class=\"hp-flow-circle\">\r\n          <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n        <\/div>\r\n        <div class=\"hp-flow-name\">\u0645\u0631\u0627\u0642\u0628\u0629 \u0627\u0644\u062c\u0648\u062f\u0629<\/div>\r\n        <div class=\"hp-flow-desc\">\u0641\u062d\u0635 \u0635\u0627\u0631\u0645<\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 04 -->\r\n      <div class=\"hp-flow-step\" data-step=\"4\">\r\n        <div class=\"hp-flow-num\">04<\/div>\r\n        <div class=\"hp-flow-circle\">\r\n          <i class=\"fa-solid fa-file-contract\"><\/i>\r\n        <\/div>\r\n        <div class=\"hp-flow-name\">\u0627\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a<\/div>\r\n        <div class=\"hp-flow-desc\">\u0627\u0644\u062c\u0645\u0627\u0631\u0643 \u0648\u0627\u0644\u062a\u0635\u0627\u0631\u064a\u062d<\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 05 -->\r\n      <div class=\"hp-flow-step\" data-step=\"5\">\r\n        <div class=\"hp-flow-num\">05<\/div>\r\n        <div class=\"hp-flow-circle\">\r\n          <i class=\"fa-solid fa-truck-fast\"><\/i>\r\n        <\/div>\r\n        <div class=\"hp-flow-name\">\u0627\u0644\u0634\u062d\u0646 \u0648\u0627\u0644\u0644\u0648\u062c\u0633\u062a\u064a\u0643<\/div>\r\n        <div class=\"hp-flow-desc\">\u062c\u0627\u0647\u0632\u064a\u0629 \u0633\u0644\u0633\u0644\u0629 \u0627\u0644\u062a\u0628\u0631\u064a\u062f<\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 06 -->\r\n      <div class=\"hp-flow-step\" data-step=\"6\">\r\n        <div class=\"hp-flow-num\">06<\/div>\r\n        <div class=\"hp-flow-circle\">\r\n          <i class=\"fa-solid fa-circle-check\"><\/i>\r\n        <\/div>\r\n        <div class=\"hp-flow-name\">\u062a\u0633\u0644\u064a\u0645 \u0622\u0645\u0646<\/div>\r\n        <div class=\"hp-flow-desc\">\u0641\u064a \u0627\u0644\u0645\u0648\u0639\u062f\u060c \u062f\u0627\u0626\u0645\u064b\u0627<\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Bottom note -->\r\n  <div class=\"hp-flow-footer\">\r\n    <div class=\"hp-flow-footer-item\">\r\n      <i class=\"fa-solid fa-clock\"><\/i>\r\n      <span>\u062a\u0633\u0644\u064a\u0645 \u0645\u0636\u0645\u0648\u0646 \u0641\u064a \u0627\u0644\u0645\u0648\u0639\u062f<\/span>\r\n    <\/div>\r\n    <div class=\"hp-flow-footer-item\">\r\n      <i class=\"fa-solid fa-certificate\"><\/i>\r\n      <span>\u062c\u0648\u062f\u0629 \u0645\u0639\u062a\u0645\u062f\u0629 \u0641\u064a \u0643\u0644 \u0645\u0631\u062d\u0644\u0629<\/span>\r\n    <\/div>\r\n    <div class=\"hp-flow-footer-item\">\r\n      <i class=\"fa-solid fa-headset\"><\/i>\r\n      <span>\u062f\u0639\u0645 \u0645\u062e\u0635\u0635 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== Base ===== *\/\r\n.hp-flow{\r\n  position:relative;\r\n  width:100%;\r\n  background:#fafaf7;\r\n  padding:40px 0px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  color:#0b2c1d;\r\n  box-sizing:border-box;\r\n  direction:rtl;\r\n}\r\n.hp-flow *,\r\n.hp-flow *::before,\r\n.hp-flow *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n\/* \u2705 \u0641\u0631\u0636 El Messiri \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0633\u064a\u0643\u0634\u0646 *\/\r\n.hp-flow,\r\n.hp-flow *{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* Background big word *\/\r\n.hp-flow::before{\r\n  content:\"\u0645\u0631\u0627\u062d\u0644\";\r\n  position:absolute;\r\n  top:40px;\r\n  left:-40px;\r\n  font-size:260px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.07);\r\n  letter-spacing:-8px;\r\n  pointer-events:none;\r\n  line-height:1;\r\n  z-index:0;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* ===== Header ===== *\/\r\n.hp-flow-header{\r\n  max-width:100%;\r\n  margin:0 auto 80px;\r\n  position:relative;\r\n  z-index:2;\r\n  text-align:center;\r\n}\r\n.hp-flow-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:24px;\r\n}\r\n.hp-flow-dot{\r\n  width:8px;\r\n  height:8px;\r\n  background:#3C993B;\r\n  border-radius:50%;\r\n  position:relative;\r\n}\r\n.hp-flow-dot::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-4px;\r\n  border:1px solid rgba(60,153,59,.4);\r\n  border-radius:50%;\r\n  animation:hpFlowPulse 2s ease-out infinite;\r\n}\r\n@keyframes hpFlowPulse{\r\n  0%{ transform:scale(1); opacity:1; }\r\n  100%{ transform:scale(2.4); opacity:0; }\r\n}\r\n.hp-flow-label span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-flow-title{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(36px, 4.5vw, 64px);\r\n  line-height:1.2;\r\n  font-weight:700;\r\n  letter-spacing:-1px;\r\n  margin:0 0 20px;\r\n  color:#0b2c1d;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 em \u2014 El Messiri \u0628\u062f\u0644 Playfair Display *\/\r\n.hp-flow-title em{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-weight:700;\r\n  color:#3C993B;\r\n  position:relative;\r\n  display:inline-block;\r\n}\r\n.hp-flow-title em::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  left:0;\r\n  bottom:2px;\r\n  width:100%;\r\n  height:6px;\r\n  background:linear-gradient(90deg, rgba(60,153,59,.25), rgba(60,153,59,.05));\r\n  border-radius:3px;\r\n  z-index:-1;\r\n}\r\n\r\n.hp-flow-sub{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  max-width:560px;\r\n  margin:0 auto;\r\n  font-weight:400;\r\n}\r\n\r\n\/* ===== Timeline ===== *\/\r\n.hp-flow-timeline{\r\n  max-width:1300px;\r\n  margin:0 auto;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n\/* Connector Line *\/\r\n.hp-flow-line{\r\n  position:absolute;\r\n  top:66px;\r\n  left:80px;\r\n  right:80px;\r\n  height:2px;\r\n  background:rgba(11,44,29,.08);\r\n  border-radius:2px;\r\n  overflow:hidden;\r\n}\r\n.hp-flow-line-fill{\r\n  position:absolute;\r\n  top:0;\r\n  right:0;\r\n  height:100%;\r\n  width:0%;\r\n  background:linear-gradient(270deg, #3C993B, #888888);\r\n  border-radius:2px;\r\n  transition:width 1.6s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-flow-timeline.in-view .hp-flow-line-fill{\r\n  width:100%;\r\n}\r\n\r\n\/* Steps Container *\/\r\n.hp-flow-steps{\r\n  display:grid;\r\n  grid-template-columns:repeat(6, 1fr);\r\n  gap:20px;\r\n  position:relative;\r\n}\r\n\r\n\/* Single Step *\/\r\n.hp-flow-step{\r\n  display:flex;\r\n  flex-direction:column;\r\n  align-items:center;\r\n  text-align:center;\r\n  position:relative;\r\n  cursor:pointer;\r\n  padding:0 8px;\r\n}\r\n\r\n\/* Number badge *\/\r\n.hp-flow-num{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  font-weight:700;\r\n  letter-spacing:1px;\r\n  color:#888888;\r\n  background:#fafaf7;\r\n  padding:4px 10px;\r\n  border-radius:100px;\r\n  margin-bottom:8px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n\/* Circle icon *\/\r\n.hp-flow-circle{\r\n  width:84px;\r\n  height:84px;\r\n  border-radius:50%;\r\n  background:#fff;\r\n  border:2px solid rgba(60,153,59,.18);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#3C993B;\r\n  font-size:30px;\r\n  position:relative;\r\n  z-index:2;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  box-shadow:0 10px 30px -10px rgba(11,44,29,.08);\r\n}\r\n.hp-flow-circle::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-8px;\r\n  border-radius:50%;\r\n  border:1px dashed rgba(60,153,59,.25);\r\n  opacity:0;\r\n  transform:scale(.85);\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\/* Step name *\/\r\n.hp-flow-name{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:15px;\r\n  font-weight:700;\r\n  color:#0b2c1d;\r\n  margin:18px 0 6px;\r\n  letter-spacing:-.2px;\r\n  line-height:1.4;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\/* Step description *\/\r\n.hp-flow-desc{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12.5px;\r\n  font-weight:400;\r\n  color:#888888;\r\n  line-height:1.6;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\/* ===== Hover State ===== *\/\r\n.hp-flow-step:hover .hp-flow-circle{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:translateY(-6px) scale(1.05);\r\n  box-shadow:0 20px 40px -12px rgba(60,153,59,.5);\r\n}\r\n.hp-flow-step:hover .hp-flow-circle::after{\r\n  opacity:1;\r\n  transform:scale(1);\r\n  animation:hpFlowSpin 12s linear infinite;\r\n}\r\n@keyframes hpFlowSpin{\r\n  to{ transform:rotate(360deg); }\r\n}\r\n.hp-flow-step:hover .hp-flow-num{\r\n  color:#3C993B;\r\n  background:rgba(60,153,59,.1);\r\n}\r\n.hp-flow-step:hover .hp-flow-name{\r\n  color:#3C993B;\r\n}\r\n\r\n\/* ===== Active State ===== *\/\r\n.hp-flow-step.active .hp-flow-circle{\r\n  background:linear-gradient(135deg, #3C993B, #2e7a2d);\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  box-shadow:0 15px 35px -10px rgba(60,153,59,.55);\r\n}\r\n.hp-flow-step.active .hp-flow-circle::after{\r\n  opacity:1;\r\n  transform:scale(1);\r\n  animation:hpFlowSpin 20s linear infinite;\r\n}\r\n.hp-flow-step.active .hp-flow-num{\r\n  color:#fff;\r\n  background:#3C993B;\r\n}\r\n.hp-flow-step.active .hp-flow-name{\r\n  color:#3C993B;\r\n}\r\n\r\n\/* ===== Footer ===== *\/\r\n.hp-flow-footer{\r\n  max-width:1200px;\r\n  margin:80px auto 0;\r\n  padding-top:40px;\r\n  border-top:1px solid rgba(11,44,29,.1);\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  gap:30px;\r\n  flex-wrap:wrap;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n.hp-flow-footer-item{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  color:#888888;\r\n  font-size:14px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-weight:400;\r\n}\r\n.hp-flow-footer-item i{\r\n  color:#3C993B;\r\n  font-size:18px;\r\n}\r\n\r\n\/* ===== Responsive ===== *\/\r\n@media(max-width:1024px){\r\n  .hp-flow{ padding:40px 0px; }\r\n  .hp-flow::before{ font-size:180px; }\r\n  .hp-flow-steps{\r\n    grid-template-columns:repeat(3, 1fr);\r\n    gap:50px 20px;\r\n  }\r\n  .hp-flow-line{ display:none; }\r\n}\r\n\r\n@media(max-width:640px){\r\n  .hp-flow{ padding:0px; }\r\n  .hp-flow::before{ font-size:110px; letter-spacing:-4px; }\r\n  .hp-flow-header{ margin-bottom:50px; }\r\n  .hp-flow-title{ letter-spacing:-.5px; }\r\n  .hp-flow-steps{\r\n    grid-template-columns:repeat(2, 1fr);\r\n    gap:40px 12px;\r\n  }\r\n  .hp-flow-circle{\r\n    width:70px;\r\n    height:70px;\r\n    font-size:24px;\r\n  }\r\n  .hp-flow-name{ font-size:13px; }\r\n  .hp-flow-desc{ font-size:11px; }\r\n  .hp-flow-footer{\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n    gap:20px;\r\n    margin-top:60px;\r\n  }\r\n}\r\n\r\n@media(max-width:400px){\r\n  .hp-flow-steps{ grid-template-columns:1fr; }\r\n  .hp-flow-line{ display:none; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  \/* ============================================\r\n     Reveal on scroll \u2014 \u062a\u0634\u063a\u064a\u0644 \u062e\u0637 \u0627\u0644\u0640 Timeline\r\n     ============================================ *\/\r\n  const timeline = document.querySelector('.hp-flow-timeline');\r\n  if(timeline){\r\n    const io = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if(entry.isIntersecting){\r\n          timeline.classList.add('in-view');\r\n          io.unobserve(timeline);\r\n        }\r\n      });\r\n    }, { threshold: 0.3 });\r\n    io.observe(timeline);\r\n  }\r\n\r\n  \/* ============================================\r\n     Click Step \u2014 \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u062e\u0637\u0648\u0629\r\n     ============================================ *\/\r\n  const steps = document.querySelectorAll('.hp-flow-step');\r\n  steps.forEach(step => {\r\n    step.addEventListener('click', () => {\r\n      steps.forEach(s => s.classList.remove('active'));\r\n      step.classList.add('active');\r\n    });\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e21123a e-con-full e-flex e-con e-child\" data-id=\"e21123a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d896c4e elementor-widget elementor-widget-html\" data-id=\"d896c4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<section class=\"hp-stats\" id=\"stats\" dir=\"rtl\">\r\n\r\n  <div class=\"hp-stats-bg-word\">\u0623\u0631\u0642\u0627\u0645\u0646\u0627<\/div>\r\n  <div class=\"hp-stats-glow hp-stats-glow-1\"><\/div>\r\n  <div class=\"hp-stats-glow hp-stats-glow-2\"><\/div>\r\n\r\n  <div class=\"hp-stats-container\">\r\n\r\n    <div class=\"hp-stats-header\">\r\n      <div class=\"hp-stats-label\">\r\n        <span class=\"hp-stats-dot\"><\/span>\r\n        <span>\u0628\u0627\u0644\u0623\u0631\u0642\u0627\u0645<\/span>\r\n      <\/div>\r\n      <h2 class=\"hp-stats-title\">\r\n        \u0623\u0631\u0642\u0627\u0645 <em>\u062a\u062a\u062d\u062f\u062b<\/em> \u0639\u0646\u0627.\r\n      <\/h2>\r\n      <p class=\"hp-stats-sub\">\r\n        \u0623\u0643\u062b\u0631 \u0645\u0646 \u0639\u0642\u062f \u0645\u0646 \u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0645\u0648\u062b\u0648\u0642\u0629 \u2014 \u0645\u0642\u0627\u0633\u0629 \u0628\u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0648\u0627\u0644\u0634\u0631\u0643\u0627\u0621 \u0648\u0627\u0644\u062f\u0648\u0644 \u0627\u0644\u062a\u064a \u0646\u062e\u062f\u0645\u0647\u0627.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"hp-stats-grid\" id=\"hpStatsGrid\">\r\n\r\n      <div class=\"hp-stat\" data-reveal data-value=\"15\">\r\n        <div class=\"hp-stat-icon\"><i class=\"fa-solid fa-calendar-check\"><\/i><\/div>\r\n        <div class=\"hp-stat-num\">\r\n          <span class=\"hp-counter\">15<\/span><span class=\"hp-stat-suffix\">+<\/span>\r\n        <\/div>\r\n        <div class=\"hp-stat-lbl\">\u0633\u0646\u0648\u0627\u062a \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hp-stat\" data-reveal data-value=\"25\">\r\n        <div class=\"hp-stat-icon\"><i class=\"fa-solid fa-earth-africa\"><\/i><\/div>\r\n        <div class=\"hp-stat-num\">\r\n          <span class=\"hp-counter\">25<\/span><span class=\"hp-stat-suffix\">+<\/span>\r\n        <\/div>\r\n        <div class=\"hp-stat-lbl\">\u062f\u0648\u0644\u0629 \u0646\u062e\u062f\u0645\u0647\u0627<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hp-stat\" data-reveal data-value=\"500\">\r\n        <div class=\"hp-stat-icon\"><i class=\"fa-solid fa-users\"><\/i><\/div>\r\n        <div class=\"hp-stat-num\">\r\n          <span class=\"hp-counter\">500<\/span><span class=\"hp-stat-suffix\">+<\/span>\r\n        <\/div>\r\n        <div class=\"hp-stat-lbl\">\u0639\u0645\u064a\u0644 \u0646\u0634\u0637<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hp-stat\" data-reveal data-value=\"1200\">\r\n        <div class=\"hp-stat-icon\"><i class=\"fa-solid fa-ship\"><\/i><\/div>\r\n        <div class=\"hp-stat-num\">\r\n          <span class=\"hp-counter\">1200<\/span><span class=\"hp-stat-suffix\">+<\/span>\r\n        <\/div>\r\n        <div class=\"hp-stat-lbl\">\u0634\u062d\u0646\u0629 \u062a\u0645 \u062a\u0633\u0644\u064a\u0645\u0647\u0627<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hp-stat\" data-reveal data-value=\"300\">\r\n        <div class=\"hp-stat-icon\"><i class=\"fa-solid fa-boxes-stacked\"><\/i><\/div>\r\n        <div class=\"hp-stat-num\">\r\n          <span class=\"hp-counter\">300<\/span><span class=\"hp-stat-suffix\">+<\/span>\r\n        <\/div>\r\n        <div class=\"hp-stat-lbl\">\u0645\u0646\u062a\u062c \u0646\u062a\u062f\u0627\u0648\u0644\u0647<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hp-stat\" data-reveal data-value=\"100\">\r\n        <div class=\"hp-stat-icon\"><i class=\"fa-solid fa-award\"><\/i><\/div>\r\n        <div class=\"hp-stat-num\">\r\n          <span class=\"hp-counter\">100<\/span><span class=\"hp-stat-suffix\">%<\/span>\r\n        <\/div>\r\n        <div class=\"hp-stat-lbl\">\u0636\u0645\u0627\u0646 \u0627\u0644\u062c\u0648\u062f\u0629<\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== Base ===== *\/\r\n.hp-stats{\r\n  position:relative;\r\n  width:100%;\r\n  padding:20px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  color:#fff;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  box-sizing:border-box;\r\n  border-radius: 20px;\r\n  direction:rtl;\r\n\r\n  background:\r\n    radial-gradient(circle at 15% 20%, rgba(60,153,59,.35) 0%, transparent 45%),\r\n    radial-gradient(circle at 85% 80%, rgba(136,136,136,.25) 0%, transparent 50%),\r\n    linear-gradient(135deg, #1a1f1c 0%, #0d100e 50%, #1c2218 100%);\r\n}\r\n.hp-stats *,\r\n.hp-stats *::before,\r\n.hp-stats *::after{ box-sizing:border-box; }\r\n\r\n\/* \u2705 \u0641\u0631\u0636 El Messiri \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0633\u064a\u0643\u0634\u0646 *\/\r\n.hp-stats,\r\n.hp-stats *{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n.hp-stats-bg-word{\r\n  position:absolute;\r\n  top:30px;\r\n  left:-60px;\r\n  font-size:320px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.12);\r\n  letter-spacing:-6px;\r\n  pointer-events:none;\r\n  line-height:1;\r\n  z-index:0;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n.hp-stats-glow{\r\n  position:absolute;\r\n  border-radius:50%;\r\n  filter:blur(140px);\r\n  pointer-events:none;\r\n  z-index:0;\r\n}\r\n.hp-stats-glow-1{\r\n  width:700px; height:700px;\r\n  background:radial-gradient(circle, rgba(60,153,59,.45), transparent 70%);\r\n  top:-250px; right:-250px;\r\n  animation:hpStatsFloat1 20s ease-in-out infinite;\r\n}\r\n.hp-stats-glow-2{\r\n  width:600px; height:600px;\r\n  background:radial-gradient(circle, rgba(136,136,136,.3), transparent 70%);\r\n  bottom:-200px; left:-200px;\r\n  animation:hpStatsFloat2 24s ease-in-out infinite;\r\n}\r\n@keyframes hpStatsFloat1{\r\n  0%,100%{ transform:translate(0,0); }\r\n  50%{ transform:translate(-80px,60px); }\r\n}\r\n@keyframes hpStatsFloat2{\r\n  0%,100%{ transform:translate(0,0); }\r\n  50%{ transform:translate(70px,-50px); }\r\n}\r\n\r\n.hp-stats-container{\r\n  position:relative;\r\n  z-index:2;\r\n  width:100%;\r\n  padding:0 40px;\r\n}\r\n\r\n\/* Header *\/\r\n.hp-stats-header{\r\n  max-width:820px;\r\n  margin:0 auto 70px;\r\n  text-align:center;\r\n}\r\n.hp-stats-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:24px;\r\n}\r\n.hp-stats-dot{\r\n  width:8px; height:8px;\r\n  background:#3C993B;\r\n  border-radius:50%;\r\n  position:relative;\r\n}\r\n.hp-stats-dot::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-4px;\r\n  border:1px solid rgba(60,153,59,.5);\r\n  border-radius:50%;\r\n  animation:hpStatsPulse 2s ease-out infinite;\r\n}\r\n@keyframes hpStatsPulse{\r\n  0%{ transform:scale(1); opacity:1; }\r\n  100%{ transform:scale(2.4); opacity:0; }\r\n}\r\n.hp-stats-label span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n.hp-stats-title{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(36px, 4.5vw, 64px);\r\n  line-height:1.2;\r\n  font-weight:700;\r\n  letter-spacing:-.8px;\r\n  margin:0 0 20px;\r\n  color:#fff;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 em \u2014 El Messiri \u0628\u062f\u0644 Playfair Display *\/\r\n.hp-stats-title em{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-weight:700;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-stats-sub{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  max-width:560px;\r\n  margin:0 auto;\r\n  font-weight:400;\r\n}\r\n\r\n\/* Grid *\/\r\n.hp-stats-grid{\r\n  width:100%;\r\n  display:grid;\r\n  grid-template-columns:repeat(6, 1fr);\r\n  gap:0;\r\n}\r\n\r\n.hp-stat{\r\n  background:rgba(255,255,255,.02);\r\n  border:1px solid rgba(60,153,59,.15);\r\n  border-left:none;\r\n  padding:50px 28px;\r\n  text-align:center;\r\n  position:relative;\r\n  overflow:hidden;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  opacity:0;\r\n  transform:translateY(40px);\r\n}\r\n.hp-stat:last-child{\r\n  border-left:1px solid rgba(60,153,59,.15);\r\n}\r\n.hp-stat.revealed{\r\n  opacity:1;\r\n  transform:translateY(0);\r\n}\r\n\r\n.hp-stat::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  background:linear-gradient(180deg, rgba(60,153,59,.15) 0%, rgba(60,153,59,.02) 100%);\r\n  opacity:0;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  pointer-events:none;\r\n}\r\n.hp-stat:hover::before{\r\n  opacity:1;\r\n}\r\n.hp-stat:hover{\r\n  border-color:rgba(60,153,59,.5);\r\n  transform:translateY(-6px);\r\n  z-index:2;\r\n  box-shadow:0 30px 60px -25px rgba(60,153,59,.4);\r\n}\r\n\r\n.hp-stat-icon{\r\n  width:56px;\r\n  height:56px;\r\n  margin:0 auto 24px;\r\n  border-radius:14px;\r\n  background:linear-gradient(135deg, #3C993B, #2e7a2d);\r\n  color:#fff;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  font-size:22px;\r\n  box-shadow:0 10px 30px -10px rgba(60,153,59,.65);\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  position:relative;\r\n  z-index:1;\r\n}\r\n.hp-stat:hover .hp-stat-icon{\r\n  transform:rotate(8deg) scale(1.1);\r\n  box-shadow:0 15px 40px -10px rgba(60,153,59,.85);\r\n}\r\n\r\n.hp-stat-num{\r\n  display:flex;\r\n  align-items:flex-start;\r\n  justify-content:center;\r\n  line-height:1;\r\n  margin-bottom:16px;\r\n  position:relative;\r\n  z-index:1;\r\n  flex-direction:row-reverse;\r\n  direction:ltr;\r\n}\r\n.hp-counter{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(48px, 4.5vw, 72px);\r\n  font-weight:700;\r\n  letter-spacing:-2px;\r\n  color:#fff;\r\n  font-variant-numeric:tabular-nums;\r\n}\r\n.hp-stat-suffix{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:28px;\r\n  color:#3C993B;\r\n  font-weight:700;\r\n  margin-top:8px;\r\n  margin-right:4px;\r\n}\r\n\r\n.hp-stat-lbl{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:13px;\r\n  letter-spacing:.5px;\r\n  color:#888888;\r\n  font-weight:500;\r\n  position:relative;\r\n  z-index:1;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-stat:hover .hp-stat-lbl{\r\n  color:#c9d6cf;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media(max-width:1200px){\r\n  .hp-stats-grid{\r\n    grid-template-columns:repeat(3, 1fr);\r\n  }\r\n  .hp-stat{\r\n    border-left:1px solid rgba(60,153,59,.15);\r\n    border-bottom:none;\r\n  }\r\n  .hp-stat:nth-child(3n),\r\n  .hp-stat:last-child{\r\n    border-left:1px solid rgba(60,153,59,.15);\r\n  }\r\n  .hp-stat:nth-child(n+4){\r\n    border-top:none;\r\n  }\r\n}\r\n\r\n@media(max-width:768px){\r\n  .hp-stats{ padding:80px 0; }\r\n  .hp-stats-bg-word{ font-size:180px; letter-spacing:-3px; }\r\n  .hp-stats-container{ padding:0 20px; }\r\n  .hp-stats-grid{\r\n    grid-template-columns:repeat(2, 1fr);\r\n  }\r\n  .hp-stat{\r\n    padding:40px 20px;\r\n  }\r\n  .hp-stat:nth-child(3n){\r\n    border-left:1px solid rgba(60,153,59,.15);\r\n  }\r\n  .hp-counter{ font-size:52px; }\r\n  .hp-stat-suffix{ font-size:22px; }\r\n}\r\n\r\n@media(max-width:480px){\r\n  .hp-stats{ padding:60px 0; }\r\n  .hp-stats-bg-word{ font-size:100px; letter-spacing:-2px; }\r\n  .hp-stats-container{ padding:0 16px; }\r\n  .hp-stats-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n  .hp-stat{\r\n    border-left:1px solid rgba(60,153,59,.15);\r\n    padding:36px 20px;\r\n  }\r\n  .hp-stat-icon{\r\n    width:48px;\r\n    height:48px;\r\n    font-size:18px;\r\n    margin-bottom:18px;\r\n  }\r\n  .hp-counter{ font-size:48px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/* ===== Reveal on scroll ===== *\/\r\n(function(){\r\n  var stats = document.querySelectorAll('.hp-stat');\r\n  if(!stats.length) return;\r\n\r\n  var io = new IntersectionObserver(function(entries){\r\n    entries.forEach(function(entry, i){\r\n      if(entry.isIntersecting){\r\n        setTimeout(function(){\r\n          entry.target.classList.add('revealed');\r\n        }, i * 90);\r\n        io.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.15 });\r\n  stats.forEach(function(s){ io.observe(s); });\r\n})();\r\n\r\n\/* ===== Counter animation \u2014 \u0646\u0633\u062e\u0629 \u0645\u0636\u0645\u0648\u0646\u0629 ===== *\/\r\n(function(){\r\n  var counters = document.querySelectorAll('.hp-counter');\r\n  if(!counters.length) return;\r\n\r\n  var runAnimation = function(el, target){\r\n    var dur = 1800;\r\n    var start = performance.now();\r\n\r\n    function tick(now){\r\n      var p = Math.min((now - start) \/ dur, 1);\r\n      var eased = 1 - Math.pow(1 - p, 3);\r\n      var val = Math.floor(eased * target);\r\n      el.textContent = val.toLocaleString();\r\n      if(p < 1){\r\n        requestAnimationFrame(tick);\r\n      } else {\r\n        el.textContent = target.toLocaleString();\r\n      }\r\n    }\r\n    requestAnimationFrame(tick);\r\n  };\r\n\r\n  var io = new IntersectionObserver(function(entries){\r\n    entries.forEach(function(entry){\r\n      if(!entry.isIntersecting) return;\r\n\r\n      var el = entry.target;\r\n      if(el.dataset.done === '1') return;\r\n      el.dataset.done = '1';\r\n\r\n      var parent = el.closest('.hp-stat');\r\n      var target = 0;\r\n\r\n      if(parent && parent.dataset.value){\r\n        target = parseInt(parent.dataset.value, 10);\r\n      }\r\n\r\n      if(!target || isNaN(target)){\r\n        var txt = (el.textContent || '').replace(\/[^0-9]\/g, '');\r\n        target = parseInt(txt, 10);\r\n      }\r\n\r\n      if(!target || isNaN(target) || target <= 0){\r\n        el.textContent = '0';\r\n        return;\r\n      }\r\n\r\n      el.textContent = '0';\r\n      runAnimation(el, target);\r\n\r\n      io.unobserve(el);\r\n    });\r\n  }, { threshold: 0.4 });\r\n\r\n  counters.forEach(function(c){ io.observe(c); });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0ad88d4 e-con-full e-flex e-con e-child\" data-id=\"0ad88d4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-77dc99d elementor-widget elementor-widget-html\" data-id=\"77dc99d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<section class=\"hp-why\" id=\"why\" dir=\"rtl\">\r\n\r\n  <!-- Background decorations -->\r\n  <div class=\"hp-why-bg-word\">\u0644\u0645\u0627\u0630\u0627 \u0646\u062d\u0646<\/div>\r\n  <div class=\"hp-why-glow hp-why-glow-1\"><\/div>\r\n  <div class=\"hp-why-glow hp-why-glow-2\"><\/div>\r\n\r\n  <div class=\"hp-why-container\">\r\n\r\n    <div class=\"hp-why-header\">\r\n      <div class=\"hp-why-label\">\r\n        <span class=\"hp-why-dot\"><\/span>\r\n        <span>\u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0627\u0631\u0646\u0627<\/span>\r\n      <\/div>\r\n      <h2 class=\"hp-why-title\">\r\n        \u0645\u0628\u0646\u064a\u0648\u0646 \u0639\u0644\u0649 \u0627\u0644\u062b\u0642\u0629.<br>\r\n        \u0645\u062f\u0641\u0648\u0639\u0648\u0646 <em>\u0628\u0627\u0644\u062a\u0645\u064a\u0632.<\/em>\r\n      <\/h2>\r\n      <p class=\"hp-why-sub\">\r\n        \u0633\u062a\u0629 \u0623\u0633\u0628\u0627\u0628 \u062a\u062c\u0639\u0644 \u0627\u0644\u0634\u0631\u0643\u0627\u0621 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u064a\u0646 \u064a\u062e\u062a\u0627\u0631\u0648\u0646 \u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0647\u0645 \u0641\u064a \u0627\u0644\u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0648\u0627\u0644\u062a\u0635\u062f\u064a\u0631.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"hp-why-list\">\r\n\r\n      <!-- Row 01 -->\r\n      <div class=\"hp-why-row active\">\r\n        <div class=\"hp-why-num\">01<\/div>\r\n        <div class=\"hp-why-body\">\r\n          <div class=\"hp-why-icon-box\"><i class=\"fa-solid fa-shield-halved\"><\/i><\/div>\r\n          <div class=\"hp-why-text\">\r\n            <h3>\u062c\u0648\u062f\u0629 \u0645\u0639\u062a\u0645\u062f\u0629<\/h3>\r\n            <p>\u0643\u0644 \u0634\u062d\u0646\u0629 \u064a\u062a\u0645 \u0641\u062d\u0635\u0647\u0627 \u0648\u0641\u0642 \u0627\u0644\u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u062f\u0648\u0644\u064a\u0629 \u2014 \u0644\u0623\u0646 \u0633\u0645\u0639\u062a\u0643 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0633\u0645\u0639\u062a\u0646\u0627.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"hp-why-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/div>\r\n      <\/div>\r\n\r\n      <!-- Row 02 -->\r\n      <div class=\"hp-why-row\">\r\n        <div class=\"hp-why-num\">02<\/div>\r\n        <div class=\"hp-why-body\">\r\n          <div class=\"hp-why-icon-box\"><i class=\"fa-solid fa-truck-fast\"><\/i><\/div>\r\n          <div class=\"hp-why-text\">\r\n            <h3>\u062a\u0633\u0644\u064a\u0645 \u0633\u0631\u064a\u0639<\/h3>\r\n            <p>\u0634\u062d\u0646 \u0641\u064a \u0627\u0644\u0645\u0648\u0639\u062f \u0639\u0628\u0631 \u0627\u0644\u0642\u0627\u0631\u0627\u062a \u0645\u0639 \u062a\u062a\u0628\u0639 \u0641\u0648\u0631\u064a \u0648\u0645\u0639\u0627\u0644\u062c\u0629 \u0630\u0627\u062a \u0623\u0648\u0644\u0648\u064a\u0629.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"hp-why-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/div>\r\n      <\/div>\r\n\r\n      <!-- Row 03 -->\r\n      <div class=\"hp-why-row\">\r\n        <div class=\"hp-why-num\">03<\/div>\r\n        <div class=\"hp-why-body\">\r\n          <div class=\"hp-why-icon-box\"><i class=\"fa-solid fa-globe\"><\/i><\/div>\r\n          <div class=\"hp-why-text\">\r\n            <h3>\u0634\u0628\u0643\u0629 \u0639\u0627\u0644\u0645\u064a\u0629<\/h3>\r\n            <p>\u0634\u0631\u0643\u0627\u0621 \u0645\u0648\u062b\u0648\u0642\u0648\u0646 \u0641\u064a \u0623\u0643\u062b\u0631 \u0645\u0646 25 \u062f\u0648\u0644\u0629 \u0639\u0628\u0631 \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637 \u0648\u0623\u0641\u0631\u064a\u0642\u064a\u0627 \u0648\u0623\u0648\u0631\u0648\u0628\u0627 \u0648\u0622\u0633\u064a\u0627.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"hp-why-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/div>\r\n      <\/div>\r\n\r\n      <!-- Row 04 -->\r\n      <div class=\"hp-why-row\">\r\n        <div class=\"hp-why-num\">04<\/div>\r\n        <div class=\"hp-why-body\">\r\n          <div class=\"hp-why-icon-box\"><i class=\"fa-solid fa-snowflake\"><\/i><\/div>\r\n          <div class=\"hp-why-text\">\r\n            <h3>\u0633\u0644\u0633\u0644\u0629 \u062a\u0628\u0631\u064a\u062f<\/h3>\r\n            <p>\u0644\u0648\u062c\u0633\u062a\u064a\u0643 \u0628\u062f\u0631\u062c\u0627\u062a \u062d\u0631\u0627\u0631\u0629 \u0645\u064f\u062a\u062d\u0643\u064e\u0651\u0645 \u0628\u0647\u0627 \u0645\u0646 \u0627\u0644\u0645\u0635\u062f\u0631 \u0625\u0644\u0649 \u0627\u0644\u0648\u062c\u0647\u0629\u060c \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u0637\u0632\u0627\u062c\u0629.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"hp-why-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/div>\r\n      <\/div>\r\n\r\n      <!-- Row 05 -->\r\n      <div class=\"hp-why-row\">\r\n        <div class=\"hp-why-num\">05<\/div>\r\n        <div class=\"hp-why-body\">\r\n          <div class=\"hp-why-icon-box\"><i class=\"fa-solid fa-file-contract\"><\/i><\/div>\r\n          <div class=\"hp-why-text\">\r\n            <h3>\u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0643\u0627\u0645\u0644\u0629<\/h3>\r\n            <p>\u0646\u062a\u0648\u0644\u0649 \u0627\u0644\u062c\u0645\u0627\u0631\u0643 \u0648\u0627\u0644\u062a\u0635\u0627\u0631\u064a\u062d \u0648\u0634\u0647\u0627\u062f\u0627\u062a \u0627\u0644\u0645\u0646\u0634\u0623 \u0648\u0643\u0644 \u0627\u0644\u0623\u0648\u0631\u0627\u0642 \u2014 \u0645\u0646 \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u0644\u0644\u0646\u0647\u0627\u064a\u0629.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"hp-why-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/div>\r\n      <\/div>\r\n\r\n      <!-- Row 06 -->\r\n      <div class=\"hp-why-row\">\r\n        <div class=\"hp-why-num\">06<\/div>\r\n        <div class=\"hp-why-body\">\r\n          <div class=\"hp-why-icon-box\"><i class=\"fa-solid fa-headset\"><\/i><\/div>\r\n          <div class=\"hp-why-text\">\r\n            <h3>\u062f\u0639\u0645 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629<\/h3>\r\n            <p>\u0641\u0631\u064a\u0642 \u0645\u062e\u0635\u0635 \u062c\u0627\u0647\u0632 \u0644\u0644\u0625\u062c\u0627\u0628\u0629 \u0639\u0644\u0649 \u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0627\u062a\u0643 \u0641\u064a \u0623\u064a \u0648\u0642\u062a\u060c \u0623\u064a \u064a\u0648\u0645.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"hp-why-arrow\"><i class=\"fa-solid fa-arrow-left\"><\/i><\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Bottom CTA -->\r\n    <div class=\"hp-why-footer\">\r\n      <div class=\"hp-why-footer-text\">\r\n        <span class=\"hp-why-footer-lbl\">\u062c\u0627\u0647\u0632 \u0644\u0644\u0628\u062f\u0621\u061f<\/span>\r\n        <h3>\u0644\u0646\u062a\u0639\u0627\u0645\u0644 \u0645\u0639\u064b\u0627.<\/h3>\r\n      <\/div>\r\n      <a href=\"https:\/\/wa.me\/201000049051?text=\u0645\u0631\u062d\u0628\u064b\u0627%20HP%20Group\u060c%20\u0623\u0648\u062f%20\u0628\u062f\u0621%20\u0634\u0631\u0627\u0643\u0629%20\u0645\u0639\u0643\u0645.\"\r\n         target=\"_blank\" rel=\"noopener\" class=\"hp-why-cta\">\r\n        <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n        <span>\u0627\u0628\u062f\u0623 \u0639\u0644\u0649 \u0648\u0627\u062a\u0633\u0627\u0628<\/span>\r\n        <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== Base \u2014 Full Width + \u062e\u0644\u0641\u064a\u0629 \u0628\u0627\u0644\u0623\u0644\u0648\u0627\u0646 ===== *\/\r\n.hp-why{\r\n  position:relative;\r\n  width:100%;\r\n  padding:20px 20px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  color:#fff;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  box-sizing:border-box;\r\n  border-radius: 20px;\r\n  direction:rtl;\r\n\r\n  \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0628\u0627\u0644\u0623\u062e\u0636\u0631 \u0648\u0627\u0644\u0631\u0645\u0627\u062f\u064a *\/\r\n  background:\r\n    radial-gradient(circle at 15% 15%, rgba(60,153,59,.4) 0%, transparent 45%),\r\n    radial-gradient(circle at 90% 85%, rgba(136,136,136,.28) 0%, transparent 50%),\r\n    linear-gradient(135deg, #1a1f1c 0%, #0d100e 50%, #1c2218 100%);\r\n}\r\n.hp-why *,\r\n.hp-why *::before,\r\n.hp-why *::after{ box-sizing:border-box; }\r\n\r\n\/* \u2705 \u0641\u0631\u0636 El Messiri \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0633\u064a\u0643\u0634\u0646 *\/\r\n.hp-why,\r\n.hp-why *{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* Background big word *\/\r\n.hp-why-bg-word{\r\n  position:absolute;\r\n  top:30px;\r\n  left:-60px;\r\n  font-size:300px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.15);\r\n  letter-spacing:-6px;\r\n  pointer-events:none;\r\n  line-height:1;\r\n  z-index:0;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* Glow decorations *\/\r\n.hp-why-glow{\r\n  position:absolute;\r\n  border-radius:50%;\r\n  filter:blur(140px);\r\n  pointer-events:none;\r\n  z-index:0;\r\n}\r\n.hp-why-glow-1{\r\n  width:700px; height:700px;\r\n  background:radial-gradient(circle, rgba(60,153,59,.45), transparent 70%);\r\n  top:-250px; right:-250px;\r\n  animation:hpWhyFloat1 20s ease-in-out infinite;\r\n}\r\n.hp-why-glow-2{\r\n  width:600px; height:600px;\r\n  background:radial-gradient(circle, rgba(136,136,136,.3), transparent 70%);\r\n  bottom:-200px; left:-200px;\r\n  animation:hpWhyFloat2 24s ease-in-out infinite;\r\n}\r\n@keyframes hpWhyFloat1{\r\n  0%,100%{ transform:translate(0,0); }\r\n  50%{ transform:translate(-80px,60px); }\r\n}\r\n@keyframes hpWhyFloat2{\r\n  0%,100%{ transform:translate(0,0); }\r\n  50%{ transform:translate(70px,-50px); }\r\n}\r\n\r\n\/* Container *\/\r\n.hp-why-container{\r\n  position:relative;\r\n  z-index:2;\r\n  width:100%;\r\n  padding:0 40px;\r\n}\r\n\r\n\/* ===== Header ===== *\/\r\n.hp-why-header{\r\n  max-width:820px;\r\n  margin:0 0 70px;\r\n}\r\n.hp-why-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:24px;\r\n}\r\n.hp-why-dot{\r\n  width:8px; height:8px;\r\n  background:#3C993B;\r\n  border-radius:50%;\r\n  position:relative;\r\n}\r\n.hp-why-dot::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-4px;\r\n  border:1px solid rgba(60,153,59,.5);\r\n  border-radius:50%;\r\n  animation:hpWhyPulse 2s ease-out infinite;\r\n}\r\n@keyframes hpWhyPulse{\r\n  0%{ transform:scale(1); opacity:1; }\r\n  100%{ transform:scale(2.4); opacity:0; }\r\n}\r\n.hp-why-label span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n.hp-why-title{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(36px, 4.5vw, 64px);\r\n  line-height:1.2;\r\n  font-weight:700;\r\n  letter-spacing:-.8px;\r\n  margin:0 0 20px;\r\n  color:#fff;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 em \u2014 El Messiri \u0628\u062f\u0644 Playfair Display *\/\r\n.hp-why-title em{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-weight:700;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-why-sub{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  max-width:560px;\r\n  margin:0;\r\n  font-weight:400;\r\n}\r\n\r\n\/* ===== List ===== *\/\r\n.hp-why-list{\r\n  position:relative;\r\n  z-index:2;\r\n  border-top:1px solid rgba(255,255,255,.08);\r\n}\r\n\r\n.hp-why-row{\r\n  display:grid;\r\n  grid-template-columns:200px 1fr 80px;\r\n  align-items:center;\r\n  gap:40px;\r\n  padding:36px 8px;\r\n  border-bottom:1px solid rgba(255,255,255,.08);\r\n  position:relative;\r\n  cursor:pointer;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  overflow:hidden;\r\n}\r\n\r\n\/* Green slide-in bar *\/\r\n.hp-why-row::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  right:0;\r\n  top:0;\r\n  height:100%;\r\n  width:4px;\r\n  background:linear-gradient(180deg, #3C993B, #2e7a2d);\r\n  transform:scaleY(0);\r\n  transform-origin:top;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\/* Soft hover background *\/\r\n.hp-why-row::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  background:linear-gradient(270deg, rgba(60,153,59,.12) 0%, rgba(60,153,59,0) 70%);\r\n  opacity:0;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  pointer-events:none;\r\n  z-index:0;\r\n}\r\n\r\n.hp-why-row:hover::before,\r\n.hp-why-row.active::before{\r\n  transform:scaleY(1);\r\n}\r\n.hp-why-row:hover::after,\r\n.hp-why-row.active::after{\r\n  opacity:1;\r\n}\r\n\r\n\/* ===== Number ===== *\/\r\n.hp-why-num{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:96px;\r\n  font-weight:700;\r\n  line-height:1;\r\n  letter-spacing:-3px;\r\n  color:transparent;\r\n  -webkit-text-stroke:1.5px rgba(136,136,136,.4);\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  font-variant-numeric:tabular-nums;\r\n  position:relative;\r\n  z-index:1;\r\n}\r\n\r\n.hp-why-row:hover .hp-why-num,\r\n.hp-why-row.active .hp-why-num{\r\n  color:#3C993B;\r\n  -webkit-text-stroke:1.5px #3C993B;\r\n  transform:translateX(-12px);\r\n}\r\n\r\n\/* ===== Body (Icon + Text) ===== *\/\r\n.hp-why-body{\r\n  display:grid;\r\n  grid-template-columns:64px 1fr;\r\n  gap:26px;\r\n  align-items:center;\r\n  position:relative;\r\n  z-index:1;\r\n}\r\n\r\n.hp-why-icon-box{\r\n  width:64px;\r\n  height:64px;\r\n  border-radius:16px;\r\n  background:rgba(255,255,255,.05);\r\n  border:1.5px solid rgba(60,153,59,.3);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#fff;\r\n  font-size:22px;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  flex-shrink:0;\r\n}\r\n\r\n.hp-why-row:hover .hp-why-icon-box,\r\n.hp-why-row.active .hp-why-icon-box{\r\n  background:linear-gradient(135deg, #3C993B, #2e7a2d);\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:rotate(8deg) scale(1.05);\r\n  box-shadow:0 12px 28px -8px rgba(60,153,59,.65);\r\n}\r\n\r\n.hp-why-text h3{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(20px, 1.8vw, 26px);\r\n  font-weight:700;\r\n  color:#fff;\r\n  letter-spacing:-.2px;\r\n  margin:0 0 6px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  line-height:1.3;\r\n}\r\n.hp-why-text p{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:15px;\r\n  line-height:1.85;\r\n  color:#888888;\r\n  margin:0;\r\n  font-weight:400;\r\n  max-width:640px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.hp-why-row:hover .hp-why-text h3,\r\n.hp-why-row.active .hp-why-text h3{\r\n  color:#3C993B;\r\n  transform:translateX(-6px);\r\n}\r\n.hp-why-row:hover .hp-why-text p,\r\n.hp-why-row.active .hp-why-text p{\r\n  color:#c9d6cf;\r\n}\r\n\r\n\/* ===== Arrow ===== *\/\r\n.hp-why-arrow{\r\n  width:56px;\r\n  height:56px;\r\n  border-radius:50%;\r\n  border:1.5px solid rgba(136,136,136,.35);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#fff;\r\n  font-size:16px;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  background:rgba(255,255,255,.03);\r\n  position:relative;\r\n  z-index:1;\r\n  flex-shrink:0;\r\n}\r\n\r\n.hp-why-row:hover .hp-why-arrow,\r\n.hp-why-row.active .hp-why-arrow{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:rotate(45deg);\r\n  box-shadow:0 12px 28px -10px rgba(60,153,59,.7);\r\n}\r\n\r\n\/* ===== Footer CTA ===== *\/\r\n.hp-why-footer{\r\n  margin-top:70px;\r\n  padding:44px 48px;\r\n  background:linear-gradient(135deg, rgba(60,153,59,.2) 0%, rgba(136,136,136,.1) 100%);\r\n  border:1px solid rgba(60,153,59,.3);\r\n  border-radius:24px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  position:relative;\r\n  z-index:2;\r\n  overflow:hidden;\r\n  backdrop-filter:blur(20px);\r\n}\r\n.hp-why-footer::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  top:-100px;\r\n  left:-100px;\r\n  width:340px;\r\n  height:340px;\r\n  background:radial-gradient(circle, rgba(60,153,59,.5), transparent 70%);\r\n  filter:blur(50px);\r\n  pointer-events:none;\r\n}\r\n.hp-why-footer::after{\r\n  content:\"\u2190\";\r\n  position:absolute;\r\n  bottom:-60px;\r\n  left:40px;\r\n  font-size:200px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.2);\r\n  line-height:1;\r\n  pointer-events:none;\r\n  user-select:none;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n.hp-why-footer-text{\r\n  position:relative;\r\n  z-index:1;\r\n}\r\n.hp-why-footer-lbl{\r\n  display:block;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n  margin-bottom:10px;\r\n}\r\n.hp-why-footer-text h3{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(24px, 2.4vw, 36px);\r\n  font-weight:700;\r\n  color:#fff;\r\n  letter-spacing:-.3px;\r\n  margin:0;\r\n  line-height:1.3;\r\n}\r\n.hp-why-cta{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  padding:18px 32px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-size:14px;\r\n  font-weight:600;\r\n  letter-spacing:.3px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  box-shadow:0 20px 40px -12px rgba(37,211,102,.55);\r\n  position:relative;\r\n  z-index:1;\r\n  white-space:nowrap;\r\n}\r\n.hp-why-cta i:first-child{\r\n  font-size:20px;\r\n}\r\n.hp-why-cta i:last-child{\r\n  transition:transform .4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-why-cta:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 26px 50px -14px rgba(37,211,102,.75);\r\n}\r\n.hp-why-cta:hover i:last-child{\r\n  transform:translateX(-6px);\r\n}\r\n\r\n\/* ===== Reveal ===== *\/\r\n.hp-why-row{\r\n  opacity:0;\r\n  transform:translateY(30px);\r\n}\r\n.hp-why-row.revealed{\r\n  opacity:1;\r\n  transform:translateY(0);\r\n}\r\n\r\n\/* ===== Responsive ===== *\/\r\n@media(max-width:1024px){\r\n  .hp-why{ padding:80px 0 70px; }\r\n  .hp-why-bg-word{ font-size:180px; letter-spacing:-4px; }\r\n  .hp-why-container{ padding:0 24px; }\r\n  .hp-why-row{\r\n    grid-template-columns:120px 1fr 60px;\r\n    gap:20px;\r\n    padding:28px 6px;\r\n  }\r\n  .hp-why-num{\r\n    font-size:64px;\r\n    letter-spacing:-2px;\r\n  }\r\n  .hp-why-icon-box{\r\n    width:56px;\r\n    height:56px;\r\n    font-size:20px;\r\n  }\r\n  .hp-why-arrow{\r\n    width:48px;\r\n    height:48px;\r\n    font-size:14px;\r\n  }\r\n}\r\n\r\n@media(max-width:640px){\r\n  .hp-why{ padding:60px 0 50px; }\r\n  .hp-why-bg-word{ font-size:100px; letter-spacing:-2px; }\r\n  .hp-why-container{ padding:0 16px; }\r\n  .hp-why-header{ margin-bottom:50px; }\r\n  .hp-why-title{ letter-spacing:-.5px; }\r\n\r\n  .hp-why-row{\r\n    grid-template-columns:1fr auto;\r\n    gap:16px;\r\n    padding:24px 4px;\r\n  }\r\n  .hp-why-num{\r\n    grid-column:1 \/ -1;\r\n    font-size:52px;\r\n    letter-spacing:-2px;\r\n    margin-bottom:6px;\r\n  }\r\n  .hp-why-body{\r\n    grid-template-columns:52px 1fr;\r\n    gap:16px;\r\n  }\r\n  .hp-why-icon-box{\r\n    width:52px;\r\n    height:52px;\r\n    font-size:18px;\r\n    border-radius:14px;\r\n  }\r\n  .hp-why-text h3{\r\n    font-size:17px;\r\n  }\r\n  .hp-why-text p{\r\n    font-size:13.5px;\r\n    line-height:1.7;\r\n  }\r\n  .hp-why-arrow{\r\n    width:42px;\r\n    height:42px;\r\n    font-size:12px;\r\n    align-self:end;\r\n  }\r\n  .hp-why-footer{\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n    padding:32px 26px;\r\n    gap:22px;\r\n    margin-top:50px;\r\n  }\r\n  .hp-why-footer::after{\r\n    font-size:120px;\r\n    bottom:-30px;\r\n  }\r\n  .hp-why-cta{\r\n    width:100%;\r\n    justify-content:center;\r\n    padding:16px 24px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const rows = document.querySelectorAll('.hp-why-row');\r\n\r\n  \/\/ Reveal on scroll\r\n  const io = new IntersectionObserver((entries) => {\r\n    entries.forEach((entry, i) => {\r\n      if(entry.isIntersecting){\r\n        setTimeout(() => entry.target.classList.add('revealed'), i * 90);\r\n        io.unobserve(entry.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.15 });\r\n  rows.forEach(r => io.observe(r));\r\n\r\n  \/\/ Click to activate\r\n  rows.forEach(row => {\r\n    row.addEventListener('click', () => {\r\n      rows.forEach(r => r.classList.remove('active'));\r\n      row.classList.add('active');\r\n    });\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-073f7a3 e-con-full e-flex e-con e-child\" data-id=\"073f7a3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ed81451 elementor-widget elementor-widget-html\" data-id=\"ed81451\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<section class=\"hp-faq\" id=\"faq\" dir=\"rtl\">\r\n\r\n  <!-- Background decorations -->\r\n  <div class=\"hp-faq-bg-word\">\u0623\u0633\u0626\u0644\u0629<\/div>\r\n  <div class=\"hp-faq-blob hp-faq-blob-1\"><\/div>\r\n  <div class=\"hp-faq-blob hp-faq-blob-2\"><\/div>\r\n\r\n  <div class=\"hp-faq-container\">\r\n\r\n    <div class=\"hp-faq-header\">\r\n      <div class=\"hp-faq-label\">\r\n        <span class=\"hp-faq-dot\"><\/span>\r\n        <span>\u0623\u0633\u0626\u0644\u0629 \u0634\u0627\u0626\u0639\u0629<\/span>\r\n      <\/div>\r\n      <h2 class=\"hp-faq-title\">\r\n        \u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c<br>\r\n        <em>\u0645\u0639\u0631\u0641\u062a\u0647.<\/em>\r\n      <\/h2>\r\n      <p class=\"hp-faq-sub\">\r\n        \u0625\u062c\u0627\u0628\u0627\u062a \u0639\u0644\u0649 \u0623\u0643\u062b\u0631 \u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0634\u064a\u0648\u0639\u064b\u0627 \u062d\u0648\u0644 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0648\u0627\u0644\u062a\u0635\u062f\u064a\u0631 \u0644\u062f\u064a\u0646\u0627.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"hp-faq-list\">\r\n\r\n      <div class=\"hp-faq-item active\">\r\n        <button class=\"hp-faq-trigger\" type=\"button\">\r\n          <span class=\"hp-faq-num\">01<\/span>\r\n          <span class=\"hp-faq-q\">\u0645\u0627 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u0635\u062f\u0631\u0648\u0646\u0647\u0627\u061f<\/span>\r\n          <span class=\"hp-faq-icon\"><i class=\"fa-solid fa-plus\"><\/i><\/span>\r\n        <\/button>\r\n        <div class=\"hp-faq-panel\">\r\n          <div class=\"hp-faq-answer\">\r\n            <p>\r\n              \u0646\u0635\u062f\u0651\u0631 \u0645\u062c\u0645\u0648\u0639\u0629 \u0648\u0627\u0633\u0639\u0629 \u0645\u0646 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0645\u0635\u0631\u064a\u0629 \u062a\u0634\u0645\u0644 \u0627\u0644\u062e\u0636\u0627\u0631 \u0648\u0627\u0644\u0641\u0648\u0627\u0643\u0647 \u0627\u0644\u0637\u0627\u0632\u062c\u0629 \u0648\u0627\u0644\u0645\u062c\u0645\u062f\u0629\u060c\r\n              \u0648\u0627\u0644\u0641\u0631\u0627\u0648\u0644\u0629\u060c \u0648\u0627\u0644\u062e\u0636\u0627\u0631 \u0627\u0644\u0645\u0634\u0643\u0644\u060c \u0648\u0627\u0644\u0628\u0637\u0627\u0637\u0633 \u0646\u0635\u0641 \u0627\u0644\u0645\u062c\u0645\u062f\u0629\u060c \u0648\u0627\u0644\u0645\u0634\u0631\u0648\u0628\u0627\u062a\u060c \u0648\u0627\u0644\u0639\u0635\u0627\u0626\u0631\u060c\r\n              \u0648\u0645\u0634\u0631\u0648\u0628 \u0627\u0644\u0632\u0628\u064a\u0628 \u0627\u0644\u063a\u0627\u0632\u064a\u060c \u0648\u0627\u0644\u062d\u0644\u0648\u064a\u0627\u062a \u2014 \u0643\u0644\u0647\u0627 \u0645\u0639\u0628\u0623\u0629 \u0648\u0641\u0642 \u0627\u0644\u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u062f\u0648\u0644\u064a\u0629.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hp-faq-item\">\r\n        <button class=\"hp-faq-trigger\" type=\"button\">\r\n          <span class=\"hp-faq-num\">02<\/span>\r\n          <span class=\"hp-faq-q\">\u0645\u0627 \u0627\u0644\u0630\u064a \u062a\u0633\u062a\u0648\u0631\u062f\u0648\u0646\u0647 \u0625\u0644\u0649 \u0645\u0635\u0631\u061f<\/span>\r\n          <span class=\"hp-faq-icon\"><i class=\"fa-solid fa-plus\"><\/i><\/span>\r\n        <\/button>\r\n        <div class=\"hp-faq-panel\">\r\n          <div class=\"hp-faq-answer\">\r\n            <p>\r\n              \u0646\u0633\u062a\u0648\u0631\u062f \u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629\u060c \u0648\u0625\u0636\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0639\u0644\u0627\u0641\u060c \u0648\u0627\u0644\u0644\u0642\u0627\u062d\u0627\u062a \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629\u060c\r\n              \u0648\u0627\u0644\u0623\u0633\u0645\u062f\u0629 \u0627\u0644\u0632\u0631\u0627\u0639\u064a\u0629\u060c \u0648\u0627\u0644\u0628\u0630\u0648\u0631\u060c \u0648\u0627\u0644\u0645\u0628\u064a\u062f\u0627\u062a\u060c \u0648\u0627\u0644\u0634\u062a\u0644\u0627\u062a \u0645\u0646 \u0645\u0648\u0631\u062f\u064a\u0646 \u0639\u0627\u0644\u0645\u064a\u064a\u0646\r\n              \u0645\u0639\u062a\u0645\u062f\u064a\u0646 \u2014 \u0645\u0639 \u0636\u0645\u0627\u0646 \u0627\u0644\u062c\u0648\u062f\u0629 \u0648\u0627\u0644\u0627\u0645\u062a\u062b\u0627\u0644 \u0644\u0644\u0648\u0627\u0626\u062d \u0627\u0644\u0645\u0635\u0631\u064a\u0629.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hp-faq-item\">\r\n        <button class=\"hp-faq-trigger\" type=\"button\">\r\n          <span class=\"hp-faq-num\">03<\/span>\r\n          <span class=\"hp-faq-q\">\u0625\u0644\u0649 \u0623\u064a \u062f\u0648\u0644 \u062a\u0634\u062d\u0646\u0648\u0646\u061f<\/span>\r\n          <span class=\"hp-faq-icon\"><i class=\"fa-solid fa-plus\"><\/i><\/span>\r\n        <\/button>\r\n        <div class=\"hp-faq-panel\">\r\n          <div class=\"hp-faq-answer\">\r\n            <p>\r\n              \u0646\u062e\u062f\u0645 \u0639\u0645\u0644\u0627\u0621\u0646\u0627 \u0641\u064a \u0623\u0643\u062b\u0631 \u0645\u0646 25 \u062f\u0648\u0644\u0629 \u0639\u0628\u0631 \u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637\u060c \u0648\u0623\u0641\u0631\u064a\u0642\u064a\u0627\u060c\r\n              \u0648\u0623\u0648\u0631\u0648\u0628\u0627\u060c \u0648\u0622\u0633\u064a\u0627. \u0634\u0628\u0643\u062a\u0646\u0627 \u0627\u0644\u0644\u0648\u062c\u0633\u062a\u064a\u0629 \u062a\u0636\u0645\u0646 \u062a\u0633\u0644\u064a\u0645\u064b\u0627 \u0645\u0648\u062b\u0648\u0642\u064b\u0627 \u0623\u064a\u0646\u0645\u0627 \u0643\u0627\u0646 \u0646\u0634\u0627\u0637\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hp-faq-item\">\r\n        <button class=\"hp-faq-trigger\" type=\"button\">\r\n          <span class=\"hp-faq-num\">04<\/span>\r\n          <span class=\"hp-faq-q\">\u0643\u064a\u0641 \u062a\u0636\u0645\u0646\u0648\u0646 \u062c\u0648\u062f\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a\u061f<\/span>\r\n          <span class=\"hp-faq-icon\"><i class=\"fa-solid fa-plus\"><\/i><\/span>\r\n        <\/button>\r\n        <div class=\"hp-faq-panel\">\r\n          <div class=\"hp-faq-answer\">\r\n            <p>\r\n              \u0643\u0644 \u0634\u062d\u0646\u0629 \u062a\u062c\u062a\u0627\u0632 \u0641\u062d\u0635 \u062c\u0648\u062f\u0629 \u0635\u0627\u0631\u0645 \u0642\u0628\u0644 \u0627\u0644\u0634\u062d\u0646\u060c \u0648\u0641\u0642 \u0627\u0644\u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u062f\u0648\u0644\u064a\u0629.\r\n              \u0643\u0645\u0627 \u0646\u0648\u0641\u0631 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u062a\u062a\u0628\u0639 \u0643\u0627\u0645\u0644\u0629 \u0644\u0643\u0644 \u062f\u0641\u0639\u0629 \u0644\u0636\u0645\u0627\u0646 \u0627\u0644\u0634\u0641\u0627\u0641\u064a\u0629.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hp-faq-item\">\r\n        <button class=\"hp-faq-trigger\" type=\"button\">\r\n          <span class=\"hp-faq-num\">05<\/span>\r\n          <span class=\"hp-faq-q\">\u0647\u0644 \u062a\u062a\u0648\u0644\u0648\u0646 \u0627\u0644\u062c\u0645\u0627\u0631\u0643 \u0648\u0627\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a\u061f<\/span>\r\n          <span class=\"hp-faq-icon\"><i class=\"fa-solid fa-plus\"><\/i><\/span>\r\n        <\/button>\r\n        <div class=\"hp-faq-panel\">\r\n          <div class=\"hp-faq-answer\">\r\n            <p>\r\n              \u0646\u0639\u0645 \u2014 \u0646\u062a\u0648\u0644\u0649 \u062c\u0645\u064a\u0639 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0627\u0644\u062a\u0635\u062f\u064a\u0631 \u0648\u0627\u0644\u0627\u0633\u062a\u064a\u0631\u0627\u062f\u060c \u0648\u0627\u0644\u062a\u062e\u0644\u064a\u0635 \u0627\u0644\u062c\u0645\u0631\u0643\u064a\u060c\r\n              \u0648\u0634\u0647\u0627\u062f\u0627\u062a \u0627\u0644\u0645\u0646\u0634\u0623\u060c \u0648\u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a \u0627\u0644\u0635\u062d\u064a\u0629 \u0627\u0644\u0646\u0628\u0627\u062a\u064a\u0629\u060c \u0648\u0623\u064a \u062a\u0635\u0627\u0631\u064a\u062d \u0645\u0637\u0644\u0648\u0628\u0629.\r\n              \u0631\u0643\u0651\u0632 \u0639\u0644\u0649 \u0639\u0645\u0644\u0643\u060c \u0648\u0646\u062d\u0646 \u0646\u062a\u0648\u0644\u0649 \u0627\u0644\u0628\u0627\u0642\u064a.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hp-faq-item\">\r\n        <button class=\"hp-faq-trigger\" type=\"button\">\r\n          <span class=\"hp-faq-num\">06<\/span>\r\n          <span class=\"hp-faq-q\">\u0643\u064a\u0641 \u064a\u0645\u0643\u0646\u0646\u064a \u0637\u0644\u0628 \u0639\u0631\u0636 \u0633\u0639\u0631\u061f<\/span>\r\n          <span class=\"hp-faq-icon\"><i class=\"fa-solid fa-plus\"><\/i><\/span>\r\n        <\/button>\r\n        <div class=\"hp-faq-panel\">\r\n          <div class=\"hp-faq-answer\">\r\n            <p>\r\n              \u0645\u0627 \u0639\u0644\u064a\u0643 \u0633\u0648\u0649 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0639\u0628\u0631 \u0648\u0627\u062a\u0633\u0627\u0628 \u0623\u0648 \u0646\u0645\u0648\u0630\u062c \u0627\u0644\u0627\u062a\u0635\u0627\u0644\u060c \u0645\u0639 \u0630\u0643\u0631 \u0627\u0644\u0645\u0646\u062a\u062c\r\n              \u0648\u0627\u0644\u0643\u0645\u064a\u0629 \u0648\u0627\u0644\u0648\u062c\u0647\u0629 \u2014 \u0648\u0633\u064a\u0631\u062f \u0641\u0631\u064a\u0642\u0646\u0627 \u062e\u0644\u0627\u0644 24 \u0633\u0627\u0639\u0629 \u0628\u0639\u0631\u0636 \u0633\u0639\u0631 \u0645\u0641\u0635\u0644 \u064a\u0646\u0627\u0633\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Bottom CTA -->\r\n    <div class=\"hp-faq-footer\">\r\n      <div class=\"hp-faq-footer-text\">\r\n        <span class=\"hp-faq-footer-lbl\">\u0644\u0627 \u062a\u0632\u0627\u0644 \u0644\u062f\u064a\u0643 \u0623\u0633\u0626\u0644\u0629\u061f<\/span>\r\n        <h3>\u0646\u062d\u0646 \u0647\u0646\u0627 \u0644\u0644\u0645\u0633\u0627\u0639\u062f\u0629.<\/h3>\r\n      <\/div>\r\n      <a href=\"https:\/\/wa.me\/201000049051?text=\u0645\u0631\u062d\u0628\u064b\u0627%20HP%20Group\u060c%20\u0644\u062f\u064a%20\u0633\u0624\u0627\u0644.\"\r\n         target=\"_blank\" rel=\"noopener\" class=\"hp-faq-cta\">\r\n        <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n        <span>\u0627\u0633\u0623\u0644 \u0639\u0644\u0649 \u0648\u0627\u062a\u0633\u0627\u0628<\/span>\r\n        <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== Base ===== *\/\r\n.hp-faq{\r\n  position:relative;\r\n  width:100%;\r\n  padding:20px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  color:#0b2c1d;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  box-sizing:border-box;\r\n  border-radius: 20px;\r\n  direction:rtl;\r\n\r\n  \/* \u062e\u0644\u0641\u064a\u0629 \u0641\u0627\u062a\u062d\u0629 \u0628\u062a\u062f\u0631\u062c \u062e\u0641\u064a\u0641 *\/\r\n  background:\r\n    radial-gradient(circle at 20% 10%, rgba(60,153,59,.08) 0%, transparent 45%),\r\n    radial-gradient(circle at 85% 90%, rgba(136,136,136,.08) 0%, transparent 50%),\r\n    linear-gradient(180deg, #fafaf7 0%, #f2f5f2 100%);\r\n}\r\n.hp-faq *,\r\n.hp-faq *::before,\r\n.hp-faq *::after{ box-sizing:border-box; }\r\n\r\n\/* \u2705 \u0641\u0631\u0636 El Messiri \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0633\u064a\u0643\u0634\u0646 *\/\r\n.hp-faq,\r\n.hp-faq *{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* Background big word *\/\r\n.hp-faq-bg-word{\r\n  position:absolute;\r\n  top:40px;\r\n  left:-40px;\r\n  font-size:300px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.08);\r\n  letter-spacing:-6px;\r\n  pointer-events:none;\r\n  line-height:1;\r\n  z-index:0;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n\/* Soft blobs *\/\r\n.hp-faq-blob{\r\n  position:absolute;\r\n  border-radius:50%;\r\n  filter:blur(120px);\r\n  pointer-events:none;\r\n  z-index:0;\r\n}\r\n.hp-faq-blob-1{\r\n  width:500px; height:500px;\r\n  background:radial-gradient(circle, rgba(60,153,59,.15), transparent 70%);\r\n  top:-150px; right:-150px;\r\n  animation:hpFaqFloat1 22s ease-in-out infinite;\r\n}\r\n.hp-faq-blob-2{\r\n  width:450px; height:450px;\r\n  background:radial-gradient(circle, rgba(136,136,136,.12), transparent 70%);\r\n  bottom:-150px; left:-150px;\r\n  animation:hpFaqFloat2 26s ease-in-out infinite;\r\n}\r\n@keyframes hpFaqFloat1{\r\n  0%,100%{ transform:translate(0,0); }\r\n  50%{ transform:translate(-60px,40px); }\r\n}\r\n@keyframes hpFaqFloat2{\r\n  0%,100%{ transform:translate(0,0); }\r\n  50%{ transform:translate(50px,-40px); }\r\n}\r\n\r\n\/* Container *\/\r\n.hp-faq-container{\r\n  position:relative;\r\n  z-index:2;\r\n  width:100%;\r\n  padding:0 40px;\r\n}\r\n\r\n\/* ===== Header ===== *\/\r\n.hp-faq-header{\r\n  max-width:820px;\r\n  margin:0 auto 70px;\r\n  text-align:center;\r\n}\r\n.hp-faq-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:24px;\r\n}\r\n.hp-faq-dot{\r\n  width:8px; height:8px;\r\n  background:#3C993B;\r\n  border-radius:50%;\r\n  position:relative;\r\n}\r\n.hp-faq-dot::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-4px;\r\n  border:1px solid rgba(60,153,59,.4);\r\n  border-radius:50%;\r\n  animation:hpFaqPulse 2s ease-out infinite;\r\n}\r\n@keyframes hpFaqPulse{\r\n  0%{ transform:scale(1); opacity:1; }\r\n  100%{ transform:scale(2.4); opacity:0; }\r\n}\r\n.hp-faq-label span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n.hp-faq-title{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(36px, 4.5vw, 64px);\r\n  line-height:1.2;\r\n  font-weight:700;\r\n  letter-spacing:-.8px;\r\n  margin:0 0 20px;\r\n  color:#0b2c1d;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 em \u2014 El Messiri \u0628\u062f\u0644 Playfair Display *\/\r\n.hp-faq-title em{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-weight:700;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-faq-sub{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  max-width:560px;\r\n  margin:0 auto;\r\n  font-weight:400;\r\n}\r\n\r\n\/* ===== List ===== *\/\r\n.hp-faq-list{\r\n  max-width:1000px;\r\n  margin:0 auto;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.hp-faq-item{\r\n  background:#fff;\r\n  border:1px solid rgba(11,44,29,.08);\r\n  border-radius:18px;\r\n  margin-bottom:14px;\r\n  overflow:hidden;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  position:relative;\r\n}\r\n\r\n.hp-faq-item::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  right:0;\r\n  top:0;\r\n  height:100%;\r\n  width:4px;\r\n  background:linear-gradient(180deg, #3C993B, #2e7a2d);\r\n  transform:scaleY(0);\r\n  transform-origin:top;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  border-radius:0 18px 18px 0;\r\n}\r\n\r\n.hp-faq-item:hover{\r\n  border-color:rgba(60,153,59,.35);\r\n  box-shadow:0 20px 45px -25px rgba(11,44,29,.15);\r\n  transform:translateY(-2px);\r\n}\r\n\r\n.hp-faq-item.active{\r\n  border-color:rgba(60,153,59,.5);\r\n  box-shadow:0 30px 60px -30px rgba(60,153,59,.3);\r\n}\r\n.hp-faq-item.active::before{\r\n  transform:scaleY(1);\r\n}\r\n\r\n\/* Trigger *\/\r\n.hp-faq-trigger{\r\n  width:100%;\r\n  display:grid;\r\n  grid-template-columns:70px 1fr auto;\r\n  align-items:center;\r\n  gap:20px;\r\n  padding:26px 30px;\r\n  background:transparent;\r\n  border:none;\r\n  cursor:pointer;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  text-align:right;\r\n  color:#0b2c1d;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.hp-faq-num{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:14px;\r\n  font-weight:600;\r\n  color:#888888;\r\n  letter-spacing:2px;\r\n  font-variant-numeric:tabular-nums;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.hp-faq-q{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(16px, 1.5vw, 19px);\r\n  font-weight:600;\r\n  color:#0b2c1d;\r\n  letter-spacing:-.1px;\r\n  line-height:1.5;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.hp-faq-icon{\r\n  width:44px;\r\n  height:44px;\r\n  border-radius:50%;\r\n  border:1.5px solid rgba(11,44,29,.12);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#0b2c1d;\r\n  font-size:13px;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  background:#fafaf7;\r\n  flex-shrink:0;\r\n}\r\n\r\n\/* Hover *\/\r\n.hp-faq-trigger:hover .hp-faq-num{ color:#3C993B; }\r\n.hp-faq-trigger:hover .hp-faq-q{ color:#3C993B; }\r\n.hp-faq-trigger:hover .hp-faq-icon{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n}\r\n\r\n\/* Active *\/\r\n.hp-faq-item.active .hp-faq-num{ color:#3C993B; }\r\n.hp-faq-item.active .hp-faq-q{ color:#3C993B; }\r\n.hp-faq-item.active .hp-faq-icon{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:rotate(45deg);\r\n}\r\n\r\n\/* Panel *\/\r\n.hp-faq-panel{\r\n  max-height:0;\r\n  overflow:hidden;\r\n  transition:max-height .8s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-faq-item.active .hp-faq-panel{\r\n  max-height:400px;\r\n}\r\n\r\n.hp-faq-answer{\r\n  padding:0 120px 30px 30px;\r\n  opacity:0;\r\n  transform:translateY(-8px);\r\n  transition:.5s cubic-bezier(.2,.8,.2,1) .15s;\r\n}\r\n.hp-faq-item.active .hp-faq-answer{\r\n  opacity:1;\r\n  transform:translateY(0);\r\n}\r\n\r\n.hp-faq-answer p{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:15px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  margin:0;\r\n  font-weight:400;\r\n  position:relative;\r\n  padding-right:20px;\r\n}\r\n.hp-faq-answer p::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  right:0;\r\n  top:10px;\r\n  width:3px;\r\n  height:calc(100% - 20px);\r\n  background:linear-gradient(180deg, #3C993B, transparent);\r\n  border-radius:3px;\r\n}\r\n\r\n\/* ===== Footer CTA ===== *\/\r\n.hp-faq-footer{\r\n  max-width:1000px;\r\n  margin:60px auto 0;\r\n  padding:36px 40px;\r\n  background:#fff;\r\n  border:1px solid rgba(60,153,59,.25);\r\n  border-radius:20px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  position:relative;\r\n  z-index:2;\r\n  overflow:hidden;\r\n  box-shadow:0 30px 60px -30px rgba(11,44,29,.15);\r\n}\r\n.hp-faq-footer::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  top:-100px;\r\n  left:-100px;\r\n  width:280px;\r\n  height:280px;\r\n  background:radial-gradient(circle, rgba(60,153,59,.15), transparent 70%);\r\n  filter:blur(40px);\r\n  pointer-events:none;\r\n}\r\n.hp-faq-footer::after{\r\n  content:\"\u061f\";\r\n  position:absolute;\r\n  bottom:-80px;\r\n  left:40px;\r\n  font-size:220px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.1);\r\n  line-height:1;\r\n  pointer-events:none;\r\n  user-select:none;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n.hp-faq-footer-text{\r\n  position:relative;\r\n  z-index:1;\r\n}\r\n.hp-faq-footer-lbl{\r\n  display:block;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n  margin-bottom:10px;\r\n}\r\n.hp-faq-footer-text h3{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(22px, 2.2vw, 32px);\r\n  font-weight:700;\r\n  color:#0b2c1d;\r\n  letter-spacing:-.3px;\r\n  margin:0;\r\n  line-height:1.3;\r\n}\r\n.hp-faq-cta{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:14px;\r\n  padding:18px 32px;\r\n  background:#25D366;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:100px;\r\n  font-size:14px;\r\n  font-weight:600;\r\n  letter-spacing:.3px;\r\n  transition:.4s cubic-bezier(.2,.8,.2,1);\r\n  box-shadow:0 20px 40px -12px rgba(37,211,102,.5);\r\n  position:relative;\r\n  z-index:1;\r\n  white-space:nowrap;\r\n}\r\n.hp-faq-cta i:first-child{ font-size:20px; }\r\n.hp-faq-cta i:last-child{\r\n  transition:transform .4s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-faq-cta:hover{\r\n  background:#1eb455;\r\n  transform:translateY(-3px);\r\n  box-shadow:0 26px 50px -14px rgba(37,211,102,.75);\r\n}\r\n.hp-faq-cta:hover i:last-child{\r\n  transform:translateX(-6px);\r\n}\r\n\r\n\/* ===== Responsive ===== *\/\r\n@media(max-width:1024px){\r\n  .hp-faq{ padding:80px 0 70px; }\r\n  .hp-faq-bg-word{ font-size:200px; letter-spacing:-4px; }\r\n  .hp-faq-container{ padding:0 24px; }\r\n}\r\n\r\n@media(max-width:640px){\r\n  .hp-faq{ padding:60px 0 50px; }\r\n  .hp-faq-bg-word{ font-size:130px; letter-spacing:-3px; }\r\n  .hp-faq-container{ padding:0 16px; }\r\n  .hp-faq-header{ margin-bottom:50px; }\r\n  .hp-faq-title{ letter-spacing:-.5px; }\r\n  .hp-faq-trigger{\r\n    grid-template-columns:44px 1fr auto;\r\n    gap:12px;\r\n    padding:22px 20px;\r\n  }\r\n  .hp-faq-icon{\r\n    width:38px;\r\n    height:38px;\r\n    font-size:12px;\r\n  }\r\n  .hp-faq-answer{\r\n    padding:0 76px 24px 20px;\r\n  }\r\n  .hp-faq-answer p{\r\n    font-size:14px;\r\n  }\r\n  .hp-faq-footer{\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n    padding:30px 24px;\r\n    gap:20px;\r\n  }\r\n  .hp-faq-footer::after{\r\n    font-size:140px;\r\n    bottom:-40px;\r\n  }\r\n  .hp-faq-cta{\r\n    width:100%;\r\n    justify-content:center;\r\n    padding:16px 24px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const items = document.querySelectorAll('.hp-faq-item');\r\n\r\n  items.forEach(item => {\r\n    const trigger = item.querySelector('.hp-faq-trigger');\r\n\r\n    trigger.addEventListener('click', () => {\r\n      const isActive = item.classList.contains('active');\r\n      items.forEach(i => i.classList.remove('active'));\r\n\r\n      if(!isActive){\r\n        item.classList.add('active');\r\n      }\r\n    });\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c4fbd32 e-con-full e-flex e-con e-child\" data-id=\"c4fbd32\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-e740b9d e-con-full e-flex e-con e-child\" data-id=\"e740b9d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-b60dbfd e-con-full e-flex e-con e-child\" data-id=\"b60dbfd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-860a40b elementor-widget elementor-widget-html\" data-id=\"860a40b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=El+Messiri:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<section class=\"hp-contact\" id=\"contact\" dir=\"rtl\">\r\n\r\n  <!-- Background -->\r\n  <div class=\"hp-contact-bg-word\">\u062a\u0648\u0627\u0635\u0644<\/div>\r\n  <div class=\"hp-contact-blob hp-contact-blob-1\"><\/div>\r\n  <div class=\"hp-contact-blob hp-contact-blob-2\"><\/div>\r\n\r\n  <div class=\"hp-contact-container\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"hp-contact-header\">\r\n      <div class=\"hp-contact-label\">\r\n        <span class=\"hp-contact-dot\"><\/span>\r\n        <span>\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/span>\r\n      <\/div>\r\n      <h2 class=\"hp-contact-title\">\r\n        \u0644\u0646\u0628\u0646\u0650 \u0634\u064a\u0626\u064b\u0627<br>\r\n        <em>\u0645\u0639\u064b\u0627.<\/em>\r\n      <\/h2>\r\n      <p class=\"hp-contact-sub\">\r\n        \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0641\u064a \u0623\u064a \u0648\u0642\u062a \u2014 \u0641\u0631\u064a\u0642\u0646\u0627 \u062c\u0627\u0647\u0632 \u0644\u0644\u0625\u062c\u0627\u0628\u0629 \u0639\u0644\u0649 \u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0627\u062a\u0643 \u0648\u0645\u0646\u0627\u0642\u0634\u0629 \u0634\u062d\u0646\u062a\u0643 \u0627\u0644\u0642\u0627\u062f\u0645\u0629.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- Content Grid -->\r\n    <div class=\"hp-contact-grid\">\r\n\r\n      <!-- Right: Info Cards -->\r\n      <div class=\"hp-contact-info\">\r\n\r\n        <!-- Phone -->\r\n        <a href=\"tel:0133273154\" class=\"hp-contact-card\">\r\n          <div class=\"hp-contact-card-icon\">\r\n            <i class=\"fa-solid fa-phone\"><\/i>\r\n          <\/div>\r\n          <div class=\"hp-contact-card-body\">\r\n            <span class=\"hp-contact-card-lbl\">\u0627\u062a\u0635\u0644 \u0628\u0646\u0627<\/span>\r\n            <span class=\"hp-contact-card-value\" dir=\"ltr\">013 327 3154<\/span>\r\n            <span class=\"hp-contact-card-note\">\u0627\u0644\u0623\u062d\u062f \u2013 \u0627\u0644\u062e\u0645\u064a\u0633 \u00b7 9\u0635 \u2013 6\u0645<\/span>\r\n          <\/div>\r\n          <div class=\"hp-contact-card-arrow\">\r\n            <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n          <\/div>\r\n        <\/a>\r\n\r\n        <!-- WhatsApp -->\r\n        <a href=\"https:\/\/wa.me\/201000049051?text=\u0645\u0631\u062d\u0628\u064b\u0627%20HB%20Group\" target=\"_blank\" rel=\"noopener\" class=\"hp-contact-card hp-contact-card-wa\">\r\n          <div class=\"hp-contact-card-icon\">\r\n            <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n          <\/div>\r\n          <div class=\"hp-contact-card-body\">\r\n            <span class=\"hp-contact-card-lbl\">\u0648\u0627\u062a\u0633\u0627\u0628<\/span>\r\n            <span class=\"hp-contact-card-value\">\u062a\u062d\u062f\u062b \u0645\u0639\u0646\u0627 \u0641\u0648\u0631\u064b\u0627<\/span>\r\n            <span class=\"hp-contact-card-note\">\u0631\u062f \u0633\u0631\u064a\u0639 \u00b7 \u0645\u062a\u0627\u062d 24\/7<\/span>\r\n          <\/div>\r\n          <div class=\"hp-contact-card-arrow\">\r\n            <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n          <\/div>\r\n        <\/a>\r\n\r\n        <!-- Email -->\r\n        <a href=\"mailto:info@hbgroup-eg.com\" class=\"hp-contact-card\">\r\n          <div class=\"hp-contact-card-icon\">\r\n            <i class=\"fa-solid fa-envelope\"><\/i>\r\n          <\/div>\r\n          <div class=\"hp-contact-card-body\">\r\n            <span class=\"hp-contact-card-lbl\">\u0631\u0627\u0633\u0644\u0646\u0627<\/span>\r\n            <span class=\"hp-contact-card-value\" dir=\"ltr\">info@hbgroup-eg.com<\/span>\r\n            <span class=\"hp-contact-card-note\">\u0646\u0631\u062f \u062e\u0644\u0627\u0644 24 \u0633\u0627\u0639\u0629<\/span>\r\n          <\/div>\r\n          <div class=\"hp-contact-card-arrow\">\r\n            <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n          <\/div>\r\n        <\/a>\r\n\r\n        <!-- Address -->\r\n        <a href=\"https:\/\/maps.app.goo.gl\/C8THuDD2uRL7QAuVA\" target=\"_blank\" rel=\"noopener\" class=\"hp-contact-card\">\r\n          <div class=\"hp-contact-card-icon\">\r\n            <i class=\"fa-solid fa-location-dot\"><\/i>\r\n          <\/div>\r\n          <div class=\"hp-contact-card-body\">\r\n            <span class=\"hp-contact-card-lbl\">\u0632\u064f\u0631\u0646\u0627<\/span>\r\n            <span class=\"hp-contact-card-value\">18 \u0634\u0627\u0631\u0639 \u0635\u0644\u0627\u062d \u0627\u0644\u062f\u064a\u0646\u060c \u0628\u0646\u0647\u0627<\/span>\r\n            <span class=\"hp-contact-card-note\">\u0645\u062d\u0627\u0641\u0638\u0629 \u0627\u0644\u0642\u0644\u064a\u0648\u0628\u064a\u0629\u060c \u0645\u0635\u0631<\/span>\r\n          <\/div>\r\n          <div class=\"hp-contact-card-arrow\">\r\n            <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n          <\/div>\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n      <!-- Left: Map + Social -->\r\n      <div class=\"hp-contact-side\">\r\n\r\n        <!-- Map -->\r\n        <div class=\"hp-contact-map\">\r\n          <iframe\r\n            src=\"https:\/\/www.google.com\/maps?q=18+Salah+El-Din+Street+Banha+Qalyubia+Egypt&output=embed\"\r\n            loading=\"lazy\"\r\n            allowfullscreen=\"\"\r\n            referrerpolicy=\"no-referrer-when-downgrade\">\r\n          <\/iframe>\r\n          <div class=\"hp-contact-map-badge\">\r\n            <i class=\"fa-solid fa-location-dot\"><\/i>\r\n            <span>\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Social -->\r\n        <div class=\"hp-contact-social\">\r\n          <span class=\"hp-contact-social-lbl\">\u062a\u0627\u0628\u0639\u0646\u0627<\/span>\r\n          <div class=\"hp-contact-social-list\">\r\n            <a href=\"#\" target=\"_blank\" rel=\"noopener\" aria-label=\"Facebook\">\r\n              <i class=\"fa-brands fa-facebook-f\"><\/i>\r\n            <\/a>\r\n            <a href=\"#\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\r\n              <i class=\"fa-brands fa-instagram\"><\/i>\r\n            <\/a>\r\n            <a href=\"https:\/\/wa.me\/201000049051\" target=\"_blank\" rel=\"noopener\" aria-label=\"WhatsApp\">\r\n              <i class=\"fa-brands fa-whatsapp\"><\/i>\r\n            <\/a>\r\n            <a href=\"#\" target=\"_blank\" rel=\"noopener\" aria-label=\"LinkedIn\">\r\n              <i class=\"fa-brands fa-linkedin-in\"><\/i>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Bottom strip -->\r\n    <div class=\"hp-contact-strip\">\r\n      <div class=\"hp-contact-strip-item\">\r\n        <i class=\"fa-solid fa-clock\"><\/i>\r\n        <span>\u0627\u0644\u0623\u062d\u062f \u2013 \u0627\u0644\u062e\u0645\u064a\u0633 \u00b7 9\u0635 \u2013 6\u0645<\/span>\r\n      <\/div>\r\n      <div class=\"hp-contact-strip-divider\"><\/div>\r\n      <div class=\"hp-contact-strip-item\">\r\n        <i class=\"fa-solid fa-globe\"><\/i>\r\n        <span>\u0646\u062e\u062f\u0645 \u0623\u0643\u062b\u0631 \u0645\u0646 25 \u062f\u0648\u0644\u0629<\/span>\r\n      <\/div>\r\n      <div class=\"hp-contact-strip-divider\"><\/div>\r\n      <div class=\"hp-contact-strip-item\">\r\n        <i class=\"fa-solid fa-headset\"><\/i>\r\n        <span>\u062f\u0639\u0645 \u0648\u0627\u062a\u0633\u0627\u0628 24\/7<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== Base ===== *\/\r\n.hp-contact{\r\n  position:relative;\r\n  width:100%;\r\n  padding:20px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  color:#0b2c1d;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  box-sizing:border-box;\r\n  direction:rtl;\r\n  background:\r\n    radial-gradient(circle at 15% 10%, rgba(60,153,59,.08) 0%, transparent 45%),\r\n    radial-gradient(circle at 90% 90%, rgba(136,136,136,.08) 0%, transparent 50%),\r\n    linear-gradient(180deg, #fafaf7 0%, #f2f5f2 100%);\r\n  border-radius: 20px;\r\n}\r\n.hp-contact *,\r\n.hp-contact *::before,\r\n.hp-contact *::after{ box-sizing:border-box; }\r\n\r\n\/* \u2705 \u0641\u0631\u0636 El Messiri \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0633\u064a\u0643\u0634\u0646 *\/\r\n.hp-contact,\r\n.hp-contact *{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n.hp-contact-bg-word{\r\n  position:absolute;\r\n  top:40px;\r\n  left:-40px;\r\n  font-size:260px;\r\n  font-weight:700;\r\n  color:transparent;\r\n  -webkit-text-stroke:1px rgba(60,153,59,.07);\r\n  letter-spacing:-6px;\r\n  pointer-events:none;\r\n  line-height:1;\r\n  z-index:0;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n}\r\n\r\n.hp-contact-blob{\r\n  position:absolute;\r\n  border-radius:50%;\r\n  filter:blur(120px);\r\n  pointer-events:none;\r\n  z-index:0;\r\n}\r\n.hp-contact-blob-1{\r\n  width:550px; height:550px;\r\n  background:radial-gradient(circle, rgba(60,153,59,.15), transparent 70%);\r\n  top:-180px; right:-180px;\r\n  animation:hpContactFloat1 22s ease-in-out infinite;\r\n}\r\n.hp-contact-blob-2{\r\n  width:450px; height:450px;\r\n  background:radial-gradient(circle, rgba(136,136,136,.12), transparent 70%);\r\n  bottom:-150px; left:-150px;\r\n  animation:hpContactFloat2 26s ease-in-out infinite;\r\n}\r\n@keyframes hpContactFloat1{\r\n  0%,100%{ transform:translate(0,0); }\r\n  50%{ transform:translate(-60px,40px); }\r\n}\r\n@keyframes hpContactFloat2{\r\n  0%,100%{ transform:translate(0,0); }\r\n  50%{ transform:translate(50px,-40px); }\r\n}\r\n\r\n.hp-contact-container{\r\n  position:relative;\r\n  z-index:2;\r\n  width:100%;\r\n  padding:0 40px;\r\n}\r\n\r\n\/* ===== Header ===== *\/\r\n.hp-contact-header{\r\n  max-width:820px;\r\n  margin:0 auto 70px;\r\n  text-align:center;\r\n}\r\n.hp-contact-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  margin-bottom:24px;\r\n}\r\n.hp-contact-dot{\r\n  width:8px; height:8px;\r\n  background:#3C993B;\r\n  border-radius:50%;\r\n  position:relative;\r\n}\r\n.hp-contact-dot::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-4px;\r\n  border:1px solid rgba(60,153,59,.4);\r\n  border-radius:50%;\r\n  animation:hpContactPulse 2s ease-out infinite;\r\n}\r\n@keyframes hpContactPulse{\r\n  0%{ transform:scale(1); opacity:1; }\r\n  100%{ transform:scale(2.4); opacity:0; }\r\n}\r\n.hp-contact-label span{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n.hp-contact-title{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:clamp(36px, 4.5vw, 64px);\r\n  line-height:1.2;\r\n  font-weight:700;\r\n  letter-spacing:-.8px;\r\n  margin:0 0 20px;\r\n  color:#0b2c1d;\r\n}\r\n\r\n\/* \u2705 \u0627\u0644\u0640 em \u2014 El Messiri \u0628\u062f\u0644 Playfair Display *\/\r\n.hp-contact-title em{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-style:normal;\r\n  font-weight:700;\r\n  color:#3C993B;\r\n}\r\n\r\n.hp-contact-sub{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  line-height:1.9;\r\n  color:#888888;\r\n  max-width:560px;\r\n  margin:0 auto;\r\n  font-weight:400;\r\n}\r\n\r\n\/* ===== Grid ===== *\/\r\n.hp-contact-grid{\r\n  max-width:1300px;\r\n  margin:0 auto;\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:24px;\r\n  align-items:stretch;\r\n}\r\n\r\n\/* ===== Info Cards ===== *\/\r\n.hp-contact-info{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:14px;\r\n}\r\n\r\n.hp-contact-card{\r\n  display:grid;\r\n  grid-template-columns:64px 1fr auto;\r\n  align-items:center;\r\n  gap:22px;\r\n  padding:24px 28px;\r\n  background:#fff;\r\n  border:1px solid rgba(11,44,29,.08);\r\n  border-radius:18px;\r\n  text-decoration:none;\r\n  color:inherit;\r\n  position:relative;\r\n  overflow:hidden;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.hp-contact-card::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  right:0;\r\n  top:0;\r\n  height:100%;\r\n  width:4px;\r\n  background:linear-gradient(180deg, #3C993B, #2e7a2d);\r\n  transform:scaleY(0);\r\n  transform-origin:top;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.hp-contact-card:hover{\r\n  border-color:rgba(60,153,59,.4);\r\n  transform:translateY(-4px);\r\n  box-shadow:0 25px 50px -25px rgba(11,44,29,.2);\r\n}\r\n.hp-contact-card:hover::before{\r\n  transform:scaleY(1);\r\n}\r\n\r\n.hp-contact-card-icon{\r\n  width:64px;\r\n  height:64px;\r\n  border-radius:16px;\r\n  background:linear-gradient(135deg, #3C993B, #2e7a2d);\r\n  color:#fff;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  font-size:22px;\r\n  box-shadow:0 10px 25px -8px rgba(60,153,59,.5);\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  flex-shrink:0;\r\n}\r\n.hp-contact-card:hover .hp-contact-card-icon{\r\n  transform:rotate(8deg) scale(1.08);\r\n  box-shadow:0 15px 35px -8px rgba(60,153,59,.7);\r\n}\r\n\r\n.hp-contact-card-wa .hp-contact-card-icon{\r\n  background:linear-gradient(135deg, #25D366, #1eb455);\r\n  box-shadow:0 10px 25px -8px rgba(37,211,102,.5);\r\n}\r\n.hp-contact-card-wa:hover .hp-contact-card-icon{\r\n  box-shadow:0 15px 35px -8px rgba(37,211,102,.7);\r\n}\r\n\r\n.hp-contact-card-body{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:4px;\r\n  min-width:0;\r\n}\r\n.hp-contact-card-lbl{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#3C993B;\r\n}\r\n.hp-contact-card-value{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:17px;\r\n  font-weight:600;\r\n  color:#0b2c1d;\r\n  letter-spacing:-.1px;\r\n  line-height:1.4;\r\n  word-break:break-word;\r\n}\r\n.hp-contact-card-note{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12.5px;\r\n  color:#888888;\r\n  font-weight:400;\r\n  line-height:1.5;\r\n}\r\n\r\n.hp-contact-card-arrow{\r\n  width:44px;\r\n  height:44px;\r\n  border-radius:50%;\r\n  border:1.5px solid rgba(11,44,29,.12);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#0b2c1d;\r\n  font-size:13px;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n  background:#fafaf7;\r\n  flex-shrink:0;\r\n}\r\n.hp-contact-card:hover .hp-contact-card-arrow{\r\n  background:#3C993B;\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:rotate(45deg);\r\n}\r\n.hp-contact-card-wa:hover .hp-contact-card-arrow{\r\n  background:#25D366;\r\n  border-color:#25D366;\r\n}\r\n\r\n\/* ===== Side (Map + Social) ===== *\/\r\n.hp-contact-side{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:14px;\r\n}\r\n\r\n.hp-contact-map{\r\n  position:relative;\r\n  flex:1;\r\n  min-height:420px;\r\n  border-radius:18px;\r\n  overflow:hidden;\r\n  border:1px solid rgba(11,44,29,.08);\r\n  box-shadow:0 25px 50px -25px rgba(11,44,29,.15);\r\n}\r\n.hp-contact-map iframe{\r\n  width:100%;\r\n  height:100%;\r\n  border:0;\r\n  display:block;\r\n  filter:saturate(.9) contrast(1.02);\r\n}\r\n.hp-contact-map-badge{\r\n  position:absolute;\r\n  top:16px;\r\n  right:16px;\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:8px;\r\n  padding:10px 16px;\r\n  background:rgba(11,44,29,.85);\r\n  backdrop-filter:blur(12px);\r\n  color:#fff;\r\n  border-radius:100px;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:12.5px;\r\n  font-weight:600;\r\n  letter-spacing:.2px;\r\n  z-index:2;\r\n}\r\n.hp-contact-map-badge i{\r\n  color:#3C993B;\r\n  font-size:14px;\r\n}\r\n\r\n\/* Social *\/\r\n.hp-contact-social{\r\n  background:#fff;\r\n  border:1px solid rgba(11,44,29,.08);\r\n  border-radius:18px;\r\n  padding:22px 28px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:20px;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-contact-social:hover{\r\n  border-color:rgba(60,153,59,.4);\r\n  box-shadow:0 25px 50px -25px rgba(11,44,29,.15);\r\n}\r\n.hp-contact-social-lbl{\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:2px;\r\n  font-weight:600;\r\n  color:#888888;\r\n}\r\n.hp-contact-social-list{\r\n  display:flex;\r\n  gap:10px;\r\n}\r\n.hp-contact-social-list a{\r\n  width:44px;\r\n  height:44px;\r\n  border-radius:12px;\r\n  background:#fafaf7;\r\n  border:1px solid rgba(11,44,29,.08);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  color:#0b2c1d;\r\n  font-size:15px;\r\n  text-decoration:none;\r\n  transition:.5s cubic-bezier(.2,.8,.2,1);\r\n}\r\n.hp-contact-social-list a:hover{\r\n  background:linear-gradient(135deg, #3C993B, #2e7a2d);\r\n  border-color:#3C993B;\r\n  color:#fff;\r\n  transform:translateY(-4px) rotate(6deg);\r\n  box-shadow:0 15px 30px -10px rgba(60,153,59,.55);\r\n}\r\n\r\n\/* ===== Strip ===== *\/\r\n.hp-contact-strip{\r\n  max-width:1300px;\r\n  margin:60px auto 0;\r\n  padding:28px 40px;\r\n  background:#fff;\r\n  border:1px solid rgba(11,44,29,.08);\r\n  border-radius:18px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:30px;\r\n  flex-wrap:wrap;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n.hp-contact-strip-item{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  color:#0b2c1d;\r\n  font-family:'El Messiri', 'Tajawal', sans-serif;\r\n  font-size:14px;\r\n  font-weight:500;\r\n}\r\n.hp-contact-strip-item i{\r\n  color:#3C993B;\r\n  font-size:18px;\r\n}\r\n.hp-contact-strip-divider{\r\n  width:1px;\r\n  height:24px;\r\n  background:rgba(11,44,29,.12);\r\n}\r\n\r\n\/* ===== Responsive ===== *\/\r\n@media(max-width:1024px){\r\n  .hp-contact{ padding:80px 0 70px; }\r\n  .hp-contact-bg-word{ font-size:200px; letter-spacing:-4px; }\r\n  .hp-contact-container{ padding:0 24px; }\r\n  .hp-contact-grid{\r\n    grid-template-columns:1fr;\r\n    gap:20px;\r\n  }\r\n  .hp-contact-map{ min-height:360px; }\r\n}\r\n\r\n@media(max-width:640px){\r\n  .hp-contact{ padding:60px 0 50px; }\r\n  .hp-contact-bg-word{ font-size:120px; letter-spacing:-3px; }\r\n  .hp-contact-container{ padding:0 16px; }\r\n  .hp-contact-header{ margin-bottom:50px; }\r\n  .hp-contact-title{ letter-spacing:-.5px; }\r\n\r\n  .hp-contact-card{\r\n    grid-template-columns:52px 1fr auto;\r\n    gap:16px;\r\n    padding:20px 20px;\r\n  }\r\n  .hp-contact-card-icon{\r\n    width:52px;\r\n    height:52px;\r\n    font-size:18px;\r\n    border-radius:14px;\r\n  }\r\n  .hp-contact-card-value{ font-size:15px; }\r\n  .hp-contact-card-arrow{\r\n    width:38px;\r\n    height:38px;\r\n    font-size:11px;\r\n  }\r\n\r\n  .hp-contact-map{ min-height:300px; }\r\n\r\n  .hp-contact-social{\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n    gap:16px;\r\n    padding:20px;\r\n  }\r\n\r\n  .hp-contact-strip{\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n    gap:16px;\r\n    padding:24px 20px;\r\n    margin-top:40px;\r\n  }\r\n  .hp-contact-strip-divider{ display:none; }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2fe76a8 e-con-full e-flex e-con e-child\" data-id=\"2fe76a8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-400d035 elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"400d035\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;button_width&quot;:&quot;25&quot;,&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"New Form\" aria-label=\"New Form\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"466\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"400d035\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"HB Group  Connecting Markets. Delivering Quality.\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"466\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-above\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-name\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\t\u0627\u0644\u0627\u0633\u0645\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-tel elementor-field-group elementor-column elementor-field-group-field_b8be97d elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_b8be97d\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\t\u0647\u0627\u062a\u0641\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<input size=\"1\" type=\"tel\" name=\"form_fields[field_b8be97d]\" id=\"form-field-field_b8be97d\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" required=\"required\" pattern=\"[0-9()#&amp;+*-=.]+\" title=\"Only numbers and phone characters (#, -, *, etc) are accepted.\">\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\t\u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-sm  elementor-field-textual\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-message elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-message\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\t\u0631\u0633\u0627\u0644\u0629\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<textarea class=\"elementor-field-textual elementor-field  elementor-size-sm\" name=\"form_fields[message]\" id=\"form-field-message\" rows=\"4\"><\/textarea>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-25 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-sm\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0627\u0631\u0633\u0644<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<input type='hidden' name='lang' value='ar' \/><\/form>\n\t\t\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a \u2014 HP Group \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0645\u0648\u062b\u0648\u0642 \u0641\u064a \u0645\u062c\u0645\u0648\u0639\u0629 \u0625\u062a\u0634 \u0628\u064a\u060c \u0646\u0642\u062f\u0645 \u062d\u0644\u0648\u0644 \u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0648\u062a\u0635\u062f\u064a\u0631 \u0645\u062a\u0643\u0627\u0645\u0644\u0629\u061b \u0646\u0633\u062a\u0648\u0631\u062f \u0627\u0644\u0623\u062f\u0648\u064a\u0629 \u0627\u0644\u0628\u064a\u0637\u0631\u064a\u0629\u060c<\/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-466","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/pages\/466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/comments?post=466"}],"version-history":[{"count":9,"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/pages\/466\/revisions"}],"predecessor-version":[{"id":705,"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/pages\/466\/revisions\/705"}],"wp:attachment":[{"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/media?parent=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}