{"id":491,"date":"2026-09-09T13:21:46","date_gmt":"2026-09-09T13:21:46","guid":{"rendered":"https:\/\/hbgroup-eg.com\/import\/"},"modified":"2026-09-22T15:14:31","modified_gmt":"2026-09-22T15:14:31","slug":"import","status":"publish","type":"page","link":"https:\/\/hbgroup-eg.com\/ar\/import\/","title":{"rendered":"Import"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"491\" class=\"elementor elementor-491 elementor-19\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-048903e e-con-full e-flex e-con e-parent\" data-id=\"048903e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-99a9586 e-con-full e-flex e-con e-child\" data-id=\"99a9586\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-f5a2511 e-con-full e-flex e-con e-child\" data-id=\"f5a2511\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7da23c9 elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"7da23c9\" 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-fa20789 elementor-hidden-desktop elementor-widget elementor-widget-html\" data-id=\"fa20789\" 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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0645\u0627 \u0646\u0633\u062a\u0648\u0631\u062f\u0647 \u0645\u0646 \u0627\u0644\u0639\u0627\u0644\u0645\u060c \u0628\u062b\u0642\u0629 \u0645\u062d\u0644\u064a\u0629. \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 \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<\/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-491","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/pages\/491","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=491"}],"version-history":[{"count":6,"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/pages\/491\/revisions"}],"predecessor-version":[{"id":699,"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/pages\/491\/revisions\/699"}],"wp:attachment":[{"href":"https:\/\/hbgroup-eg.com\/ar\/wp-json\/wp\/v2\/media?parent=491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}