{"id":2995,"date":"2022-06-22T08:36:02","date_gmt":"2022-06-22T08:36:02","guid":{"rendered":"https:\/\/velonweb.com\/services\/"},"modified":"2026-01-31T15:09:19","modified_gmt":"2026-01-31T15:09:19","slug":"services","status":"publish","type":"page","link":"https:\/\/velonweb.com\/en\/services\/","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2995\" class=\"elementor elementor-2995 elementor-1354\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d4bec9 e-con-full e-flex e-con e-parent\" data-id=\"8d4bec9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c38c013 elementor-widget elementor-widget-html\" data-id=\"c38c013\" 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\">\n  <div class=\"terminal-header\">\n    <div class=\"terminal-title\">VelonWeb<\/div>\n    <div class=\"terminal-controls\">\n      <div class=\"control close\"><\/div>\n      <div class=\"control minimize\"><\/div>\n      <div class=\"control maximize\"><\/div>\n    <\/div>\n  <\/div>\n  <div class=\"text-container\">\n    <div class=\"text-line\" id=\"line1\"><\/div>\n    <div class=\"text-line\" id=\"line2\"><\/div>\n    <div class=\"cursor\"><\/div>\n  <\/div>\n<\/div>\n\n<style>\n@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\n  \/* \u0647\u0646\u0627 \u063a\u064a\u0631\u062a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 *\/\n  direction: ltr;\n  text-align: left;\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;\n  word-break: break-word;\n  overflow-wrap: break-word;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.cursor {\n  position: absolute;\n  bottom: 0;\n  left: 0; \/* \u0628\u062f\u0644 right \u0625\u0644\u0649 left *\/\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; left: 0; opacity: 1; }\n  50% { bottom: 0; left: 0; opacity: 1; }\n  51% { bottom: -1.3em; left: 0; opacity: 1; }\n  100% { bottom: -1.3em; left: 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;\n  }\n}\n<\/style>\n\n<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 provide professional web design solutions at affordable prices\";\n  const fullText2 = \"with high quality to help you build a strong digital presence that reflects your project's professionalism.\";\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>\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\">Packages<\/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 class=\"elementor-element elementor-element-cae6a45 elementor-align-left elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"cae6a45\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/velonweb.com\/en\/contact\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Design Your Own Package<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\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-7c8c4c4 e-grid e-con-boxed e-con e-parent\" data-id=\"7c8c4c4\" 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-29f81481 elementor-widget elementor-widget-html\" data-id=\"29f81481\" 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  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Starter Package\n          <\/h3>\n         <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            A perfect package for those who need a professional page introducing the company and services clearly and briefly.\n          <\/p>\n          \n\n          <!-- Included services -->\n          <div class=\"services-grid mt-6\">\n            <!-- Column 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">One-page website design<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Single-language website<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Secured domain license<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Secured hosting license<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Design using a ready-made template<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Interactive design (Transitions)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Responsive across all devices<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Column 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Simple contact form<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Google Maps integration<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Social media links<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Basic SEO setup<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Basic maintenance and edits throughout the subscription<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Continuous technical support during the subscription<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Excluded services -->\n          <div class=\"mt-6\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Official emails<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Direct WhatsApp button integration<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Adding company introduction content<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Company\/service review page<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Electronic profile design<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Displaying customer reviews<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Full website control with basic training<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Subscription button -->\n          <div class=\"mt-1 text-center\">\n\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-150ad8d elementor-widget elementor-widget-html\" data-id=\"150ad8d\" 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  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Basic Package\n          <\/h3>\n          <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            A perfect package for small businesses or individuals who want a simple, professional online presence.\n          <\/p>\n          \n\n          <!-- Included services -->\n          <div class=\"services-grid mt-6\">\n            <!-- Column 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Website design with 4 pages<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Single-language website<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Secured domain license<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Secured hosting license<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Design using a ready-made template<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Interactive design (Transitions)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Responsive across all devices<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Column 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Contact form<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Google Maps integration<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Social media links<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Basic SEO setup<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Basic maintenance and edits throughout the subscription<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Continuous technical support during the subscription<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Excluded services -->\n          <div class=\"mt-6\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Official emails<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Linking a direct WhatsApp button to the site<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Adding introduction content<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Company\/service reviews page<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Electronic profile design<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Displaying customer reviews<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Full website control with basic training<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\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<div class=\"elementor-element elementor-element-5558bc52 e-flex e-con-boxed e-con e-parent\" data-id=\"5558bc52\" 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-41c5c2e7 e-con-full e-flex e-con e-child\" data-id=\"41c5c2e7\" 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-6ae7d2a1 elementor-widget elementor-widget-html\" data-id=\"6ae7d2a1\" 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  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Advanced Package\n          <\/h3>\n          <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            A comprehensive package for organizations that need a bilingual website, a professional look, and additional features.\n          <\/p>\n          \n\n          <!-- Included services -->\n          <div class=\"services-grid mt-6\">\n            <!-- Column 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Website design up to 6 pages<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Bilingual website<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Secured domain license<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Secured hosting license<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Custom page design<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Interactive design (Transitions)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Responsive across all devices<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Contact form<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Displaying customer reviews<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Column 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Google Maps integration<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Social media links<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Basic & enhanced SEO<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Two official email accounts<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Direct WhatsApp button integration<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Adding introduction content<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Company\/service reviews page<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Basic maintenance and edits throughout the subscription<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Continuous technical support during the subscription<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Excluded services -->\n          <div class=\"mt-6\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Electronic profile design<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Full website control with basic training<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\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-652fca27 e-con-full e-flex e-con e-child\" data-id=\"652fca27\" 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-297f12c7 elementor-widget elementor-widget-html\" data-id=\"297f12c7\" 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  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Professional Package\n          <\/h3>\n          <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            The ideal solution for large companies seeking a comprehensive website with a unique design and professional performance.\n          <\/p>\n         \n\n          <!-- Included services grid -->\n          <div class=\"services-grid mt-6\">\n            <!-- Column 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Website design up to 8 pages<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Website supporting up to 3 languages<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Secured domain license<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Secured hosting license<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Fully custom professional design<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Advanced interactive design (Animations)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Responsive across all devices<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Contact and booking forms<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Google Maps integration<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Continuous technical support during the subscription<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Column 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Social media links<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Comprehensive professional SEO<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Five official email accounts<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Direct WhatsApp button integration<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Adding introduction content<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Company\/service reviews page<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Electronic profile design<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Displaying customer reviews<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Full website control with basic training<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Basic maintenance and edits throughout the subscription<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\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-a1d7e64 e-flex e-con-boxed e-con e-parent\" data-id=\"a1d7e64\" 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-cb77f97 elementor-widget elementor-widget-html\" data-id=\"cb77f97\" 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-f3114ac e-flex e-con-boxed e-con e-parent\" data-id=\"f3114ac\" 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-6e144b2 elementor-widget elementor-widget-html\" data-id=\"6e144b2\" 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 dir=\"rtl\" lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Website Design Journey \u2014 Timeline RTL (Central, without a box)<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n    <style>\n        :root{\n            --ink:#212A31;      \/* Dark background *\/\n            --slate:#393E46;    \/* From your palette *\/\n            --steel:#748D92;    \/* From your palette *\/\n            --mist:#A5BFCC;     \/* From your palette *\/\n            --text:#ecf3f8;     \/* Primary text *\/\n            --text2:#cfdbe4;    \/* Secondary text *\/\n        }\n        *{box-sizing:border-box}\n        body{ margin:0;  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;  color:var(--text); overflow-x:hidden; overscroll-behavior:auto; -webkit-overflow-scrolling:touch }\n\n        .container{ width:min(1100px,94vw); margin:0 auto }\n        header{ text-align:center; margin:0 0 36px }\n        h1{ margin:.2rem 0 .2rem; font-size:clamp(1.6rem,3.4vw,2.6rem) }\n        .subtitle{ color:var(--text2) }\n\n        \/* ===== Timeline ===== *\/\n        .timeline{ position:relative; margin:40px auto 10px }\n        .axis{ position:absolute; right:50%; transform:translateX(50%); top:0; bottom:0; width:3px; background:linear-gradient(180deg,#56636d,#243039); border-radius:6px; pointer-events:none; z-index:0 }\n        .axis:after{ content:\"\"; position:absolute; right:50%; transform:translateX(50%); width:9px; height:9px; border-radius:50%; background:radial-gradient(circle, var(--mist), #6f8a93 60%, transparent 62%); filter:drop-shadow(0 0 9px rgba(165,191,204,.85)); animation:drop 6s linear infinite; top:-80px }\n        @keyframes drop{ 0%{top:-80px; opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%; opacity:0} }\n\n        \/* ===== Step + Central Title ===== *\/\n        .segment{ position:relative }\n        .step{ position:relative; margin:80px 0 0; display:flex; justify-content:center; align-items:center; gap:60px }\n        .dot{ position:absolute; right:50%; transform:translateX(50%); width:16px; height:16px; border-radius:50%; background:var(--mist); box-shadow:0 0 0 6px rgba(165,191,204,.16), 0 8px 22px rgba(0,0,0,.5); pointer-events:none; z-index:1 }\n\n        \/* Shape on the left, title on the right *\/\n        .shape{ position:relative; transform:translateZ(0); filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)); pointer-events:none; animation:float 6s ease-in-out infinite; z-index:1; order: 1; }\n        @keyframes float{ 0%,100%{ transform:translateZ(0) } 50%{ transform:translateY(-8px) } }\n\n        \/* Title and text \u2014 on the right *\/\n        .title{ text-align:right; max-width:min(420px,40vw); position:relative; z-index:2; order: 2; }\n        .title .eyebrow{ color:var(--text2); font-size:.9rem; margin-bottom:.2rem }\n        .title h2{ margin:0; font-size:1.28rem; font-weight:700 }\n        .title strong{ color:var(--mist) }\n\n        \/* Description between steps in the middle of the line *\/\n        .mid{ position:relative; height:140px; margin: 30px 0 }\n        .mid p{ position:absolute; right:50%; transform:translate(50%,-50%); top:50%; margin:0; text-align:center; color:var(--text2); max-width:min(720px,90vw); line-height:1.9; pointer-events:none }\n\n        \/* ===== Shapes ===== *\/\n        .contract{ width:120px; height:120px; position:relative; top:-10px }\n        .contract svg{ display:block }\n        .write line{ stroke-dasharray:110; stroke-dashoffset:110; animation:write 2.1s ease-out forwards var(--d,.2s) }\n        @keyframes write{ to{ stroke-dashoffset:0 } }\n        .pen-move{ transform-origin:66px 58px; animation:pen 2.6s ease-in-out infinite .1s }\n        @keyframes pen{ 0%,100%{ transform:translate(-2px,0) rotate(2deg) } 50%{ transform:translate(2px,-1px) rotate(-3deg) } }\n\n        .screen{ width:110px; height:76px; border-radius:10px; background:#0e151a; border:1px solid #2b333a; position:relative; overflow:hidden; top:-10px }\n        .screen .bar{ height:10px; background:linear-gradient(90deg,#393E46,#2a3640); border-bottom:1px solid #2d3842 }\n        .skeleton .block{ position:absolute; background:linear-gradient(90deg,#3a4650 0%, #586775 50%, #3a4650 100%); background-size:200% 100%; animation:shimmer 2.2s infinite; border-radius:7px; opacity:.85 }\n        @keyframes shimmer{ 0%{background-position:0 0} 100%{background-position:200% 0} }\n\n        .cards .c{ position:absolute; border-radius:7px; opacity:0; transform:translateY(8px) scale(.96); animation:pop .8s var(--t,.2s) forwards }\n        @keyframes pop{ to{ opacity:1; transform:translateY(0) scale(1) } }\n\n        \/* Notes *\/\n        .notes{ margin:46px auto 8px }\n        .notes h3{ margin:0 0 10px; font-size:1.15rem; text-align:center }\n        .notes ul{ margin:0; padding:0 1rem; list-style:none }\n        .notes li{ margin:.55rem 0; color:var(--text2); position:relative; padding-inline-start:1.1rem }\n        .notes li::before{ content:\"\u2022\"; position:absolute; right:0; color:var(--mist) }\n\n        \/* Increase spacing between step 3 and 4 *\/\n        .segment:nth-child(4) .step { margin-top: 100px; }\n\n        @media (max-width:720px){  \n            .screen{ width:98px; height:66px }  \n            .step{ flex-direction: column; gap: 20px; }\n            .title{ text-align: center; max-width: 90vw; }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <header>\n            <h1>Website Design Journey<\/h1>\n            <p class=\"subtitle\"><\/p>\n        <\/header>\n\n        <section class=\"timeline\">\n            <span class=\"axis\" aria-hidden=\"true\"><\/span>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape contract\">\n                        <svg width=\"120\" height=\"120\" viewBox=\"0 0 76 76\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-label=\"Contract\">\n                            <rect x=\"14\" y=\"10\" width=\"48\" height=\"56\" rx=\"6\" fill=\"#0f151a\" stroke=\"#6f8792\"\/>\n                            <g class=\"write\" stroke=\"#A5BFCC\" stroke-width=\"2\" stroke-linecap=\"round\">\n                                <line x1=\"22\" y1=\"24\" x2=\"56\" y2=\"24\" style=\"--d:.2s\"\/>\n                                <line x1=\"22\" y1=\"32\" x2=\"50\" y2=\"32\" style=\"--d:.45s\"\/>\n                                <line x1=\"22\" y1=\"40\" x2=\"54\" y2=\"40\" style=\"--d:.7s\"\/>\n                                <line x1=\"22\" y1=\"48\" x2=\"44\" y2=\"48\" style=\"--d:.95s\"\/>\n                            <\/g>\n                            <g class=\"pen-move\" transform=\"translate(8,6)\">\n                                <path d=\"M56 52 l8 8\" stroke=\"#A5BFCC\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                                <path d=\"M50 58 l12 2\" stroke=\"#748D92\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                                <polygon points=\"60,54 66,60 64,62 58,56\" fill=\"#93afbd\"\/>\n                            <\/g>\n                        <\/svg>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Phase 1<\/div>\n                        <h2><strong>The Beginning<\/strong> \u2014 Signing the Contract<\/h2>\n                    <\/div>\n                <\/div>\n                <div class=\"mid\"><p>Content is received from the client (texts, images, logo, and basic data) to enable us to build the website.<\/p><\/div>\n            <\/div>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape\">\n                        <div class=\"screen skeleton\">\n                            <div class=\"bar\"><\/div>\n                            <div class=\"block\" style=\"top:14px; right:8px; width:78px; height:10px\"><\/div>\n                            <div class=\"block\" style=\"top:30px; right:8px; width:42px; height:8px\"><\/div>\n                            <div class=\"block\" style=\"top:44px; right:8px; width:60px; height:8px\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Phase 2<\/div>\n                        <h2><strong>First Draft<\/strong> \u2014 Initial Design<\/h2>\n                    <\/div>\n                <\/div>\n                <div class=\"mid\"><p>The client is shown the initial design. The client should send all requested modifications at once and in detail to achieve the best result.<\/p><\/div>\n            <\/div>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape\">\n                        <div class=\"screen cards\" style=\"border-color:#2c3942\">\n                            <div class=\"bar\" style=\"background:#2a3640\"><\/div>\n                            <div class=\"c\" style=\"--t:.2s; right:8px; top:14px; width:78px; height:12px; background:#748D92\"><\/div>\n                            <div class=\"c\" style=\"--t:.45s; right:8px; top:30px; width:60px; height:10px; background:#A5BFCC\"><\/div>\n                            <div class=\"c\" style=\"--t:.7s; right:8px; top:44px; width:46px; height:8px; background:#93a4ae\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Phase 3<\/div>\n                        <h2><strong>Second Draft<\/strong> \u2014 After Modifications<\/h2>\n                    <\/div>\n                <\/div>\n                <div class=\"mid\"><p>The modified version is presented. The client should send their final comments at once and in detail to ensure they are implemented in the best way.<\/p><\/div>\n            <\/div>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape\">\n                        <div class=\"screen cards\" style=\"border-color:#3b4a53\">\n                            <div class=\"bar\" style=\"background: linear-gradient(90deg,#393E46,#748D92,#A5BFCC)\"><\/div>\n                            <div class=\"c\" style=\"--t:.2s; right:8px; top:14px; width:82px; height:12px; background:#A5BFCC\"><\/div>\n                            <div class=\"c\" style=\"--t:.45s; right:8px; top:30px; width:62px; height:10px; background:#ffffff\"><\/div>\n                            <div class=\"c\" style=\"--t:.7s; right:8px; top:44px; width:46px; height:8px; background:#748D92\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Phase 4<\/div>\n                        <h2><strong>Final Draft<\/strong> \u2014 Final Delivery<\/h2>\n                        <br>\n                        <p style=\"margin:.35rem 0 0; color:var(--text2)\">This is the final version of the website, complete and ready for launch. From the date of delivery, the technical support and modification period begins according to the selected package, and after it expires, a monthly subscription can be initiated.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/div>\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<div class=\"elementor-element elementor-element-3e0ee40 e-flex e-con-boxed e-con e-parent\" data-id=\"3e0ee40\" 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-94ec2b3 elementor-widget elementor-widget-html\" data-id=\"94ec2b3\" 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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VelonWeb Packages Design Your Own Package Starter Package A perfect package for those who need a professional page introducing the company and services clearly and briefly. One-page website design Single-language website Secured domain license Secured hosting license Design using a ready-made template Interactive design (Transitions) Responsive across all devices Simple contact form Google Maps integration [&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-2995","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\/2995","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=2995"}],"version-history":[{"count":20,"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/pages\/2995\/revisions"}],"predecessor-version":[{"id":4746,"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/pages\/2995\/revisions\/4746"}],"wp:attachment":[{"href":"https:\/\/velonweb.com\/en\/wp-json\/wp\/v2\/media?parent=2995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}