{"id":2989,"date":"2025-07-08T22:28:04","date_gmt":"2025-07-08T22:28:04","guid":{"rendered":"https:\/\/velonweb.com\/our-projects\/"},"modified":"2025-09-21T19:36:53","modified_gmt":"2025-09-21T19:36:53","slug":"our-projects","status":"publish","type":"page","link":"https:\/\/velonweb.com\/en\/our-projects\/","title":{"rendered":"Our Projects"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2989\" class=\"elementor elementor-2989 elementor-1921\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2cbfc980 e-con-full e-flex e-con e-parent\" data-id=\"2cbfc980\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-14bbffe9 elementor-widget elementor-widget-html\" data-id=\"14bbffe9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"terminal-loader\"><div class=\"terminal-header\"><div class=\"terminal-title\">VelonWeb<\/div><div class=\"terminal-controls\"><div class=\"control close\"><\/div><div class=\"control minimize\"><\/div><div class=\"control maximize\"><\/div><\/div><\/div><div class=\"text-container\"><div class=\"text-line\" id=\"line1\"><\/div><div class=\"text-line\" id=\"line2\"><\/div><div class=\"cursor\"><\/div><\/div><\/div><style>@keyframes blinkCursor {\n  50% {\n    opacity: 0;\n  }\n}\n\n.terminal-loader {\n  border: 0.1em solid #333;\n  background-color: #1a1a1a;\n  color: #748D92;\n  font-family: \"Courier New\", Courier, monospace;\n  font-weight: bold;\n  font-size: 1em;\n  padding: 1.5em 1em;\n  width: 48em;\n  max-width: 95vw;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n  border-radius: 4px;\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  direction: rtl;\n  text-align: right;\n  margin: auto;\n}\n\n.terminal-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1.5em;\n  background-color: #333;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  padding: 0 0.4em;\n  box-sizing: border-box;\n}\n\n.terminal-controls {\n  float: right;\n}\n\n.control {\n  display: inline-block;\n  width: 0.6em;\n  height: 0.6em;\n  margin-left: 0.4em;\n  border-radius: 50%;\n  background-color: #777;\n}\n\n.control.close {\n  background-color: #e33;\n}\n\n.control.minimize {\n  background-color: #ee0;\n}\n\n.control.maximize {\n  background-color: #0b0;\n}\n\n.terminal-title {\n  float: left;\n  line-height: 1.5em;\n  color: #eee;\n}\n\n.text-container {\n  margin-top: 2em;\n  font-size: 1.1em;\n  position: relative;\n  min-height: 4em;\n}\n\n.text-line {\n  display: block;\n  white-space: normal; \/* \u2705 \u0627\u0644\u0633\u0645\u0627\u062d \u0628\u062a\u063a\u0644\u064a\u0641 \u0627\u0644\u0646\u0635 *\/\n  word-break: break-word; \/* \u2705 \u062a\u062c\u0632\u0626\u0629 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0637\u0648\u064a\u0644\u0629 *\/\n  overflow-wrap: break-word;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.cursor {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 0.5em;\n  height: 1.2em;\n  background-color: #748D92;\n  animation: blinkCursor 0.7s infinite;\n  opacity: 0;\n}\n\n\/* Animation *\/\n@keyframes writeLine1 {\n  0% { width: 0; }\n  100% { width: 100%; }\n}\n\n@keyframes writeLine2 {\n  0% { width: 0; }\n  100% { width: 100%; }\n}\n\n@keyframes moveCursor {\n  0% { bottom: 0; right: 0; }\n  50% { bottom: 0; right: 0; }\n  51% { bottom: -1.3em; right: 0; opacity: 1; }\n  100% { bottom: -1.3em; right: 0; opacity: 1; }\n}\n\n#line1 {\n  animation: writeLine1 4s forwards;\n}\n\n#line2 {\n  width: 0;\n  animation: writeLine2 4s forwards;\n  animation-delay: 4s;\n}\n\n.cursor {\n  animation: \n    blinkCursor 0.7s infinite,\n    moveCursor 8s forwards;\n}\n\n\/* Responsive *\/\n@media (max-width: 600px) {\n  .terminal-loader {\n    font-size: 0.95em;\n    padding: 1.2em 1em;\n  }\n\n  .text-container {\n    font-size: 1em;\n    min-height: 5em;\n  }\n\n  .cursor {\n    display: none; \/* \u0627\u062e\u062a\u064a\u0627\u0631\u064a \u0644\u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0645\u0624\u0634\u0631 \u0641\u064a \u0627\u0644\u062c\u0648\u0627\u0644 *\/\n  }\n}\n<\/style><script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const line1 = document.getElementById('line1');\n  const line2 = document.getElementById('line2');\n  const cursor = document.querySelector('.cursor');\n\n  const fullText1 = \"At VelonWeb, we are committed to delivering professional websites that reflect the identity\";\n  const fullText2 = \"of each project accurately. Here are some of the works we are proud of.\";\n\n  cursor.style.opacity = '1';\n\n  let i = 0;\n  const typeLine1 = setInterval(() => {\n    line1.textContent = fullText1.substring(0, i);\n    i++;\n    if (i > fullText1.length) {\n      clearInterval(typeLine1);\n      let j = 0;\n      const typeLine2 = setInterval(() => {\n        line2.textContent = fullText2.substring(0, j);\n        j++;\n        if (j > fullText2.length) {\n          clearInterval(typeLine2);\n          cursor.style.opacity = '0';\n        }\n      }, 70);\n    }\n  }, 70);\n});\n<\/script>\n\n<style>\n.terminal-loader {\n  direction: ltr;\n  text-align: left;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-756cee74 e-flex e-con-boxed e-con e-parent\" data-id=\"756cee74\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-34cb18a6 e-con-full e-flex e-con e-child\" data-id=\"34cb18a6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69c35478 ct-advanced-heading elementor-widget elementor-widget-heading\" data-id=\"69c35478\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Previous Work<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-174a1953 e-con-full e-flex e-con e-child\" data-id=\"174a1953\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-15ac0711 e-flex e-con-boxed e-con e-parent\" data-id=\"15ac0711\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2b812621 e-con-full e-transform e-flex e-con e-child\" data-id=\"2b812621\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_transform_scale_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.100000000000000088817841970012523233890533447265625,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79c4d33 elementor-widget elementor-widget-html\" data-id=\"79c4d33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      \n      margin: 0;\n      padding: 0;\n      font-family: 'Almarai', sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n    }\n\n    .card {\n      width: 330px;\n      height: 400px;\n      background: linear-gradient(135deg, #748D92, #111111);\n      border-radius: 25px;\n      position: relative;\n      overflow: hidden;\n      text-align: center;\n      padding: 30px 20px;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n      animation: glowPulse 4s ease-in-out infinite;\n    }\n\n    \/* \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u0645\u062a\u062d\u0631\u0643\u0629 \u062d\u0648\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    @keyframes glowPulse {\n      0%, 100% {\n        box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n      }\n      50% {\n        box-shadow: 0 0 25px rgba(116, 141, 146, 0.8);\n      }\n    }\n\n    \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    .animated-bg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(-45deg, #748D92, #4b5a5f);\n      background-size: 200% 200%;\n      animation: gradientFlow 12s ease infinite;\n      z-index: 0;\n      opacity: 0.2;\n    }\n\n    @keyframes gradientFlow {\n      0% { background-position: 0% 50%; }\n      50% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    .card-content {\n      position: relative;\n      z-index: 2;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .logo {\n      width: 150px;\n      height: 150px;\n      margin-bottom: 20px;\n      border-radius: 50%;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.4);\n      \/* \u062d\u0631\u0643\u0629 \u0637\u0641\u0648 \u0644\u0644\u0634\u0639\u0627\u0631 *\/\n      animation: float 3s ease-in-out infinite;\n    }\n\n    \/* \u062d\u0631\u0643\u0629 \u0627\u0644\u0634\u0639\u0627\u0631 - \u0637\u0641\u0648 \u062e\u0641\u064a\u0641 *\/\n    @keyframes float {\n      0%, 100% {\n        transform: translateY(0);\n      }\n      50% {\n        transform: translateY(-10px);\n      }\n    }\n\n    .company-name-ar {\n      font-size: 24px;\n      font-weight: 700;\n      color: white;\n      margin: 12px 0 5px;\n    }\n\n    .company-name-en {\n      font-size: 18px;\n      color: #dddddd;\n      margin-bottom: 30px;\n    }\n\n    .cta-button {\n      background-color: #748D92;\n      color: white;\n      padding: 12px 30px;\n      font-size: 16px;\n      border: none;\n      border-radius: 25px;\n      text-decoration: none;\n      transition: all 0.3s ease;\n      cursor: pointer;\n      font-weight: 600;\n      box-shadow: 0 0 8px rgba(116, 141, 146, 0.5);\n      position: relative;\n      overflow: hidden;\n    }\n\n    .cta-button:hover {\n      background-color: #5a6d72;\n      transform: translateY(-2px);\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.7);\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"card\">\n    <div class=\"animated-bg\"><\/div>\n    \n    <div class=\"card-content\">\n      <img decoding=\"async\" class=\"logo\" src=\"https:\/\/velonweb.com\/wp-content\/uploads\/2025\/09\/FullLogo_Transparent_NoBuffer-e1758483183888.png\" alt=\"\u0634\u0639\u0627\u0631 \u0627\u0644\u0634\u0631\u0643\u0629\" \/>\n      <div class=\"company-name-ar\">\u0645\u0631\u0633\u0649 \u0627\u0644\u0641\u062e\u0627\u0631<\/div>\n      <div class=\"company-name-en\">MARSSA POTTERY<\/div>\n      <a class=\"cta-button\" href=\"https:\/\/marsaaladl.com\/\" target=\"_blank\">Visit Website<\/a>\n    <\/div>\n  <\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3ca09852 e-con-full e-transform e-flex e-con e-child\" data-id=\"3ca09852\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_transform_scale_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.100000000000000088817841970012523233890533447265625,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1683ebf7 elementor-widget elementor-widget-html\" data-id=\"1683ebf7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html><html><head><meta charset=\"UTF-8\" \/><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700&display=swap\" rel=\"stylesheet\"><style>body {\n      \n      margin: 0;\n      padding: 0;\n      font-family: 'Almarai', sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n    }\n\n    .card {\n      width: 330px;\n      height: 400px;\n      background: linear-gradient(135deg, #748D92, #111111);\n      border-radius: 25px;\n      position: relative;\n      overflow: hidden;\n      text-align: center;\n      padding: 30px 20px;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n      animation: glowPulse 4s ease-in-out infinite;\n    }\n\n    \/* \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u0645\u062a\u062d\u0631\u0643\u0629 \u062d\u0648\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    @keyframes glowPulse {\n      0%, 100% {\n        box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n      }\n      50% {\n        box-shadow: 0 0 25px rgba(116, 141, 146, 0.8);\n      }\n    }\n\n    \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    .animated-bg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(-45deg, #748D92, #4b5a5f);\n      background-size: 200% 200%;\n      animation: gradientFlow 12s ease infinite;\n      z-index: 0;\n      opacity: 0.2;\n    }\n\n    @keyframes gradientFlow {\n      0% { background-position: 0% 50%; }\n      50% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    .card-content {\n      position: relative;\n      z-index: 2;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .logo {\n      width: 150px;\n      height: 150px;\n      margin-bottom: 20px;\n      border-radius: 50%;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.4);\n      \/* \u062d\u0631\u0643\u0629 \u0637\u0641\u0648 \u0644\u0644\u0634\u0639\u0627\u0631 *\/\n      animation: float 3s ease-in-out infinite;\n    }\n\n    \/* \u062d\u0631\u0643\u0629 \u0627\u0644\u0634\u0639\u0627\u0631 - \u0637\u0641\u0648 \u062e\u0641\u064a\u0641 *\/\n    @keyframes float {\n      0%, 100% {\n        transform: translateY(0);\n      }\n      50% {\n        transform: translateY(-10px);\n      }\n    }\n\n    .company-name-ar {\n      font-size: 24px;\n      font-weight: 700;\n      color: white;\n      margin: 12px 0 5px;\n    }\n\n    .company-name-en {\n      font-size: 18px;\n      color: #dddddd;\n      margin-bottom: 30px;\n    }\n\n    .cta-button {\n      background-color: #748D92;\n      color: white;\n      padding: 12px 30px;\n      font-size: 16px;\n      border: none;\n      border-radius: 25px;\n      text-decoration: none;\n      transition: all 0.3s ease;\n      cursor: pointer;\n      font-weight: 600;\n      box-shadow: 0 0 8px rgba(116, 141, 146, 0.5);\n      position: relative;\n      overflow: hidden;\n    }\n\n    .cta-button:hover {\n      background-color: #5a6d72;\n      transform: translateY(-2px);\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.7);\n    }\n  <\/style><\/head><body><div class=\"card\"><div class=\"animated-bg\"><\/div><div class=\"card-content\"><img decoding=\"async\" class=\"logo\" src=\"https:\/\/velonweb.com\/wp-content\/uploads\/2025\/04\/new.png\" alt=\"\u0634\u0639\u0627\u0631 \u0627\u0644\u0634\u0631\u0643\u0629\" \/><div class=\"company-name-ar\">\u0634\u0645\u0648\u0633 \u0643\u064a\u0631 \u0644\u0644\u0639\u0644\u0627\u062c \u0627\u0644\u0637\u0628\u064a\u0639\u064a<\/div><div class=\"company-name-en\">Shumos Care Physiotherapy<\/div><a class=\"cta-button\" href=\"https:\/\/shumca.com\" target=\"_blank\">Visit Website<\/a><\/div><\/div><\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2688ff36 e-flex e-con-boxed e-con e-parent\" data-id=\"2688ff36\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-1b652096 e-con-full e-flex e-con e-child\" data-id=\"1b652096\" 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-3f111371 elementor-widget elementor-widget-html\" data-id=\"3f111371\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      \n      margin: 0;\n      padding: 0;\n      font-family: 'Almarai', sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n    }\n\n    .card {\n      width: 330px;\n      height: 400px;\n      background: linear-gradient(135deg, #748D92, #111111);\n      border-radius: 25px;\n      position: relative;\n      overflow: hidden;\n      text-align: center;\n      padding: 30px 20px;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n      animation: glowPulse 4s ease-in-out infinite;\n    }\n\n    \/* \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u0645\u062a\u062d\u0631\u0643\u0629 \u062d\u0648\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    @keyframes glowPulse {\n      0%, 100% {\n        box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n      }\n      50% {\n        box-shadow: 0 0 25px rgba(116, 141, 146, 0.8);\n      }\n    }\n\n    \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    .animated-bg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(-45deg, #748D92, #4b5a5f);\n      background-size: 200% 200%;\n      animation: gradientFlow 12s ease infinite;\n      z-index: 0;\n      opacity: 0.2;\n    }\n\n    @keyframes gradientFlow {\n      0% { background-position: 0% 50%; }\n      50% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    .card-content {\n      position: relative;\n      z-index: 2;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .logo {\n      width: 150px;\n      height: 150px;\n      margin-bottom: 20px;\n      border-radius: 50%;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.4);\n      \/* \u062d\u0631\u0643\u0629 \u0637\u0641\u0648 \u0644\u0644\u0634\u0639\u0627\u0631 *\/\n      animation: float 3s ease-in-out infinite;\n    }\n\n    \/* \u062d\u0631\u0643\u0629 \u0627\u0644\u0634\u0639\u0627\u0631 - \u0637\u0641\u0648 \u062e\u0641\u064a\u0641 *\/\n    @keyframes float {\n      0%, 100% {\n        transform: translateY(0);\n      }\n      50% {\n        transform: translateY(-10px);\n      }\n    }\n\n    .company-name-ar {\n      font-size: 24px;\n      font-weight: 700;\n      color: white;\n      margin: 12px 0 5px;\n    }\n\n    .company-name-en {\n      font-size: 18px;\n      color: #dddddd;\n      margin-bottom: 30px;\n    }\n\n    .cta-button {\n      background-color: #748D92;\n      color: white;\n      padding: 12px 30px;\n      font-size: 16px;\n      border: none;\n      border-radius: 25px;\n      text-decoration: none;\n      transition: all 0.3s ease;\n      cursor: pointer;\n      font-weight: 600;\n      box-shadow: 0 0 8px rgba(116, 141, 146, 0.5);\n      position: relative;\n      overflow: hidden;\n    }\n\n    .cta-button:hover {\n      background-color: #5a6d72;\n      transform: translateY(-2px);\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.7);\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"card\">\n    <div class=\"animated-bg\"><\/div>\n    \n    <div class=\"card-content\">\n      <img decoding=\"async\" class=\"logo\" src=\"https:\/\/velonweb.com\/wp-content\/uploads\/2025\/09\/\u0634\u0631\u0643\u0629-\u0631\u0628\u0649-\u0627\u0644\u0627\u0632\u0648\u0631\u064a-\u0644\u0644\u0645\u062d\u0627\u0645\u0627\u0629-e1757400383913.png\" alt=\"\u0634\u0639\u0627\u0631 \u0627\u0644\u0634\u0631\u0643\u0629\" \/>\n      <div class=\"company-name-ar\">\u0634\u0631\u0643\u0629 \u0631\u0628\u0649 \u0644\u0644\u0645\u062d\u0627\u0645\u0627\u0629<\/div>\n      <div class=\"company-name-en\">Ruba Law & Legal Consulting<\/div>\n      <a class=\"cta-button\" href=\"https:\/\/ruba-law.com\/\" target=\"_blank\">Visit Website<\/a>\n    <\/div>\n  <\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b3cb07 e-con-full e-flex e-con e-child\" data-id=\"b3cb07\" 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-258b8789 elementor-widget elementor-widget-html\" data-id=\"258b8789\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      \n      margin: 0;\n      padding: 0;\n      font-family: 'Almarai', sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n    }\n\n    .card {\n      width: 330px;\n      height: 400px;\n      background: linear-gradient(135deg, #748D92, #111111);\n      border-radius: 25px;\n      position: relative;\n      overflow: hidden;\n      text-align: center;\n      padding: 30px 20px;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n      animation: glowPulse 4s ease-in-out infinite;\n    }\n\n    \/* \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u0645\u062a\u062d\u0631\u0643\u0629 \u062d\u0648\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    @keyframes glowPulse {\n      0%, 100% {\n        box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n      }\n      50% {\n        box-shadow: 0 0 25px rgba(116, 141, 146, 0.8);\n      }\n    }\n\n    \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    .animated-bg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(-45deg, #748D92, #4b5a5f);\n      background-size: 200% 200%;\n      animation: gradientFlow 12s ease infinite;\n      z-index: 0;\n      opacity: 0.2;\n    }\n\n    @keyframes gradientFlow {\n      0% { background-position: 0% 50%; }\n      50% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    .card-content {\n      position: relative;\n      z-index: 2;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .logo {\n      width: 150px;\n      height: 150px;\n      margin-bottom: 20px;\n      border-radius: 50%;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.4);\n      \/* \u062d\u0631\u0643\u0629 \u0637\u0641\u0648 \u0644\u0644\u0634\u0639\u0627\u0631 *\/\n      animation: float 3s ease-in-out infinite;\n    }\n\n    \/* \u062d\u0631\u0643\u0629 \u0627\u0644\u0634\u0639\u0627\u0631 - \u0637\u0641\u0648 \u062e\u0641\u064a\u0641 *\/\n    @keyframes float {\n      0%, 100% {\n        transform: translateY(0);\n      }\n      50% {\n        transform: translateY(-10px);\n      }\n    }\n\n    .company-name-ar {\n      font-size: 24px;\n      font-weight: 700;\n      color: white;\n      margin: 12px 0 5px;\n    }\n\n    .company-name-en {\n      font-size: 18px;\n      color: #dddddd;\n      margin-bottom: 30px;\n    }\n\n    .cta-button {\n      background-color: #748D92;\n      color: white;\n      padding: 12px 30px;\n      font-size: 16px;\n      border: none;\n      border-radius: 25px;\n      text-decoration: none;\n      transition: all 0.3s ease;\n      cursor: pointer;\n      font-weight: 600;\n      box-shadow: 0 0 8px rgba(116, 141, 146, 0.5);\n      position: relative;\n      overflow: hidden;\n    }\n\n    .cta-button:hover {\n      background-color: #5a6d72;\n      transform: translateY(-2px);\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.7);\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"card\">\n    <div class=\"animated-bg\"><\/div>\n    \n    <div class=\"card-content\">\n      <img decoding=\"async\" class=\"logo\" src=\"https:\/\/velonweb.com\/wp-content\/uploads\/2025\/09\/IMG_6790-removebg-preview-e1757399941171.png\" alt=\"\u0634\u0639\u0627\u0631 \u0627\u0644\u0634\u0631\u0643\u0629\" \/>\n      <div class=\"company-name-ar\">\u0623\u0648\u0631\u0646\u0627\u0641\u0627 \u0644\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0644\u0648\u062c\u0633\u062a\u064a\u0629\n<\/div>\n      <div class=\"company-name-en\">Ornava Logistics\n<\/div>\n      <a class=\"cta-button\" href=\"https:\/\/ornavalogistics.com\/\" target=\"_blank\">Visit Website<\/a>\n    <\/div>\n  <\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b5c6f e-flex e-con-boxed e-con e-parent\" data-id=\"b5c6f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8b41714 e-con-full e-flex e-con e-child\" data-id=\"8b41714\" 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-e990ae3 elementor-widget elementor-widget-html\" data-id=\"e990ae3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html><html><head><meta charset=\"UTF-8\" \/><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700&display=swap\" rel=\"stylesheet\"><style>body {\n      \n      margin: 0;\n      padding: 0;\n      font-family: 'Almarai', sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n    }\n\n    .card {\n      width: 330px;\n      height: 400px;\n      background: linear-gradient(135deg, #748D92, #111111);\n      border-radius: 25px;\n      position: relative;\n      overflow: hidden;\n      text-align: center;\n      padding: 30px 20px;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n    }\n\n    \/* \u062a\u0628\u0633\u064a\u0637 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 *\/\n    .animated-bg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(-45deg, #748D92, #4b5a5f);\n      background-size: 200% 200%;\n      animation: gradientFlow 12s ease infinite;\n      z-index: 0;\n      opacity: 0.2;\n    }\n\n    @keyframes gradientFlow {\n      0% { background-position: 0% 50%; }\n      50% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    .card-content {\n      position: relative;\n      z-index: 2;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .logo {\n      width: 150px;\n      height: 150px;\n      margin-bottom: 20px;\n      border-radius: 50%;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.4);\n    }\n\n    .company-name-ar {\n      font-size: 24px;\n      font-weight: 700;\n      color: white;\n      margin: 12px 0 5px;\n    }\n\n    .company-name-en {\n      font-size: 18px;\n      color: #dddddd;\n      margin-bottom: 30px;\n    }\n\n    .cta-button {\n      background-color: #748D92;\n      color: white;\n      padding: 12px 30px;\n      font-size: 16px;\n      border: none;\n      border-radius: 25px;\n      text-decoration: none;\n      transition: all 0.3s ease;\n      cursor: pointer;\n      font-weight: 600;\n      box-shadow: 0 0 8px rgba(116, 141, 146, 0.5);\n    }\n\n    .cta-button:hover {\n      background-color: #5a6d72;\n      transform: translateY(-2px);\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.7);\n    }\n  <\/style><\/head><body><div class=\"card\"><div class=\"animated-bg\"><\/div><div class=\"card-content\"><img decoding=\"async\" class=\"logo\" src=\"https:\/\/velonweb.com\/wp-content\/uploads\/2025\/07\/pioneers-logo5-01-1-scaled.png\" alt=\"\u0634\u0639\u0627\u0631 \u0627\u0644\u0634\u0631\u0643\u0629\" \/><div class=\"company-name-ar\">\u0631\u0648\u0627\u062f \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0648\u0627\u0644\u0635\u062d\u0629<\/div><div class=\"company-name-en\">Pioneers law and healthcare<\/div><a class=\"cta-button\" href=\"https:\/\/pionexs.com\" target=\"_blank\">Visit Website<\/a><\/div><\/div><\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-35d75821 e-con-full e-flex e-con e-child\" data-id=\"35d75821\" 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-44f29e52 elementor-widget elementor-widget-html\" data-id=\"44f29e52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      \n      margin: 0;\n      padding: 0;\n      font-family: 'Almarai', sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n    }\n\n    .card {\n      width: 330px;\n      height: 400px;\n      background: linear-gradient(135deg, #748D92, #111111);\n      border-radius: 25px;\n      position: relative;\n      overflow: hidden;\n      text-align: center;\n      padding: 30px 20px;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n      animation: glowPulse 4s ease-in-out infinite;\n    }\n\n    \/* \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u0645\u062a\u062d\u0631\u0643\u0629 \u062d\u0648\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    @keyframes glowPulse {\n      0%, 100% {\n        box-shadow: 0 0 15px rgba(116, 141, 146, 0.6);\n      }\n      50% {\n        box-shadow: 0 0 25px rgba(116, 141, 146, 0.8);\n      }\n    }\n\n    \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    .animated-bg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(-45deg, #748D92, #4b5a5f);\n      background-size: 200% 200%;\n      animation: gradientFlow 12s ease infinite;\n      z-index: 0;\n      opacity: 0.2;\n    }\n\n    @keyframes gradientFlow {\n      0% { background-position: 0% 50%; }\n      50% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    .card-content {\n      position: relative;\n      z-index: 2;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .logo {\n      width: 150px;\n      height: 150px;\n      margin-bottom: 20px;\n      border-radius: 50%;\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.4);\n      \/* \u062d\u0631\u0643\u0629 \u0637\u0641\u0648 \u0644\u0644\u0634\u0639\u0627\u0631 *\/\n      animation: float 3s ease-in-out infinite;\n    }\n\n    \/* \u062d\u0631\u0643\u0629 \u0627\u0644\u0634\u0639\u0627\u0631 - \u0637\u0641\u0648 \u062e\u0641\u064a\u0641 *\/\n    @keyframes float {\n      0%, 100% {\n        transform: translateY(0);\n      }\n      50% {\n        transform: translateY(-10px);\n      }\n    }\n\n    .company-name-ar {\n      font-size: 24px;\n      font-weight: 700;\n      color: white;\n      margin: 12px 0 5px;\n    }\n\n    .company-name-en {\n      font-size: 18px;\n      color: #dddddd;\n      margin-bottom: 30px;\n    }\n\n    .cta-button {\n      background-color: #748D92;\n      color: white;\n      padding: 12px 30px;\n      font-size: 16px;\n      border: none;\n      border-radius: 25px;\n      text-decoration: none;\n      transition: all 0.3s ease;\n      cursor: pointer;\n      font-weight: 600;\n      box-shadow: 0 0 8px rgba(116, 141, 146, 0.5);\n      position: relative;\n      overflow: hidden;\n    }\n\n    .cta-button:hover {\n      background-color: #5a6d72;\n      transform: translateY(-2px);\n      box-shadow: 0 0 15px rgba(116, 141, 146, 0.7);\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"card\">\n    <div class=\"animated-bg\"><\/div>\n    \n    <div class=\"card-content\">\n      <img decoding=\"async\" class=\"logo\" src=\"https:\/\/velonweb.com\/wp-content\/uploads\/2025\/09\/IMG_6884-e1757400714335.png\" alt=\"\u0634\u0639\u0627\u0631 \u0627\u0644\u0634\u0631\u0643\u0629\" \/>\n      <div class=\"company-name-ar\">\u0631\u0648\u0627\u062f \u0627\u0644\u0646\u062c\u0627\u062d \u0644\u0644\u0645\u062d\u0627\u0645\u0627\u0629<\/div>\n      <div class=\"company-name-en\">Rowad Al-Najah Law<\/div>\n      <a class=\"cta-button\" href=\"https:\/\/rowadlaw.sa\/\" target=\"_blank\">Visit Website<\/a>\n    <\/div>\n  <\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-48de76a e-flex e-con-boxed e-con e-parent\" data-id=\"48de76a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c29df6 elementor-widget elementor-widget-html\" data-id=\"5c29df6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u0641\u0627\u0635\u0644 \u0645\u062a\u062f\u0631\u062c \u0645\u0639 \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u0645\u062a\u062d\u0631\u0643 --><div class=\"fade-divider with-glow\"><\/div><style>.fade-divider {\n  position: relative;\n  width: 100%;\n  height: 5px;\n  background: linear-gradient(to right, transparent, #748D92, transparent);\n  margin: 60px 0;\n  overflow: hidden;\n}\n\n.with-glow::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: -50%;\n  width: 50%;\n  height: 100%;\n  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);\n  animation: glowMove 2s linear infinite;\n}\n\n@keyframes glowMove {\n  from {\n    left: -50%;\n  }\n  to {\n    left: 90%;\n  }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e3ff063 e-flex e-con-boxed e-con e-parent\" data-id=\"e3ff063\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6764d5 elementor-widget elementor-widget-html\" data-id=\"b6764d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\" \/>\n<title>Contact Form<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;700&display=swap\" rel=\"stylesheet\">\n<style>\nbody {\n  font-family: 'Almarai', sans-serif;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  position: relative;\n}\n\n.form-box {\n  background: linear-gradient(135deg, #222, #2c2c2c);\n  border-radius: 20px;\n  padding: 30px;\n  width: 90%;\n  max-width: 500px;\n  color: white;\n  box-shadow: 0 0 20px rgba(116, 141, 146, 0.4);\n  animation: flyIn 1.5s ease, glow 2s ease-in-out infinite;\n  direction: rtl;\n  font-family: 'Almarai', sans-serif;\n  z-index: 2;\n  position: relative;\n}\n\n@keyframes glow {\n  0%, 100% {\n    box-shadow: 0 0 15px rgba(116, 141, 146, 0.5);\n  }\n  50% {\n    box-shadow: 0 0 30px rgba(116, 141, 146, 0.9);\n  }\n}\n\nh2 {\n  font-family: 'Almarai', sans-serif;\n  font-size: 26px;\n  margin-bottom: 25px;\n  color: #748D92;\n  text-align: center;\n  font-weight: 700;\n}\n\nlabel {\n  font-family: 'Almarai', sans-serif;\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 700;\n  color: #ffffff;\n  text-align: right;\n}\n\ninput, textarea {\n  font-family: 'Almarai', sans-serif;\n  width: 100%;\n  padding: 12px;\n  margin-bottom: 15px;\n  border-radius: 10px;\n  border: none;\n  background-color: #333;\n  color: #fff;\n  font-size: 15px;\n  box-shadow: inset 0 0 5px rgba(255,255,255,0.05);\n  text-align: right;\n  font-family: 'Almarai', sans-serif;\n}\n\ninput:focus, textarea:focus {\n  outline: none;\n  box-shadow: 0 0 8px #748D92;\n}\n\nbutton {\n  width: 100%;\n  padding: 12px;\n  border: none;\n  background-color: #748D92;\n  color: white;\n  font-size: 16px;\n  border-radius: 30px;\n  cursor: pointer;\n  font-weight: bold;\n  transition: background 0.3s ease, transform 0.3s ease;\n  font-family: 'Almarai', sans-serif;\n}\n\nbutton:hover {\n  background-color: #5a6d72;\n  transform: translateY(-2px);\n}\n\n.overlay {\n  font-family: 'Almarai', sans-serif;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: none;\n  align-items: center;\n  justify-content: center;\n  z-index: 5;\n}\n\n.overlay.active {\n  display: flex;\n}\n\n.success-popup {\n  font-family: 'Almarai', sans-serif;\n  background-color: #2c2c2c;\n  color: #6fcf97;\n  padding: 20px 30px;\n  border-radius: 15px;\n  font-size: 18px;\n  box-shadow: 0 0 20px rgba(111, 207, 151, 0.3);\n  text-align: center;\n  max-width: 90%;\n}\n\n.close-btn {\n  font-family: 'Almarai', sans-serif;\n  margin-top: 20px;\n  padding: 10px 20px;\n  background-color: #6fcf97;\n  color: #1a1a1a;\n  font-weight: bold;\n  border: none;\n  border-radius: 20px;\n  cursor: pointer;\n  font-family: 'Almarai', sans-serif;\n  transition: background-color 0.3s;\n}\n\n.close-btn:hover {\n  background-color: #5ec68a;\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"form-box\" id=\"form-box\">\n  <h2>Contact Form<\/h2>\n  <form id=\"contact-form\" action=\"https:\/\/formspree.io\/f\/mgvyjqyk\" method=\"POST\">\n    <label for=\"name\">Full Name <span style=\"color:#f77\">*<\/span><\/label>\n    <input type=\"text\" id=\"name\" name=\"name\" required placeholder=\"Enter your name here\">\n\n    <label for=\"phone\">Mobile Number <span style=\"color:#f77\">*<\/span><\/label>\n    <input type=\"tel\" id=\"phone\" name=\"phone\" required placeholder=\"Example: 05xxxxxxxx\">\n\n    <label for=\"email\">Email Address (Optional)<\/label>\n    <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"example@email.com\">\n\n    <label for=\"message\">Message or Request<\/label>\n    <textarea id=\"message\" name=\"message\" rows=\"4\" placeholder=\"Write your message here...\" required><\/textarea>\n\n    <button type=\"submit\">Send<\/button>\n  <\/form>\n<\/div>\n\n<!-- Overlay with success message -->\n<div class=\"overlay\" id=\"overlay\">\n  <div class=\"success-popup\">\n    \u2705 Sent successfully!<br\/>We will contact you soon.\n    <br\/><br\/>\n    <button class=\"close-btn\" id=\"close-btn\">Close<\/button>\n  <\/div>\n<\/div>\n\n<script>\nconst form = document.getElementById('contact-form');\nconst overlay = document.getElementById('overlay');\nconst closeBtn = document.getElementById('close-btn');\n\nform.addEventListener('submit', function(e) {\n  e.preventDefault();\n\n  const formData = new FormData(form);\n\n  fetch(form.action, {\n    method: 'POST',\n    body: formData,\n    headers: {\n      'Accept': 'application\/json'\n    }\n  }).then(response => {\n    if (response.ok) {\n      form.reset();\n      overlay.classList.add('active');\n    } else {\n      alert('An error occurred while sending. Please try again.');\n    }\n  }).catch(error => {\n    alert('Unable to connect. Please check your internet connection.');\n  });\n});\n\n\/\/ Close button for success message\ncloseBtn.addEventListener('click', () => {\n  overlay.classList.remove('active');\n});\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>VelonWeb Our Previous Work \u0645\u0631\u0633\u0649 \u0627\u0644\u0641\u062e\u0627\u0631 MARSSA POTTERY Visit Website \u0634\u0645\u0648\u0633 \u0643\u064a\u0631 \u0644\u0644\u0639\u0644\u0627\u062c \u0627\u0644\u0637\u0628\u064a\u0639\u064aShumos Care PhysiotherapyVisit Website \u0634\u0631\u0643\u0629 \u0631\u0628\u0649 \u0644\u0644\u0645\u062d\u0627\u0645\u0627\u0629 Ruba Law &#038; Legal Consulting Visit Website \u0623\u0648\u0631\u0646\u0627\u0641\u0627 \u0644\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0644\u0648\u062c\u0633\u062a\u064a\u0629 Ornava Logistics Visit Website \u0631\u0648\u0627\u062f \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0648\u0627\u0644\u0635\u062d\u0629Pioneers law and healthcareVisit Website \u0631\u0648\u0627\u062f \u0627\u0644\u0646\u062c\u0627\u062d \u0644\u0644\u0645\u062d\u0627\u0645\u0627\u0629 Rowad Al-Najah Law Visit Website Contact Form Contact Form Full Name [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2989","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"[data-prefix=\"single_page\"] .entry-header .page-title {--theme-font-size:30px;} [data-prefix=\"single_page\"] .entry-header .entry-meta {--theme-font-weight:600;--theme-text-transform:uppercase;--theme-font-size:12px;--theme-line-height:1.3;}","tablet":"","mobile":""},"google_fonts":[],"version":6},"has_hero_section":"enabled","hero_elements":[{"id":"custom_title","enabled":false,"heading_tag":"h1","title":"Home","__id":"WYDb6j3KF2Ab6mmYXMzX0"},{"id":"custom_description","enabled":false,"description_visibility":{"desktop":true,"tablet":true,"mobile":false},"__id":"1Zomxiu-qCaw1BXWfpC46"},{"id":"custom_meta","enabled":false,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"updated_date","enabled":false,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":false,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true},"__id":"6QwI40DpZXM_09g1PuuL9"},{"id":"breadcrumbs","enabled":false,"__id":"tTMyIh3N1CrJ_yZ8vmxVU"}]},"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/pages\/2989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/comments?post=2989"}],"version-history":[{"count":20,"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/pages\/2989\/revisions"}],"predecessor-version":[{"id":4313,"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/pages\/2989\/revisions\/4313"}],"wp:attachment":[{"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/media?parent=2989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}