{"id":14,"date":"2026-10-18T13:05:57","date_gmt":"2026-10-18T09:35:57","guid":{"rendered":"https:\/\/voxelstudios.net\/?page_id=14"},"modified":"2026-10-18T15:42:40","modified_gmt":"2026-10-18T12:12:40","slug":"%d9%88%d9%88%da%a9%d8%b3%d9%84","status":"publish","type":"page","link":"https:\/\/voxelstudios.net\/","title":{"rendered":"\u0648\u0648\u06a9\u0633\u0644"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14\" class=\"elementor elementor-14\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-08d1e53 e-con-full e-flex e-con e-parent\" data-id=\"08d1e53\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-39e1fe4 elementor-widget elementor-widget-html\" data-id=\"39e1fe4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<section id=\"voxel-hero\" dir=\"rtl\">\n\n<style>\n\/* =================================\n   VOXEL HERO - GLOBAL\n================================= *\/\n\n#voxel-hero {\n  --vx-cream: #f5eee2;\n  --vx-black: #171717;\n  --vx-gray: #96918d;\n\n  position: relative;\n\n  \/* FULL BLEED - EDGE TO EDGE *\/\n  width: 100vw;\n  width: 100dvw;\n  max-width: none;\n\n  margin-left: calc(50% - 50vw);\n  margin-right: calc(50% - 50vw);\n\n  height: 690px;\n  overflow: hidden;\n  background: var(--vx-cream);\n  isolation: isolate;\n  font-family: inherit;\n}\n\n#voxel-hero *,\n#voxel-hero *::before,\n#voxel-hero *::after {\n  box-sizing: border-box;\n}\n\n\/* =================================\n   VIDEO - DESKTOP\n================================= *\/\n\n#voxel-hero .vx-video-area {\n  position: absolute;\n  inset: 0 auto 0 0;\n  width: 72%;\n  height: 100%;\n  overflow: hidden;\n\n  clip-path: polygon(\n    0 0,\n    82% 0,\n    100% 100%,\n    0 100%\n  );\n\n  background: #a3aaa7;\n  z-index: 1;\n}\n\n#voxel-hero .vx-video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center center;\n}\n\n\/* =================================\n   TEXT - DESKTOP\n================================= *\/\n\n#voxel-hero .vx-content {\n  position: absolute;\n  right: 5%;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 27%;\n  z-index: 2;\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  text-align: right;\n}\n\n#voxel-hero .vx-title {\n  margin: 0;\n  padding: 0;\n  color: var(--vx-black);\n  font-size: clamp(38px, 4.3vw, 67px);\n  font-weight: 900;\n  line-height: 1.45;\n  letter-spacing: -1px;\n}\n\n#voxel-hero .vx-subtitle {\n  margin: 12px 0 0;\n  padding: 0;\n  color: var(--vx-gray);\n  font-size: clamp(15px, 1.7vw, 23px);\n  font-weight: 500;\n  line-height: 1.9;\n}\n\n\/* =================================\n   TABLET\n================================= *\/\n\n@media (min-width: 768px) and (max-width: 1024px) {\n\n  #voxel-hero {\n    height: 580px;\n  }\n\n  #voxel-hero .vx-video-area {\n    width: 73%;\n  }\n\n  #voxel-hero .vx-content {\n    right: 4%;\n    width: 28%;\n  }\n\n  #voxel-hero .vx-title {\n    font-size: clamp(31px, 4.3vw, 48px);\n  }\n}\n\n\/* =================================\n   MOBILE - FULL SCREEN VIDEO\n================================= *\/\n\n@media (max-width: 767px) {\n\n  #voxel-hero {\n    width: 100vw;\n    width: 100dvw;\n    max-width: none;\n\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n\n    height: 100svh;\n    min-height: 600px;\n    max-height: none;\n    background: #89999d;\n  }\n\n  \/* Full-screen video *\/\n\n  #voxel-hero .vx-video-area {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n\n    clip-path: none;\n    background: #89999d;\n    z-index: 1;\n  }\n\n  #voxel-hero .vx-video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center center;\n  }\n\n  \/* Subtle dark overlay for readability *\/\n\n  #voxel-hero .vx-video-area::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n\n    background: linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0.12) 0%,\n      rgba(0, 0, 0, 0.02) 35%,\n      rgba(0, 0, 0, 0.10) 60%,\n      rgba(0, 0, 0, 0.20) 100%\n    );\n\n    z-index: 2;\n  }\n\n  \/* Centered content near bottom *\/\n\n  #voxel-hero .vx-content {\n    position: absolute;\n\n    top: auto;\n    right: 0;\n    left: 0;\n    bottom: 15%;\n\n    transform: none;\n    width: 100%;\n    padding: 0 20px;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n\n    z-index: 3;\n  }\n\n  #voxel-hero .vx-title {\n    color: #ffffff;\n    font-size: clamp(39px, 10vw, 56px);\n    font-weight: 900;\n    line-height: 1.36;\n    letter-spacing: -1px;\n    text-align: center;\n    margin: 0;\n  }\n\n  #voxel-hero .vx-subtitle {\n    color: #ffffff;\n    font-size: clamp(15px, 4vw, 19px);\n    font-weight: 500;\n    line-height: 2;\n    text-align: center;\n    margin: 12px 0 0;\n  }\n}\n\n\/* =================================\n   SMALL MOBILE\n================================= *\/\n\n@media (max-width: 390px) {\n\n  #voxel-hero .vx-title {\n    font-size: 37px;\n  }\n\n  #voxel-hero .vx-subtitle {\n    font-size: 15px;\n  }\n\n  #voxel-hero .vx-content {\n    bottom: 13%;\n  }\n}\n\n\/* =================================\n   REDUCED MOTION\n================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n  #voxel-hero .vx-video {\n    animation: none;\n  }\n}\n\n\/* =================================\n   MOBILE TRANSPARENT HEADER\n================================= *\/\n\n@media (max-width: 767px) {\n\n  #voxel-header {\n    position: absolute !important;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    z-index: 9999;\n    background: transparent !important;\n  }\n\n  #voxel-header .vh-bar {\n    background: transparent !important;\n  }\n\n}\n\n<\/style>\n\n\n<!-- =================================\n     VIDEO\n================================= -->\n\n<div class=\"vx-video-area\">\n\n  <video\n    class=\"vx-video\"\n    autoplay\n    muted\n    loop\n    playsinline\n    preload=\"metadata\"\n    aria-label=\"\u0648\u06cc\u062f\u06cc\u0648\u06cc \u0645\u0639\u0631\u0641\u06cc \u0648\u0648\u06a9\u0633\u0644\"\n  >\n\n    <source\n      src=\"https:\/\/voxelstudios.net\/wp-content\/uploads\/2026\/10\/document_5882125194121715483.mp4\"\n      type=\"video\/mp4\"\n    >\n\n  <\/video>\n\n<\/div>\n\n\n<!-- =================================\n     HERO TEXT\n================================= -->\n\n<div class=\"vx-content\">\n\n  <h1 class=\"vx-title\">\n    \u0627\u0632 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\n    <br>\n    \u062a\u0627 \u0628\u0627\u0632\u0627\u0631 \u06a9\u0627\u0631\n  <\/h1>\n\n  <p class=\"vx-subtitle\">\n    \u0628\u0631 \u067e\u0627\u06cc\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0627\u0632\u0627\u0631 \u06a9\u0627\u0631\u060c\n    <br>\n    \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0645\u0646\u062a\u0648\u0631\u0634\u06cc\u067e\n  <\/p>\n\n<\/div>\n\n\n<!-- =================================\n     VIDEO PERFORMANCE\n================================= -->\n\n<script>\n(function() {\n\n  const hero = document.getElementById(\"voxel-hero\");\n\n  if (!hero || hero.dataset.initialized === \"true\") {\n    return;\n  }\n\n  hero.dataset.initialized = \"true\";\n\n  const video = hero.querySelector(\".vx-video\");\n\n  video.muted = true;\n  video.loop = true;\n  video.playsInline = true;\n\n  function playVideo() {\n    const promise = video.play();\n\n    if (\n      promise &&\n      typeof promise.catch === \"function\"\n    ) {\n      promise.catch(function() {});\n    }\n  }\n\n  if (\"IntersectionObserver\" in window) {\n\n    const observer = new IntersectionObserver(\n      function(entries) {\n\n        entries.forEach(function(entry) {\n\n          if (entry.isIntersecting) {\n            playVideo();\n          } else {\n            video.pause();\n          }\n\n        });\n\n      },\n      {\n        threshold: 0.1\n      }\n    );\n\n    observer.observe(hero);\n\n  } else {\n    playVideo();\n  }\n\n  document.addEventListener(\n    \"visibilitychange\",\n    function() {\n\n      if (document.hidden) {\n        video.pause();\n      } else {\n\n        const rect = hero.getBoundingClientRect();\n\n        if (\n          rect.bottom > 0 &&\n          rect.top < window.innerHeight\n        ) {\n          playVideo();\n        }\n      }\n\n    }\n  );\n\n})();\n<\/script>\n\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-111aeb4 e-con-full e-flex e-con e-parent\" data-id=\"111aeb4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d462a6 elementor-widget elementor-widget-html\" data-id=\"7d462a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<section id=\"voxel-courses-preview\" dir=\"rtl\">\n\n<style>\n\/* ==========================================\n   VOXEL COURSES - DESIGN PREVIEW V2\n========================================== *\/\n\n#voxel-courses-preview {\n  --vc-bg: #f4ede2;\n  --vc-green: #3d6045;\n  --vc-text: #171717;\n  --vc-muted: #9c978d;\n  --vc-line: #e6ded2;\n  --vc-active: #e7b58d;\n\n  width: 100%;\n  background: var(--vc-bg);\n  padding: 70px 0 85px;\n  font-family: inherit;\n  direction: rtl;\n  color: var(--vc-text);\n}\n\n#voxel-courses-preview *,\n#voxel-courses-preview *::before,\n#voxel-courses-preview *::after {\n  box-sizing: border-box;\n}\n\n#voxel-courses-preview button,\n#voxel-courses-preview input {\n  font-family: inherit;\n}\n\n#voxel-courses-preview button {\n  cursor: pointer;\n}\n\n\/* ==========================================\n   MAIN CONTAINER\n========================================== *\/\n\n#voxel-courses-preview .vc-container {\n  width: calc(100% - 80px);\n  max-width: 1440px;\n  margin: 0 auto;\n}\n\n\/* ==========================================\n   TOP TOOLBAR\n========================================== *\/\n\n#voxel-courses-preview .vc-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 42px;\n  gap: 20px;\n}\n\n#voxel-courses-preview .vc-search {\n  width: 285px;\n  height: 36px;\n  position: relative;\n}\n\n#voxel-courses-preview .vc-search input {\n  display: block;\n  width: 100%;\n  height: 100%;\n  padding: 0 15px 0 38px;\n  border: none;\n  border-radius: 3px;\n  background: #eae2d6;\n  outline: none;\n  font-size: 12px;\n  color: #777;\n  box-shadow: none;\n}\n\n#voxel-courses-preview .vc-search input:focus {\n  background: #e9e0d3;\n  outline: 1px solid #d2c5b4;\n}\n\n#voxel-courses-preview .vc-search svg {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 15px;\n  height: 15px;\n  stroke: #b1a89c;\n  fill: none;\n  pointer-events: none;\n}\n\n#voxel-courses-preview .vc-all-button {\n  background: var(--vc-green);\n  border: 0;\n  border-radius: 2px;\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 9px 18px;\n  line-height: 1.3;\n}\n\n\/* ==========================================\n   SECTION TITLE\n========================================== *\/\n\n#voxel-courses-preview .vc-heading {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 0 0 24px;\n}\n\n#voxel-courses-preview .vc-heading h2 {\n  margin: 0;\n  padding: 0;\n  font-size: 29px;\n  font-weight: 900;\n  line-height: 1.6;\n  color: var(--vc-green);\n}\n\n\/* ==========================================\n   CATEGORIES\n========================================== *\/\n\n#voxel-courses-preview .vc-categories {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  gap: 6px;\n  margin-bottom: 16px;\n  direction: rtl;\n}\n\n#voxel-courses-preview .vc-category {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 28px;\n  padding: 5px 12px;\n  background: transparent;\n  border: 1px solid #ded5c8;\n  border-radius: 2px;\n  color: #b0a99f;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.4;\n  white-space: nowrap;\n  transition: background .2s, color .2s;\n}\n\n#voxel-courses-preview .vc-category:hover {\n  color: #4b4b4b;\n  border-color: #c9b9a7;\n}\n\n#voxel-courses-preview .vc-category.is-active {\n  background: var(--vc-active);\n  border-color: var(--vc-active);\n  color: #543b2c;\n}\n\n\/* ==========================================\n   COURSES GRID\n========================================== *\/\n\n#voxel-courses-preview .vc-grid {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 12px;\n}\n\n#voxel-courses-preview .vc-card {\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: #fff;\n  border-radius: 8px;\n  position: relative;\n}\n\n\/* ==========================================\n   DESKTOP IMAGE\n========================================== *\/\n\n#voxel-courses-preview .vc-card-image {\n  width: 100%;\n  aspect-ratio: 1 \/ 1.04;\n  position: relative;\n  overflow: hidden;\n  background: #c2d2d9;\n}\n\n#voxel-courses-preview .vc-card-image img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  transition: transform .35s ease;\n}\n\n#voxel-courses-preview .vc-card:hover img {\n  transform: scale(1.025);\n}\n\n\/* ==========================================\n   DESKTOP TITLE OVERLAY\n========================================== *\/\n\n#voxel-courses-preview .vc-image-title {\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 100%;\n  min-height: 39px;\n  padding: 7px 8px;\n  margin: 0;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  background: rgba(247,247,247,.94);\n  color: #161616;\n  font-size: clamp(11px, 1.05vw, 16px);\n  font-weight: 800;\n  line-height: 1.4;\n  text-align: center;\n  z-index: 2;\n}\n\n\/* ==========================================\n   MOBILE DETAILS HIDDEN ON DESKTOP\n========================================== *\/\n\n#voxel-courses-preview .vc-card-details {\n  display: none;\n}\n\n\/* ==========================================\n   EMPTY STATE\n========================================== *\/\n\n#voxel-courses-preview .vc-empty {\n  display: none;\n  padding: 45px 15px;\n  font-size: 14px;\n  text-align: center;\n  color: var(--vc-muted);\n}\n\n\/* ==========================================\n   TABLET\n========================================== *\/\n\n@media (min-width: 768px) and (max-width: 1024px) {\n\n  #voxel-courses-preview .vc-container {\n    width: calc(100% - 48px);\n  }\n\n  #voxel-courses-preview .vc-grid {\n    gap: 10px;\n  }\n\n  #voxel-courses-preview .vc-image-title {\n    font-size: 12px;\n    min-height: 32px;\n  }\n\n  #voxel-courses-preview .vc-heading h2 {\n    font-size: 25px;\n  }\n}\n\n\/* ==========================================\n   MOBILE DESIGN\n========================================== *\/\n\n@media (max-width: 767px) {\n\n  #voxel-courses-preview {\n    padding: 42px 0 65px;\n    background: var(--vc-bg);\n  }\n\n  #voxel-courses-preview .vc-container {\n    width: calc(100% - 34px);\n    max-width: 480px;\n  }\n\n  \/* Top toolbar *\/\n\n  #voxel-courses-preview .vc-toolbar {\n    margin-bottom: 42px;\n    gap: 12px;\n  }\n\n  #voxel-courses-preview .vc-search {\n    width: 45%;\n    height: 31px;\n  }\n\n  #voxel-courses-preview .vc-search input {\n    font-size: 10px;\n    padding-right: 9px;\n  }\n\n  #voxel-courses-preview .vc-all-button {\n    padding: 8px 13px;\n    font-size: 10px;\n  }\n\n  \/* Title *\/\n\n  #voxel-courses-preview .vc-heading {\n    margin-bottom: 20px;\n  }\n\n  #voxel-courses-preview .vc-heading h2 {\n    font-size: 24px;\n    font-weight: 900;\n  }\n\n  \/* Categories *\/\n\n  #voxel-courses-preview .vc-categories {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 6px;\n    margin-bottom: 18px;\n  }\n\n  #voxel-courses-preview .vc-category {\n    width: 100%;\n    min-width: 0;\n    min-height: 28px;\n    padding: 5px 3px;\n    font-size: 10px;\n    border-radius: 2px;\n    white-space: normal;\n    text-align: center;\n  }\n\n  \/* Single column *\/\n\n  #voxel-courses-preview .vc-grid {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: 17px;\n  }\n\n  \/* Card *\/\n\n  #voxel-courses-preview .vc-card {\n    border-radius: 7px;\n    background: #fffdfa;\n    overflow: hidden;\n    box-shadow: none;\n  }\n\n  \/* Image *\/\n\n  #voxel-courses-preview .vc-card-image {\n    width: 100%;\n    aspect-ratio: 1.16 \/ 1;\n  }\n\n  #voxel-courses-preview .vc-card-image img {\n    object-fit: cover;\n    object-position: center;\n  }\n\n  \/* Hide title from image *\/\n\n  #voxel-courses-preview .vc-image-title {\n    display: none;\n  }\n\n  \/* Show details below image *\/\n\n  #voxel-courses-preview .vc-card-details {\n    display: flex;\n    flex-direction: column;\n    padding: 11px 13px 12px;\n    gap: 7px;\n    background: #fffdfa;\n  }\n\n  #voxel-courses-preview .vc-course-title {\n    margin: 0;\n    font-size: 15px;\n    line-height: 1.5;\n    font-weight: 900;\n    color: #141414;\n    text-align: right;\n  }\n\n  #voxel-courses-preview .vc-course-description {\n    margin: 0;\n    color: #979189;\n    font-size: 10px;\n    line-height: 1.6;\n  }\n\n  \/* Course details *\/\n\n  #voxel-courses-preview .vc-course-meta {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n    gap: 8px 15px;\n    margin: 3px 0;\n  }\n\n  #voxel-courses-preview .vc-meta-item {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    color: #555;\n    font-size: 10px;\n    white-space: nowrap;\n  }\n\n  #voxel-courses-preview .vc-meta-item svg {\n    width: 13px;\n    height: 13px;\n    fill: none;\n    stroke: #333;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  #voxel-courses-preview .vc-rating {\n    color: #e9aa27;\n    font-size: 12px;\n  }\n\n  \/* Footer *\/\n\n  #voxel-courses-preview .vc-card-footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 10px;\n    margin-top: 2px;\n  }\n\n  #voxel-courses-preview .vc-price {\n    font-size: 13px;\n    font-weight: 900;\n    color: #111;\n    white-space: nowrap;\n  }\n\n  #voxel-courses-preview .vc-cart-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 8px 11px;\n    border: 0;\n    border-radius: 3px;\n    background: #161616;\n    color: #fff;\n    font-size: 11px;\n    font-weight: 700;\n    line-height: 1.2;\n    white-space: nowrap;\n  }\n\n  #voxel-courses-preview .vc-cart-button svg {\n    width: 13px;\n    height: 13px;\n    fill: none;\n    stroke: #fff;\n    stroke-width: 1.7;\n  }\n}\n\n\/* ==========================================\n   SMALL MOBILE\n========================================== *\/\n\n@media (max-width: 390px) {\n\n  #voxel-courses-preview .vc-heading h2 {\n    font-size: 21px;\n  }\n\n  #voxel-courses-preview .vc-category {\n    font-size: 9px;\n  }\n\n  #voxel-courses-preview .vc-course-title {\n    font-size: 14px;\n  }\n\n  #voxel-courses-preview .vc-cart-button {\n    font-size: 10px;\n    padding: 7px 9px;\n  }\n\n  #voxel-courses-preview .vc-price {\n    font-size: 12px;\n  }\n}\n<\/style>\n\n\n<div class=\"vc-container\">\n\n  <!-- TOP BAR -->\n  <div class=\"vc-toolbar\">\n\n    <div class=\"vc-search\">\n      <input\n        type=\"search\"\n        id=\"vc-preview-search\"\n        placeholder=\"\u062c\u0633\u062a\u062c\u0648\"\n        aria-label=\"\u062c\u0633\u062a\u062c\u0648\u06cc \u062f\u0648\u0631\u0647\u200c\u0647\u0627\"\n      >\n      <svg viewBox=\"0 0 24 24\">\n        <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"\/>\n        <path d=\"m16 16 5 5\"\/>\n      <\/svg>\n    <\/div>\n\n    <button\n      type=\"button\"\n      class=\"vc-all-button\"\n      id=\"vc-preview-all\"\n    >\n      \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647\n    <\/button>\n\n  <\/div>\n\n\n  <!-- SECTION HEADING -->\n  <div class=\"vc-heading\">\n    <h2>\u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u062f\u0648\u0631\u0647\u200c\u0647\u0627<\/h2>\n  <\/div>\n\n\n  <!-- FILTERS -->\n  <div class=\"vc-categories\">\n\n    <button type=\"button\" class=\"vc-category is-active\" data-category=\"all\">\n      \u0647\u0645\u0647 \u062f\u0648\u0631\u0647\u200c\u0647\u0627\n    <\/button>\n\n    <button type=\"button\" class=\"vc-category\" data-category=\"design\">\n      \u0637\u0631\u0627\u062d\u06cc\n    <\/button>\n\n    <button type=\"button\" class=\"vc-category\" data-category=\"render\">\n      \u0631\u0646\u062f\u0631\u06cc\u0646\u06af\n    <\/button>\n\n    <button type=\"button\" class=\"vc-category\" data-category=\"model\">\n      \u0645\u062f\u0644 \u0633\u0627\u0632\u06cc\n    <\/button>\n\n    <button type=\"button\" class=\"vc-category\" data-category=\"interior\">\n      \u0637\u0631\u0627\u062d\u06cc \u062f\u0627\u062e\u0644\u06cc\n    <\/button>\n\n    <button type=\"button\" class=\"vc-category\" data-category=\"animation\">\n      \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\n    <\/button>\n\n    <button type=\"button\" class=\"vc-category\" data-category=\"post\">\n      \u067e\u0633\u062a \u067e\u0631\u0648\u062f\u0627\u06a9\u0634\u0646\n    <\/button>\n\n    <button type=\"button\" class=\"vc-category\" data-category=\"light\">\n      \u0646\u0648\u0631\u067e\u0631\u062f\u0627\u0632\u06cc\n    <\/button>\n\n    <button type=\"button\" class=\"vc-category\" data-category=\"ai\">\n      \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\n    <\/button>\n\n  <\/div>\n\n\n  <!-- DYNAMIC SAMPLE CARDS -->\n  <div class=\"vc-grid\" id=\"vc-preview-grid\"><\/div>\n\n  <div class=\"vc-empty\" id=\"vc-preview-empty\">\n    \u062f\u0648\u0631\u0647\u200c\u0627\u06cc \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0634\u062e\u0635\u0627\u062a \u067e\u06cc\u062f\u0627 \u0646\u0634\u062f.\n  <\/div>\n\n<\/div>\n\n\n<script>\n(function() {\n\n  const section = document.getElementById(\n    \"voxel-courses-preview\"\n  );\n\n  if (!section || section.dataset.ready === \"true\") {\n    return;\n  }\n\n  section.dataset.ready = \"true\";\n\n  \/* ========================================\n     COURSE IMAGE\n     SAME IMAGE FOR ALL SAMPLE COURSES\n  ======================================== *\/\n\n  const COURSE_IMAGE =\n    \"https:\/\/voxelstudios.net\/wp-content\/uploads\/2026\/10\/photo_2026-10-18_13-39-51.jpg\";\n\n\n  \/* ========================================\n     SAMPLE COURSE DATA\n     VISUAL PREVIEW ONLY\n  ======================================== *\/\n\n  const courses = [\n    {\n      title: \"\u0645\u0628\u0627\u0646\u06cc \u0631\u0646\u06af \u0648 \u062a\u0631\u06a9\u06cc\u0628\u200c\u0628\u0646\u062f\u06cc\",\n      category: \"design\",\n      price: \"\u06f3,\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0\",\n      hours: \"\u06f1\u06f2 \u0633\u0627\u0639\u062a\",\n      lessons: \"\u06f4\u06f2 \u062f\u0631\u0633\",\n      rating: \"\u06f4.\u06f9\"\n    },\n    {\n      title: \"\u0645\u0628\u0627\u0646\u06cc \u0631\u0646\u06af \u0648 \u062a\u0631\u06a9\u06cc\u0628\u200c\u0628\u0646\u062f\u06cc\",\n      category: \"render\",\n      price: \"\u06f3,\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0\",\n      hours: \"\u06f1\u06f2 \u0633\u0627\u0639\u062a\",\n      lessons: \"\u06f4\u06f2 \u062f\u0631\u0633\",\n      rating: \"\u06f4.\u06f9\"\n    },\n    {\n      title: \"\u0645\u0628\u0627\u0646\u06cc \u0631\u0646\u06af \u0648 \u062a\u0631\u06a9\u06cc\u0628\u200c\u0628\u0646\u062f\u06cc\",\n      category: \"model\",\n      price: \"\u06f3,\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0\",\n      hours: \"\u06f1\u06f2 \u0633\u0627\u0639\u062a\",\n      lessons: \"\u06f4\u06f2 \u062f\u0631\u0633\",\n      rating: \"\u06f4.\u06f9\"\n    },\n    {\n      title: \"\u0645\u0628\u0627\u0646\u06cc \u0631\u0646\u06af \u0648 \u062a\u0631\u06a9\u06cc\u0628\u200c\u0628\u0646\u062f\u06cc\",\n      category: \"interior\",\n      price: \"\u06f3,\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0\",\n      hours: \"\u06f1\u06f2 \u0633\u0627\u0639\u062a\",\n      lessons: \"\u06f4\u06f2 \u062f\u0631\u0633\",\n      rating: \"\u06f4.\u06f9\"\n    },\n    {\n      title: \"\u0645\u0628\u0627\u0646\u06cc \u0631\u0646\u06af \u0648 \u062a\u0631\u06a9\u06cc\u0628\u200c\u0628\u0646\u062f\u06cc\",\n      category: \"animation\",\n      price: \"\u06f3,\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0\",\n      hours: \"\u06f1\u06f2 \u0633\u0627\u0639\u062a\",\n      lessons: \"\u06f4\u06f2 \u062f\u0631\u0633\",\n      rating: \"\u06f4.\u06f9\"\n    },\n    {\n      title: \"\u0645\u0628\u0627\u0646\u06cc \u0631\u0646\u06af \u0648 \u062a\u0631\u06a9\u06cc\u0628\u200c\u0628\u0646\u062f\u06cc\",\n      category: \"post\",\n      price: \"\u06f3,\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0\",\n      hours: \"\u06f1\u06f2 \u0633\u0627\u0639\u062a\",\n      lessons: \"\u06f4\u06f2 \u062f\u0631\u0633\",\n      rating: \"\u06f4.\u06f9\"\n    },\n    {\n      title: \"\u0645\u0628\u0627\u0646\u06cc \u0631\u0646\u06af \u0648 \u062a\u0631\u06a9\u06cc\u0628\u200c\u0628\u0646\u062f\u06cc\",\n      category: \"light\",\n      price: \"\u06f3,\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0\",\n      hours: \"\u06f1\u06f2 \u0633\u0627\u0639\u062a\",\n      lessons: \"\u06f4\u06f2 \u062f\u0631\u0633\",\n      rating: \"\u06f4.\u06f9\"\n    },\n    {\n      title: \"\u0645\u0628\u0627\u0646\u06cc \u0631\u0646\u06af \u0648 \u062a\u0631\u06a9\u06cc\u0628\u200c\u0628\u0646\u062f\u06cc\",\n      category: \"ai\",\n      price: \"\u06f3,\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0\",\n      hours: \"\u06f1\u06f2 \u0633\u0627\u0639\u062a\",\n      lessons: \"\u06f4\u06f2 \u062f\u0631\u0633\",\n      rating: \"\u06f4.\u06f9\"\n    },\n    {\n      title: \"\u0645\u0628\u0627\u0646\u06cc \u0631\u0646\u06af \u0648 \u062a\u0631\u06a9\u06cc\u0628\u200c\u0628\u0646\u062f\u06cc\",\n      category: \"design\",\n      price: \"\u06f3,\u06f9\u06f8\u06f0,\u06f0\u06f0\u06f0\",\n      hours: \"\u06f1\u06f2 \u0633\u0627\u0639\u062a\",\n      lessons: \"\u06f4\u06f2 \u062f\u0631\u0633\",\n      rating: \"\u06f4.\u06f9\"\n    }\n  ];\n\n\n  \/* ========================================\n     SVG ICONS\n  ======================================== *\/\n\n  const clockIcon = `\n    <svg viewBox=\"0 0 24 24\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\n      <path d=\"M12 7v5l3 2\"\/>\n    <\/svg>\n  `;\n\n  const bookIcon = `\n    <svg viewBox=\"0 0 24 24\">\n      <path d=\"M4 5h7a3 3 0 0 1 3 3v12\n               a3 3 0 0 0-3-3H4z\"\/>\n      <path d=\"M20 5h-3a3 3 0 0 0-3 3v12\n               a3 3 0 0 1 3-3h3z\"\/>\n    <\/svg>\n  `;\n\n  const cartIcon = `\n    <svg viewBox=\"0 0 24 24\">\n      <path d=\"M3 4h2l2 12h11l3-9H6\"\/>\n      <circle cx=\"10\" cy=\"20\" r=\"1\"\/>\n      <circle cx=\"18\" cy=\"20\" r=\"1\"\/>\n    <\/svg>\n  `;\n\n\n  \/* ========================================\n     CREATE COURSE CARDS\n  ======================================== *\/\n\n  const grid = section.querySelector(\"#vc-preview-grid\");\n\n  courses.forEach(function(course, index) {\n\n    const card = document.createElement(\"article\");\n\n    card.className = \"vc-card\";\n    card.dataset.category = course.category;\n    card.dataset.title = course.title;\n\n    card.innerHTML = `\n\n      <div class=\"vc-card-image\">\n\n        <img\n          src=\"${COURSE_IMAGE}\"\n          alt=\"${course.title}\"\n          loading=\"${index < 3 ? \"eager\" : \"lazy\"}\"\n          decoding=\"async\"\n        >\n\n        <h3 class=\"vc-image-title\">\n          ${course.title}\n        <\/h3>\n\n      <\/div>\n\n\n      <div class=\"vc-card-details\">\n\n        <h3 class=\"vc-course-title\">\n          ${course.title}\n        <\/h3>\n\n        <p class=\"vc-course-description\">\n          \u062f\u0648\u0631\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u0648\u0648\u06a9\u0633\u0644\n        <\/p>\n\n        <div class=\"vc-course-meta\">\n\n          <span class=\"vc-meta-item\">\n            ${clockIcon}\n            ${course.hours}\n          <\/span>\n\n          <span class=\"vc-meta-item\">\n            ${bookIcon}\n            ${course.lessons}\n          <\/span>\n\n          <span class=\"vc-meta-item\">\n            <span class=\"vc-rating\">\u2605<\/span>\n            ${course.rating}\n          <\/span>\n\n        <\/div>\n\n\n        <div class=\"vc-card-footer\">\n\n          <div class=\"vc-price\">\n            ${course.price} \u062a\u0648\u0645\u0627\u0646\n          <\/div>\n\n          <button\n            type=\"button\"\n            class=\"vc-cart-button\"\n            disabled\n            title=\"\u062f\u0631 \u0646\u0633\u062e\u0647 \u0646\u0645\u0627\u06cc\u0634\u06cc \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u0627\u0633\u062a\"\n          >\n            ${cartIcon}\n            \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n    `;\n\n    grid.appendChild(card);\n\n  });\n\n\n  \/* ========================================\n     SEARCH & CATEGORY FILTERS\n  ======================================== *\/\n\n  const categoryButtons = section.querySelectorAll(\n    \".vc-category\"\n  );\n\n  const searchInput = section.querySelector(\n    \"#vc-preview-search\"\n  );\n\n  const allButton = section.querySelector(\n    \"#vc-preview-all\"\n  );\n\n  const emptyState = section.querySelector(\n    \"#vc-preview-empty\"\n  );\n\n  let selectedCategory = \"all\";\n\n  function normalize(value) {\n    return String(value || \"\")\n      .trim()\n      .toLowerCase()\n      .replace(\/\u064a\/g, \"\u06cc\")\n      .replace(\/\u0643\/g, \"\u06a9\");\n  }\n\n  function updateCards() {\n\n    const query = normalize(searchInput.value);\n    let visible = 0;\n\n    grid.querySelectorAll(\".vc-card\").forEach(\n      function(card) {\n\n        const category = card.dataset.category;\n        const title = normalize(card.dataset.title);\n\n        const matchesCategory =\n          selectedCategory === \"all\" ||\n          category === selectedCategory;\n\n        const matchesSearch =\n          !query || title.includes(query);\n\n        const show =\n          matchesCategory && matchesSearch;\n\n        card.style.display = show ? \"\" : \"none\";\n\n        if (show) visible++;\n\n      }\n    );\n\n    emptyState.style.display =\n      visible === 0 ? \"block\" : \"none\";\n  }\n\n  categoryButtons.forEach(function(button) {\n\n    button.addEventListener(\"click\", function() {\n\n      categoryButtons.forEach(function(item) {\n        item.classList.remove(\"is-active\");\n      });\n\n      button.classList.add(\"is-active\");\n\n      selectedCategory = button.dataset.category;\n\n      updateCards();\n\n    });\n\n  });\n\n  searchInput.addEventListener(\n    \"input\",\n    updateCards\n  );\n\n  allButton.addEventListener(\"click\", function() {\n\n    selectedCategory = \"all\";\n    searchInput.value = \"\";\n\n    categoryButtons.forEach(function(button) {\n      button.classList.toggle(\n        \"is-active\",\n        button.dataset.category === \"all\"\n      );\n    });\n\n    updateCards();\n\n  });\n\n})();\n<\/script>\n\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d14f509 e-flex e-con-boxed e-con e-parent\" data-id=\"d14f509\" 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-7e47daa elementor-widget elementor-widget-html\" data-id=\"7e47daa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<section id=\"voxel-story\" dir=\"rtl\">\n\n<style>\n\/* =====================================\n   VOXEL STORY - GLOBAL\n===================================== *\/\n\n#voxel-story {\n  --vs-bg: #f5eee2;\n  --vs-green: #3e6046;\n  --vs-text: #96918d;\n\n  position: relative;\n  width: 100%;\n  margin: 0;\n  padding: 100px 0 135px;\n  background: var(--vs-bg);\n  font-family: inherit;\n  direction: rtl;\n}\n\n#voxel-story *,\n#voxel-story *::before,\n#voxel-story *::after {\n  box-sizing: border-box;\n}\n\n\/* =====================================\n   MAIN CONTAINER\n===================================== *\/\n\n#voxel-story .vs-container {\n  width: calc(100% - 108px);\n  max-width: 1500px;\n  margin: 0 auto;\n\n  display: grid;\n  grid-template-columns: 1.4fr 1fr;\n  align-items: center;\n  gap: 22px;\n}\n\n\/* =====================================\n   TEXT SECTION\n===================================== *\/\n\n#voxel-story .vs-content {\n  min-width: 0;\n  text-align: right;\n}\n\n#voxel-story .vs-title {\n  margin: 0 0 12px;\n  padding: 0;\n  color: var(--vs-green);\n  font-size: clamp(27px, 2.7vw, 42px);\n  font-weight: 900;\n  line-height: 1.5;\n  text-align: right;\n}\n\n#voxel-story .vs-description {\n  margin: 0;\n  padding: 0;\n  color: var(--vs-text);\n  font-size: clamp(14px, 1.12vw, 18px);\n  font-weight: 500;\n  line-height: 2;\n  text-align: right;\n}\n\n\/* =====================================\n   IMAGE SECTION\n===================================== *\/\n\n#voxel-story .vs-image {\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  border-radius: 9px;\n}\n\n#voxel-story .vs-image img {\n  display: block;\n  width: 100%;\n  height: auto;\n  aspect-ratio: 1.63 \/ 1;\n  object-fit: cover;\n  object-position: center;\n  border-radius: inherit;\n}\n\n\/* =====================================\n   TABLET\n===================================== *\/\n\n@media (min-width: 768px) and (max-width: 1024px) {\n\n  #voxel-story {\n    padding: 75px 0 95px;\n  }\n\n  #voxel-story .vs-container {\n    width: calc(100% - 65px);\n    grid-template-columns: 1.2fr 1fr;\n    gap: 20px;\n  }\n\n  #voxel-story .vs-title {\n    font-size: 27px;\n  }\n\n  #voxel-story .vs-description {\n    font-size: 13px;\n    line-height: 1.95;\n  }\n}\n\n\/* =====================================\n   MOBILE\n===================================== *\/\n\n@media (max-width: 767px) {\n\n  #voxel-story {\n    padding: 45px 0 90px;\n  }\n\n  #voxel-story .vs-container {\n    width: calc(100% - 34px);\n    max-width: 480px;\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n  }\n\n  #voxel-story .vs-content {\n    display: contents;\n  }\n\n  \/* Title on top *\/\n\n  #voxel-story .vs-title {\n    order: 1;\n    margin: 0 0 17px;\n    font-size: clamp(27px, 7vw, 34px);\n    font-weight: 900;\n    line-height: 1.5;\n    text-align: right;\n  }\n\n  \/* Image in the middle *\/\n\n  #voxel-story .vs-image {\n    order: 2;\n    width: 100%;\n    border-radius: 8px;\n    margin: 0 0 16px;\n  }\n\n  #voxel-story .vs-image img {\n    width: 100%;\n    aspect-ratio: 1.55 \/ 1;\n    height: auto;\n    object-fit: cover;\n  }\n\n  \/* Description below image *\/\n\n  #voxel-story .vs-description {\n    order: 3;\n    margin: 0;\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 2.05;\n    text-align: right;\n    color: var(--vs-text);\n  }\n}\n\n\/* =====================================\n   SMALL MOBILE\n===================================== *\/\n\n@media (max-width: 390px) {\n\n  #voxel-story .vs-title {\n    font-size: 26px;\n  }\n\n  #voxel-story .vs-description {\n    font-size: 12px;\n    line-height: 2.1;\n  }\n}\n\n<\/style>\n\n\n<!-- =====================================\n     STORY CONTENT\n===================================== -->\n\n<div class=\"vs-container\">\n\n  <div class=\"vs-content\">\n\n    <h2 class=\"vs-title\">\n      \u062f\u0627\u0633\u062a\u0627\u0646 \u0648\u0648\u06a9\u0633\u0644\n    <\/h2>\n\n    <p class=\"vs-description\">\n      \u0648\u0648\u06a9\u0633\u0644 \u0627\u0633\u062a\u0648\u062f\u06cc\u0648 \u0627\u0632 \u06cc\u06a9 \u062f\u063a\u062f\u063a\u0647 \u0633\u0627\u062f\u0647 \u0634\u06a9\u0644 \u06af\u0631\u0641\u062a\u061b \u0627\u06cc\u0646\u06a9\u0647\n      \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u0646\u0628\u0627\u06cc\u062f \u0628\u0647 \u062a\u0645\u0627\u0634\u0627\u06cc \u0686\u0646\u062f\n      \u0633\u0627\u0639\u062a \u0648\u06cc\u062f\u06cc\u0648 \u0648 \u062d\u0641\u0638 \u06a9\u0631\u062f\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0645\u062d\u062f\u0648\u062f \u0634\u0648\u062f.\n      Voxel \u0628\u0627 \u062a\u0645\u0631\u06a9\u0632 \u0628\u0631 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0645\u062d\u0648\u0631\u060c\n      \u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u0645\u062f\u0631\u0633\n      \u062a\u0644\u0627\u0634 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0645\u0633\u06cc\u0631 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0631\u0627 \u0628\u0647 \u062a\u062c\u0631\u0628\u0647\u200c\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc\n      \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u062f\u061b \u0645\u0633\u06cc\u0631\u06cc \u06a9\u0647 \u062f\u0627\u0646\u0634\u062c\u0648\n      \u0628\u062a\u0648\u0627\u0646\u062f \u0622\u0645\u0648\u062e\u062a\u0647\u200c\u0647\u0627\u06cc\u0634 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0628\u0647 \u06a9\u0627\u0631 \u0628\u06af\u06cc\u0631\u062f\u060c\n      \u0645\u0647\u0627\u0631\u062a \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u062f \u0648 \u0628\u0627 \u0622\u0645\u0627\u062f\u06af\u06cc\n      \u0628\u06cc\u0634\u062a\u0631\u06cc \u0648\u0627\u0631\u062f \u0628\u0627\u0632\u0627\u0631 \u06a9\u0627\u0631 \u0634\u0648\u062f.\n      Voxel \u0627\u0645\u0631\u0648\u0632 \u062f\u0631 \u0645\u0633\u06cc\u0631 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0645\u0631\u062c\u0639 \u062a\u062e\u0635\u0635\u06cc\n      \u0628\u0631\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f\u061b\n      \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0622\u0645\u0648\u0632\u0634\u060c \u062a\u062c\u0631\u0628\u0647 \u0648 \u0645\u0633\u06cc\u0631 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u062f\u0631 \u06a9\u0646\u0627\u0631\n      \u0647\u0645 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u0646\u062f.\n    <\/p>\n\n  <\/div>\n\n\n  <!-- STORY IMAGE -->\n\n  <div class=\"vs-image\">\n\n    <img\n      src=\"https:\/\/voxelstudios.net\/wp-content\/uploads\/2026\/10\/photo_2026-10-18_13-44-42.jpg\"\n      alt=\"\u062f\u0627\u0633\u062a\u0627\u0646 \u0648\u0648\u06a9\u0633\u0644 \u0627\u0633\u062a\u0648\u062f\u06cc\u0648\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    >\n\n  <\/div>\n\n<\/div>\n\n<\/section>\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-c21dbf2 e-flex e-con-boxed e-con e-parent\" data-id=\"c21dbf2\" 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-850f0b3 elementor-widget elementor-widget-html\" data-id=\"850f0b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<section id=\"voxel-latest-videos\" dir=\"rtl\">\n\n<style>\n\/* =====================================\n   VOXEL LATEST VIDEOS\n===================================== *\/\n\n#voxel-latest-videos {\n  --vv-bg: #f5eee2;\n  --vv-green: #3e6046;\n  --vv-placeholder: #e5d9c7;\n  --vv-icon: #b8aa98;\n\n  position: relative;\n  width: 100%;\n  margin: 0;\n  padding: 75px 0 115px;\n  background: var(--vv-bg);\n  font-family: inherit;\n  direction: rtl;\n}\n\n#voxel-latest-videos *,\n#voxel-latest-videos *::before,\n#voxel-latest-videos *::after {\n  box-sizing: border-box;\n}\n\n\/* =====================================\n   CONTAINER\n===================================== *\/\n\n#voxel-latest-videos .vv-container {\n  width: calc(100% - 108px);\n  max-width: 1500px;\n  margin: 0 auto;\n}\n\n\/* =====================================\n   SECTION TITLE\n===================================== *\/\n\n#voxel-latest-videos .vv-title {\n  margin: 0 0 17px;\n  padding: 0;\n  color: var(--vv-green);\n  font-size: clamp(27px, 2.7vw, 42px);\n  font-weight: 900;\n  line-height: 1.5;\n  text-align: right;\n}\n\n\/* =====================================\n   VIDEO GRID - DESKTOP\n===================================== *\/\n\n#voxel-latest-videos .vv-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 12px;\n  width: 100%;\n}\n\n\/* =====================================\n   VIDEO PLACEHOLDERS\n===================================== *\/\n\n#voxel-latest-videos .vv-video-card {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 1.72 \/ 1;\n  border-radius: 9px;\n  overflow: hidden;\n  background: var(--vv-placeholder);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\/* Placeholder image icon *\/\n\n#voxel-latest-videos .vv-placeholder-icon {\n  width: 60px;\n  height: 60px;\n  color: var(--vv-icon);\n  fill: currentColor;\n  display: block;\n}\n\n\/* =====================================\n   FOOTER BUTTON\n===================================== *\/\n\n#voxel-latest-videos .vv-footer {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: 13px;\n}\n\n#voxel-latest-videos .vv-all-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 30px;\n  padding: 5px 17px;\n\n  border: 1px solid var(--vv-green);\n  border-radius: 3px;\n  background: transparent;\n  color: var(--vv-green);\n\n  text-decoration: none;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1.3;\n  white-space: nowrap;\n  transition: background .2s, color .2s;\n}\n\n#voxel-latest-videos .vv-all-button:hover {\n  background: var(--vv-green);\n  color: #ffffff;\n}\n\n\/* =====================================\n   TABLET\n===================================== *\/\n\n@media (min-width: 768px) and (max-width: 1024px) {\n\n  #voxel-latest-videos {\n    padding: 65px 0 90px;\n  }\n\n  #voxel-latest-videos .vv-container {\n    width: calc(100% - 65px);\n  }\n\n  #voxel-latest-videos .vv-title {\n    font-size: 27px;\n  }\n\n  #voxel-latest-videos .vv-placeholder-icon {\n    width: 48px;\n    height: 48px;\n  }\n}\n\n\/* =====================================\n   MOBILE\n===================================== *\/\n\n@media (max-width: 767px) {\n\n  #voxel-latest-videos {\n    padding: 45px 0 80px;\n  }\n\n  #voxel-latest-videos .vv-container {\n    width: calc(100% - 34px);\n    max-width: 480px;\n  }\n\n  #voxel-latest-videos .vv-title {\n    margin-bottom: 17px;\n    font-size: clamp(27px, 7vw, 34px);\n    line-height: 1.5;\n  }\n\n  #voxel-latest-videos .vv-grid {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  #voxel-latest-videos .vv-video-card {\n    aspect-ratio: 1.72 \/ 1;\n    border-radius: 8px;\n  }\n\n  #voxel-latest-videos .vv-placeholder-icon {\n    width: 59px;\n    height: 59px;\n  }\n\n  \/* Button on right in RTL *\/\n\n  #voxel-latest-videos .vv-footer {\n    justify-content: flex-start;\n    margin-top: 12px;\n  }\n\n  #voxel-latest-videos .vv-all-button {\n    min-height: 29px;\n    padding: 5px 15px;\n    font-size: 11px;\n  }\n}\n\n\/* =====================================\n   SMALL MOBILE\n===================================== *\/\n\n@media (max-width: 390px) {\n\n  #voxel-latest-videos .vv-title {\n    font-size: 26px;\n  }\n\n  #voxel-latest-videos .vv-placeholder-icon {\n    width: 53px;\n    height: 53px;\n  }\n}\n\n<\/style>\n\n\n<div class=\"vv-container\">\n\n  <!-- SECTION TITLE -->\n\n  <h2 class=\"vv-title\">\n    \u0622\u062e\u0631\u06cc\u0646 \u0648\u06cc\u062f\u0626\u0648\u0647\u0627\n  <\/h2>\n\n\n  <!-- VIDEO PLACEHOLDERS -->\n\n  <div class=\"vv-grid\">\n\n    <!-- VIDEO 1 -->\n    <div class=\"vv-video-card\" aria-label=\"\u062c\u0627\u06cc\u06af\u0627\u0647 \u0648\u06cc\u062f\u06cc\u0648\u06cc \u0627\u0648\u0644\">\n\n      <svg\n        class=\"vv-placeholder-icon\"\n        viewBox=\"0 0 64 64\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"35\" cy=\"18\" r=\"9\"\/>\n        <path d=\"M8 43L22 29Q25 26 28 29L34 35L44 25Q47 22 50 25L59 35V49Q59 53 55 53H12Q8 53 8 49Z\"\/>\n      <\/svg>\n\n    <\/div>\n\n\n    <!-- VIDEO 2 -->\n    <div class=\"vv-video-card\" aria-label=\"\u062c\u0627\u06cc\u06af\u0627\u0647 \u0648\u06cc\u062f\u06cc\u0648\u06cc \u062f\u0648\u0645\">\n\n      <svg\n        class=\"vv-placeholder-icon\"\n        viewBox=\"0 0 64 64\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"35\" cy=\"18\" r=\"9\"\/>\n        <path d=\"M8 43L22 29Q25 26 28 29L34 35L44 25Q47 22 50 25L59 35V49Q59 53 55 53H12Q8 53 8 49Z\"\/>\n      <\/svg>\n\n    <\/div>\n\n\n    <!-- VIDEO 3 -->\n    <div class=\"vv-video-card\" aria-label=\"\u062c\u0627\u06cc\u06af\u0627\u0647 \u0648\u06cc\u062f\u06cc\u0648\u06cc \u0633\u0648\u0645\">\n\n      <svg\n        class=\"vv-placeholder-icon\"\n        viewBox=\"0 0 64 64\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"35\" cy=\"18\" r=\"9\"\/>\n        <path d=\"M8 43L22 29Q25 26 28 29L34 35L44 25Q47 22 50 25L59 35V49Q59 53 55 53H12Q8 53 8 49Z\"\/>\n      <\/svg>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- FOOTER BUTTON -->\n\n  <div class=\"vv-footer\">\n\n    <a\n      href=\"#\"\n      class=\"vv-all-button\"\n      aria-label=\"\u0646\u0645\u0627\u06cc\u0634 \u0647\u0645\u0647 \u0648\u06cc\u062f\u0626\u0648\u0647\u0627\"\n    >\n      \u0646\u0645\u0627\u06cc\u0634 \u0647\u0645\u0647 \u0648\u06cc\u062f\u0626\u0648\u0647\u0627\n    <\/a>\n\n  <\/div>\n\n<\/div>\n\n<\/section>\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-f923f55 e-flex e-con-boxed e-con e-parent\" data-id=\"f923f55\" 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-40406a1 elementor-widget elementor-widget-html\" data-id=\"40406a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<section id=\"voxel-social\" dir=\"rtl\">\n\n<style>\n\/* =====================================\n   VOXEL SOCIAL MEDIA SECTION\n===================================== *\/\n\n#voxel-social {\n  --vs-bg: #f5eee2;\n\n  position: relative;\n  width: 100%;\n  margin: 0;\n  padding: 90px 0 110px;\n  background: var(--vs-bg);\n  font-family: inherit;\n  direction: rtl;\n}\n\n#voxel-social *,\n#voxel-social *::before,\n#voxel-social *::after {\n  box-sizing: border-box;\n}\n\n\/* =====================================\n   MAIN CONTAINER\n===================================== *\/\n\n#voxel-social .vs-container {\n  width: calc(100% - 108px);\n  max-width: 1500px;\n  margin: 0 auto;\n\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 14px;\n}\n\n\/* =====================================\n   SOCIAL CARD\n===================================== *\/\n\n#voxel-social .vs-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  width: 100%;\n  aspect-ratio: 3.95 \/ 1;\n\n  overflow: hidden;\n  border-radius: 9px;\n  text-decoration: none;\n\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n\n  transition: transform .25s ease;\n}\n\n#voxel-social .vs-card:hover {\n  transform: translateY(-3px);\n}\n\n\/* =====================================\n   BACKGROUND IMAGES\n===================================== *\/\n\n#voxel-social .vs-instagram {\n  background-image: url(\n    \"https:\/\/voxelstudios.net\/wp-content\/uploads\/2026\/10\/instagram.webp\"\n  );\n}\n\n#voxel-social .vs-telegram {\n  background-image: url(\n    \"https:\/\/voxelstudios.net\/wp-content\/uploads\/2026\/10\/telegram.webp\"\n  );\n}\n\n\/* =====================================\n   CONTENT\n===================================== *\/\n\n#voxel-social .vs-content {\n  position: relative;\n  z-index: 2;\n\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 7px;\n  padding: 10px 12px;\n}\n\n\/* Social names *\/\n\n#voxel-social .vs-name {\n  margin: 0;\n  padding: 0;\n\n  color: #ffffff;\n  font-family: Arial, sans-serif;\n  font-size: clamp(34px, 3.8vw, 59px);\n  font-weight: 700;\n  line-height: 1;\n  letter-spacing: -1px;\n  text-align: center;\n}\n\n\/* Instagram font style *\/\n\n#voxel-social .vs-instagram .vs-name {\n  font-family: Arial, sans-serif;\n  font-weight: 800;\n  letter-spacing: -2px;\n}\n\n\/* =====================================\n   FOLLOW BUTTON\n===================================== *\/\n\n#voxel-social .vs-follow {\n  width: 49%;\n  min-height: 30px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 3px;\n  background: #ffffff;\n  color: #111111;\n\n  font-family: Arial, sans-serif;\n  font-size: 13px;\n  font-weight: 800;\n  line-height: 1.2;\n  text-align: center;\n\n  box-shadow: 0 3px 12px rgba(0,0,0,.12);\n  transition: background .2s ease;\n}\n\n#voxel-social .vs-card:hover .vs-follow {\n  background: #f1f1f1;\n}\n\n\/* =====================================\n   TABLET\n===================================== *\/\n\n@media (min-width: 768px) and (max-width: 1024px) {\n\n  #voxel-social {\n    padding: 75px 0 95px;\n  }\n\n  #voxel-social .vs-container {\n    width: calc(100% - 65px);\n    gap: 12px;\n  }\n\n  #voxel-social .vs-name {\n    font-size: clamp(28px, 4vw, 43px);\n  }\n\n  #voxel-social .vs-follow {\n    min-height: 27px;\n    font-size: 11px;\n  }\n}\n\n\/* =====================================\n   MOBILE\n===================================== *\/\n\n@media (max-width: 767px) {\n\n  #voxel-social {\n    padding: 45px 0 85px;\n  }\n\n  #voxel-social .vs-container {\n    width: calc(100% - 34px);\n    max-width: 480px;\n\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  #voxel-social .vs-card {\n    width: 100%;\n    aspect-ratio: 3.9 \/ 1;\n    border-radius: 7px;\n  }\n\n  #voxel-social .vs-content {\n    gap: 4px;\n    padding: 6px 10px;\n  }\n\n  #voxel-social .vs-name {\n    font-size: clamp(27px, 8vw, 45px);\n    line-height: 1;\n  }\n\n  #voxel-social .vs-follow {\n    width: 50%;\n    min-height: 22px;\n    font-size: 9px;\n    border-radius: 2px;\n  }\n}\n\n\/* =====================================\n   SMALL MOBILE\n===================================== *\/\n\n@media (max-width: 390px) {\n\n  #voxel-social .vs-name {\n    font-size: 27px;\n  }\n\n  #voxel-social .vs-follow {\n    min-height: 20px;\n    font-size: 8px;\n  }\n}\n\n<\/style>\n\n\n<!-- =====================================\n     SOCIAL CARDS\n===================================== -->\n\n<div class=\"vs-container\">\n\n  <!-- INSTAGRAM - LEFT ON DESKTOP -->\n\n  <a\n    class=\"vs-card vs-instagram\"\n    href=\"#\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    aria-label=\"\u0635\u0641\u062d\u0647 \u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645 \u0648\u0648\u06a9\u0633\u0644\"\n  >\n\n    <div class=\"vs-content\">\n\n     \n    <\/div>\n\n  <\/a>\n\n\n  <!-- TELEGRAM - RIGHT ON DESKTOP -->\n\n  <a\n    class=\"vs-card vs-telegram\"\n    href=\"#\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    aria-label=\"\u06a9\u0627\u0646\u0627\u0644 \u062a\u0644\u06af\u0631\u0627\u0645 \u0648\u0648\u06a9\u0633\u0644\"\n  >\n\n    <div class=\"vs-content\">\n\n    \n\n    <\/div>\n\n  <\/a>\n\n<\/div>\n\n<\/section>\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>\u0627\u0632 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u062a\u0627 \u0628\u0627\u0632\u0627\u0631 \u06a9\u0627\u0631 \u0628\u0631 \u067e\u0627\u06cc\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0627\u0632\u0627\u0631 \u06a9\u0627\u0631\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0645\u0646\u062a\u0648\u0631\u0634\u06cc\u067e \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u062f\u0648\u0631\u0647\u200c\u0647\u0627 \u0647\u0645\u0647 \u062f\u0648\u0631\u0647\u200c\u0647\u0627 \u0637\u0631\u0627\u062d\u06cc \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0645\u062f\u0644 \u0633\u0627\u0632\u06cc \u0637\u0631\u0627\u062d\u06cc \u062f\u0627\u062e\u0644\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u067e\u0633\u062a \u067e\u0631\u0648\u062f\u0627\u06a9\u0634\u0646 \u0646\u0648\u0631\u067e\u0631\u062f\u0627\u0632\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0648\u0631\u0647\u200c\u0627\u06cc \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0634\u062e\u0635\u0627\u062a \u067e\u06cc\u062f\u0627 \u0646\u0634\u062f. \u062f\u0627\u0633\u062a\u0627\u0646 \u0648\u0648\u06a9\u0633\u0644 \u0648\u0648\u06a9\u0633\u0644 \u0627\u0633\u062a\u0648\u062f\u06cc\u0648 \u0627\u0632 \u06cc\u06a9 \u062f\u063a\u062f\u063a\u0647 \u0633\u0627\u062f\u0647 \u0634\u06a9\u0644 \u06af\u0631\u0641\u062a\u061b \u0627\u06cc\u0646\u06a9\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u0646\u0628\u0627\u06cc\u062f \u0628\u0647 \u062a\u0645\u0627\u0634\u0627\u06cc [&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-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/voxelstudios.net\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/voxelstudios.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/voxelstudios.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/voxelstudios.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/voxelstudios.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":9,"href":"https:\/\/voxelstudios.net\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/voxelstudios.net\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/69"}],"wp:attachment":[{"href":"https:\/\/voxelstudios.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}