{"id":15,"date":"2025-10-15T12:03:51","date_gmt":"2025-10-15T12:03:51","guid":{"rendered":"https:\/\/asamcc.com\/?page_id=15"},"modified":"2025-10-19T08:11:39","modified_gmt":"2025-10-19T08:11:39","slug":"%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9%d9%86%d8%a7","status":"publish","type":"page","link":"https:\/\/asamcc.com\/en\/%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9%d9%86%d8%a7\/","title":{"rendered":"Our projects"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"15\" class=\"elementor elementor-15\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-223c664 animated-slow e-flex e-con-boxed elementor-invisible e-con e-parent\" data-id=\"223c664\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInDown&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-602a6ac animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"602a6ac\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Al Sarh Al Mutqan Contracting Co.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d16d312 animated-slow elementor-invisible elementor-widget elementor-widget-ha-gradient-heading happy-addon ha-gradient-heading\" data-id=\"d16d312\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"ha-gradient-heading.default\">\n\t\t\t\t\t<h2 class=\"ha-gradient-heading\">Our projects<\/h2>\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-9ac0471 e-flex e-con-boxed e-con e-parent\" data-id=\"9ac0471\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7432fdd elementor-widget elementor-widget-html\" data-id=\"7432fdd\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Vertical Scroll Progress (sticky left-bottom) -->\r\n<div class=\"vp-track\" role=\"progressbar\" aria-label=\"Page progress\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\">\r\n  <button class=\"vp-hit\" title=\"Back to top\"><\/button>\r\n  <div class=\"vp-rail\">\r\n    <div class=\"vp-fill\"><\/div>\r\n  <\/div>\r\n  <div class=\"vp-badge\" aria-hidden=\"true\">0%<\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* ===== Vertical Progress \u2014 colors: #142F5D, black, white ===== *\/\r\n:root{\r\n  --vp-navy: #142F5D;\r\n  --vp-ink: rgba(0,0,0,.85);\r\n  --vp-rail: rgba(20,47,93,.18);\r\n  --vp-soft: rgba(20,47,93,.08);\r\n}\r\n\r\n.vp-track{\r\n  position: fixed;\r\n  inset-inline-start: 16px;   \/* left *\/\r\n  inset-block-end: 16px;      \/* bottom *\/\r\n  z-index: 9999;\r\n  width: 18px;                \/* rail width incl. outline *\/\r\n  display: grid;\r\n  align-content: end;\r\n  justify-items: center;\r\n  gap: 8px;\r\n  pointer-events: none;       \/* interactions go to the transparent button *\/\r\n  user-select: none;\r\n}\r\n\r\n\/* Big invisible hit area so users can click easily (go to top) *\/\r\n.vp-hit{\r\n  position: absolute;\r\n  inset: -8px -4px -8px -8px;  \/* expand hit area *\/\r\n  background: transparent;\r\n  border: 0;\r\n  cursor: pointer;\r\n  pointer-events: auto;\r\n}\r\n\r\n\/* Rail + fill *\/\r\n.vp-rail{\r\n  width: 10px;\r\n  height: 100%;\r\n  background: linear-gradient(180deg, #fff, #fff) padding-box;\r\n  border: 1px solid var(--vp-rail);\r\n  border-radius: 999px;\r\n  overflow: hidden;\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);\r\n}\r\n\r\n.vp-fill{\r\n  width: 100%;\r\n  height: 0%;\r\n  background: linear-gradient(180deg, var(--vp-navy), var(--vp-navy));\r\n  border-radius: inherit;\r\n  transform-origin: bottom center;\r\n  transition: height .15s linear;\r\n}\r\n\r\n\/* % badge *\/\r\n.vp-badge{\r\n  font: 700 12px\/1 system-ui, -apple-system, \"Segoe UI\", Arial, sans-serif;\r\n  color: #fff;\r\n  background: var(--vp-navy);\r\n  border: 1px solid rgba(20,47,93,.28);\r\n  border-radius: 999px;\r\n  padding: 6px 8px;\r\n  box-shadow: 0 6px 16px rgba(0,0,0,.12);\r\n  pointer-events: none;\r\n  translate: 0 0;\r\n  transition: translate .15s ease;\r\n}\r\n\r\n\r\n\/* High-contrast\/light surfaces under the tracker *\/\r\n@supports(backdrop-filter: blur(6px)){\r\n  .vp-badge{\r\n    background: color-mix(in oklab, var(--vp-navy) 85%, #000);\r\n    backdrop-filter: blur(6px);\r\n  }\r\n}\r\n\r\n\/* Respect reduced motion *\/\r\n@media (prefers-reduced-motion: reduce){\r\n  .vp-fill{ transition: none; }\r\n  .vp-badge{ transition: none; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n  const track = document.querySelector('.vp-track');\r\n  const fill  = track.querySelector('.vp-fill');\r\n  const badge = track.querySelector('.vp-badge');\r\n  const hit   = track.querySelector('.vp-hit');\r\n\r\n  function clamp(n, a, b){ return Math.max(a, Math.min(b, n)); }\r\n\r\n  function updateProgress(){\r\n    const doc = document.documentElement;\r\n    const body = document.body;\r\n    const scrollTop = doc.scrollTop || body.scrollTop;\r\n    const scrollHeight = Math.max(\r\n      body.scrollHeight, doc.scrollHeight,\r\n      body.offsetHeight, doc.offsetHeight,\r\n      body.clientHeight, doc.clientHeight\r\n    );\r\n    const vh = doc.clientHeight;\r\n    const maxScroll = Math.max(1, scrollHeight - vh);\r\n    const ratio = clamp(scrollTop \/ maxScroll, 0, 1);\r\n    const pct = Math.round(ratio * 100);\r\n\r\n    fill.style.height = (pct + '%');\r\n    badge.textContent = pct + '%';\r\n    track.setAttribute('aria-valuenow', String(pct));\r\n  }\r\n\r\n  function toTop(){\r\n    window.scrollTo({ top: 0, behavior: 'smooth' });\r\n  }\r\n\r\n  \/\/ Bind\r\n  document.addEventListener('scroll', updateProgress, { passive: true });\r\n  window.addEventListener('resize', updateProgress);\r\n  window.addEventListener('load', updateProgress);\r\n  hit.addEventListener('click', toTop);\r\n\r\n  \/\/ Init\r\n  updateProgress();\r\n})();\r\n<\/script>\r\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-27a2235 e-flex e-con-boxed e-con e-parent\" data-id=\"27a2235\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db0d6a2 elementor-widget elementor-widget-shortcode\" data-id=\"db0d6a2\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n  <!-- ========== Variant 1 \u2014 Pro (No Buttons \/ No Chips \/ No Navy Border) ========== -->\n  <section id=\"fence_rtfcfE\" class=\"fence v1 v1-pro clean\" dir=\"ltr\" aria-label=\"Fencing works\">\n    <div class=\"wrap\">\n      <div class=\"text reveal-up\">\n        <span class=\"eyebrow\">Specialized services<\/span>\n        <h2>\n          Fencing works\n          <i class=\"h-underline\" aria-hidden=\"true\"><\/i>\n        <\/h2>\n        <p>\n          Fencing works are one of the most prominent specialties of Al-Sarh Al-Mutqan Company, as we have advanced experience in designing, implementing and installing multiple types of fences that serve various industrial, residential and governmental sectors.\n        <\/p>\n\n        <div class=\"cols\">\n          <div class=\"col\">\n            <h3>Types of fencing<\/h3>\n            <ul class=\"list reveal-stagger\">\n              <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Metal fence: galvanized or painted iron with protection from rust and weathering.<\/li>\n              <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Mesh fencing: for farms, playgrounds and public facilities with razor\/razor wire option.<\/li>\n              <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Security fence: for sensitive facilities with gates and control systems.<\/li>\n              <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Entry and exit gates: manual or automatic according to requirements.<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"col\">\n            <h3>Implementation features<\/h3>\n            <ul class=\"list reveal-stagger\">\n              <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Materials that conform to approved standard specifications.<\/li>\n              <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Specialized technicians with long experience.<\/li>\n              <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Commitment to integrity and engineering standards.<\/li>\n              <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Speed \u200b\u200bof completion without compromising quality.<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <figure class=\"media pro\">\n                  <div class=\"fs-slider\" aria-live=\"polite\">\n                          <img src=\"https:\/\/asamcc.com\/wp-content\/uploads\/2025\/10\/\u0635\u0648\u0631\u0629-\u0648\u0627\u062a\u0633\u0627\u0628-\u0628\u062a\u0627\u0631\u064a\u062e-2025-10-11-\u0641\u064a-19.48.09_91859bd8.jpg\"\n                   alt=\"\u062a\u0646\u0641\u064a\u0630 \u0633\u064a\u0627\u062c \u2014 \u0635\u0648\u0631\u0629 \u0645\u0639\u0631\u0636\"\n                   class=\"fs-slide is-active\"\n                   loading=\"lazy\" decoding=\"async\">\n                          <img src=\"https:\/\/asamcc.com\/wp-content\/uploads\/2025\/10\/\u0635\u0648\u0631\u0629-\u0648\u0627\u062a\u0633\u0627\u0628-\u0628\u062a\u0627\u0631\u064a\u062e-2025-10-11-\u0641\u064a-19.48.00_d1a6cf86.jpg\"\n                   alt=\"\u062a\u0646\u0641\u064a\u0630 \u0633\u064a\u0627\u062c \u2014 \u0635\u0648\u0631\u0629 \u0645\u0639\u0631\u0636\"\n                   class=\"fs-slide\"\n                   loading=\"lazy\" decoding=\"async\">\n                          <img src=\"https:\/\/asamcc.com\/wp-content\/uploads\/2025\/10\/\u0635\u0648\u0631\u0629-\u0648\u0627\u062a\u0633\u0627\u0628-\u0628\u062a\u0627\u0631\u064a\u062e-2025-10-11-\u0641\u064a-19.48.00_37b45772-864x1536.jpg\"\n                   alt=\"\u062a\u0646\u0641\u064a\u0630 \u0633\u064a\u0627\u062c \u2014 \u0635\u0648\u0631\u0629 \u0645\u0639\u0631\u0636\"\n                   class=\"fs-slide\"\n                   loading=\"lazy\" decoding=\"async\">\n                          <img src=\"https:\/\/asamcc.com\/wp-content\/uploads\/2025\/10\/\u0635\u0648\u0631\u0629-\u0648\u0627\u062a\u0633\u0627\u0628-\u0628\u062a\u0627\u0631\u064a\u062e-2025-10-11-\u0641\u064a-19.47.59_940f5f6c.jpg\"\n                   alt=\"\u062a\u0646\u0641\u064a\u0630 \u0633\u064a\u0627\u062c \u2014 \u0635\u0648\u0631\u0629 \u0645\u0639\u0631\u0636\"\n                   class=\"fs-slide\"\n                   loading=\"lazy\" decoding=\"async\">\n                          <img src=\"https:\/\/asamcc.com\/wp-content\/uploads\/2025\/10\/\u0635\u0648\u0631\u0629-\u0648\u0627\u062a\u0633\u0627\u0628-\u0628\u062a\u0627\u0631\u064a\u062e-2025-10-11-\u0641\u064a-19.47.59_0cacf51e.jpg\"\n                   alt=\"\u062a\u0646\u0641\u064a\u0630 \u0633\u064a\u0627\u062c \u2014 \u0635\u0648\u0631\u0629 \u0645\u0639\u0631\u0636\"\n                   class=\"fs-slide\"\n                   loading=\"lazy\" decoding=\"async\">\n                      <\/div>\n\n          <!-- Arrows -->\n          <div class=\"fs-arrows\" aria-hidden=\"false\">\n            <button class=\"arrow prev\" type=\"button\" aria-label=\"\u0627\u0644\u0633\u0627\u0628\u0642\">\n              <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15.5 4 7.5 12l8 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <\/button>\n            <button class=\"arrow next\" type=\"button\" aria-label=\"\u0627\u0644\u062a\u0627\u0644\u064a\">\n              <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8.5 4 16.5 12l-8 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <\/button>\n          <\/div>\n\n          <!-- Dots + Progress -->\n          <div class=\"fs-dots\" role=\"tablist\" aria-label=\"\u0634\u0631\u0627\u0626\u062d \u0627\u0644\u0635\u0648\u0631\"><\/div>\n          <div class=\"progress-bar\" role=\"progressbar\" aria-label=\"\u0645\u0624\u0634\u0631 \u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631\"><span><\/span><\/div>\n              <\/figure>\n    <\/div>\n  <\/section>\n\n  <style>\n  \/* ===== Font: Tajawal (weights used: 400\/700\/800) ===== *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700;800&display=swap');\n\n  \/* ===== Palette & base ===== *\/\n  #fence_rtfcfE.v1-pro{\n    --primary:#142F5D; --black:#000; --white:#fff;\n    --ink: color-mix(in oklab, #000 82%, #fff);\n    --ring: color-mix(in oklab, var(--primary) 18%, #000 0%);\n    --soft: rgba(20,47,93,.06);\n    --radius: 20px;\n    --shadow: 0 18px 44px rgba(0,0,0,.08);\n    font-family: 'Tajawal', system-ui, -apple-system, \"Segoe UI\", Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    border: 1px solid var(--ring);\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    overflow: clip;\n  }\n\n  #fence_rtfcfE .wrap{\n    display:grid; grid-template-columns: 1.06fr .94fr;\n    gap: clamp(18px,4vw,44px);\n    padding: clamp(20px,5vw,60px);\n    align-items: center;\n  }\n\n  \/* ===== Text block ===== *\/\n  #fence_rtfcfE .eyebrow{\n    display:inline-block; font-weight:800; font-size: 12px; letter-spacing:.6px;\n    color: var(--primary); background: rgba(20,47,93,.08);\n    border:1px solid rgba(20,47,93,.20);\n    padding: 6px 10px; border-radius: 999px; margin-bottom: 10px;\n  }\n  #fence_rtfcfE h2{\n    margin:0 0 12px; color: var(--primary);\n    font-weight:800; font-size: clamp(26px,3.4vw,44px);\n    position:relative; display:inline-block;\n  }\n  #fence_rtfcfE h2 .h-underline{\n    position:absolute; inset-inline-start:0; inset-block-end:-8px;\n    height:4px; width:0; background: var(--primary); border-radius:4px;\n    animation: underline-reveal .9s .25s ease-out forwards;\n  }\n  @keyframes underline-reveal{ to{ width: 150px; } }\n  #fence_rtfcfE p{ margin:0 0 16px; color: var(--ink); line-height: 1.95; font-size: clamp(14px,1.5vw,18px); }\n\n  \/* ===== Columns & lists ===== *\/\n  #fence_rtfcfE .cols{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }\n  @media (max-width: 820px){ #fence_rtfcfE .cols{ grid-template-columns: 1fr; } }\n  #fence_rtfcfE h3{ margin:6px 0 8px; font-size: clamp(16px,2vw,20px); color:#000; font-weight:800; }\n  #fence_rtfcfE .list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }\n  #fence_rtfcfE .list li{\n    background:#fff; border:1px solid var(--ring); border-radius:12px; padding:12px 14px;\n    display:flex; gap:10px; align-items:flex-start;\n    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;\n  }\n  #fence_rtfcfE .list li:hover{\n    transform: translateY(-2px);\n    box-shadow: 0 12px 26px rgba(0,0,0,.08);\n    border-color: color-mix(in oklab, var(--primary) 34%, #fff);\n    background: linear-gradient(180deg, #fff, #fff);\n  }\n  #fence_rtfcfE .tick{ width:16px; height:16px; flex:0 0 16px; margin-top:3px; background: var(--primary); border-radius:4px; position:relative; }\n  #fence_rtfcfE .tick::after{ content:\"\"; position:absolute; inset:3px 4px 4px 3px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(45deg); }\n\n  \/* ===== Media (image) ===== *\/\n  #fence_rtfcfE .media.pro{\n    position:relative; min-height: 340px; border-radius: 18px; overflow:hidden;\n    background: none; border: none; padding: 0; box-shadow: var(--shadow);\n    cursor: grab;\n  }\n  #fence_rtfcfE .media.pro.is-dragging{ cursor: grabbing; }\n\n  \/* Slider inside media *\/\n  #fence_rtfcfE .fs-slider{ position:absolute; inset:0; }\n  #fence_rtfcfE .fs-slide{\n    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;\n    transform: scale(1.015); filter: saturate(1.03) contrast(1.04);\n    opacity:0; transition: opacity .8s ease, transform .3s ease; will-change: opacity, transform;\n  }\n  #fence_rtfcfE .fs-slide.is-active{ opacity:1; }\n  #fence_rtfcfE .media.pro:hover .fs-slide.is-active{ transform: scale(1.06); }\n\n  \/* Vignette soft *\/\n  #fence_rtfcfE .media.pro::after{\n    content:\"\"; position:absolute; inset:0; border-radius: 0;\n    background: radial-gradient(120% 90% at 70% 20%, rgba(0,0,0,0) 55%, rgba(0,0,0,.06) 100%);\n    pointer-events:none;\n  }\n\n  \/* ===== Dots ===== *\/\n  #fence_rtfcfE .fs-dots{\n    position:absolute; inset-inline-start:50%; inset-block-end: clamp(10px, 2vw, 16px);\n    transform: translateX(-50%);\n    display:flex; gap:10px; padding:6px 10px;\n    background: rgba(255,255,255,.78); border:1px solid rgba(20,47,93,.18);\n    border-radius:999px; box-shadow:0 10px 22px rgba(0,0,0,.08); backdrop-filter: blur(2px);\n    z-index:5;\n  }\n  #fence_rtfcfE .fs-dot{\n    --s: 9px; width:var(--s); height:var(--s); border-radius:999px;\n    background: rgba(20,47,93,.28); outline:2px solid transparent;\n    transition: transform .2s ease, background-color .2s ease, outline-color .2s ease;\n    cursor:pointer;\n  }\n  #fence_rtfcfE .fs-dot.is-active{ background: var(--primary); transform: scale(1.35); outline-color: rgba(20,47,93,.22); }\n\n  \/* ===== Arrows (Glassy) ===== *\/\n  #fence_rtfcfE .fs-arrows{\n    position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;\n    padding-inline: clamp(10px, 3vw, 24px); pointer-events:none; z-index:6;\n  }\n  #fence_rtfcfE .fs-arrows .arrow{\n    pointer-events:auto; width:clamp(46px,5.5vw,60px); height:clamp(46px,5.5vw,60px);\n    display:grid; place-items:center; border-radius:50%;\n    background: rgba(255,255,255,0.55); backdrop-filter: blur(6px) saturate(1.4);\n    border:1px solid rgba(255,255,255,0.6); box-shadow:0 6px 20px rgba(0,0,0,0.12);\n    color:#142F5D; transition: all .25s ease;\n  }\n  #fence_rtfcfE .fs-arrows .arrow svg{ width:clamp(16px,2.2vw,22px); height:auto; stroke-width:2.4; }\n  #fence_rtfcfE .fs-arrows .arrow:hover{\n    background: rgba(20,47,93,0.9); color:#fff; transform: scale(1.08);\n    border-color: rgba(255,255,255,0.75); box-shadow: 0 10px 25px rgba(20,47,93,0.35);\n  }\n  #fence_rtfcfE .fs-arrows .arrow:active{ transform: scale(0.96); opacity:.9; }\n\n  \/* ===== Progress bar ===== *\/\n  #fence_rtfcfE .progress-bar{ position:absolute; inset-inline:0; inset-block-end:0; height:4px; background: rgba(20,47,93,.12); z-index:5; }\n  #fence_rtfcfE .progress-bar span{ display:block; width:0; height:100%; background: var(--primary); transition: width .1s linear; }\n\n  \/* ===== Reveal animations ===== *\/\n  #fence_rtfcfE .reveal-up{ opacity:0; transform: translateY(12px); animation: fade-up .7s ease-out forwards; }\n  #fence_rtfcfE .reveal-stagger > *{ opacity:0; transform: translateY(8px); animation: fade-up .6s ease-out forwards; }\n  #fence_rtfcfE .reveal-stagger > *:nth-child(1){ animation-delay:.05s; }\n  #fence_rtfcfE .reveal-stagger > *:nth-child(2){ animation-delay:.1s; }\n  #fence_rtfcfE .reveal-stagger > *:nth-child(3){ animation-delay:.15s; }\n  #fence_rtfcfE .reveal-stagger > *:nth-child(4){ animation-delay:.2s; }\n  @keyframes fade-up{ to{ opacity:1; transform:none; } }\n\n  \/* ===== Responsive ===== *\/\n  @media (max-width: 1024px){ #fence_rtfcfE .wrap{ grid-template-columns: 1fr; } }\n  @media (max-width: 680px){\n    #fence_rtfcfE .fs-slide{ height:100%; transform:none; }\n    #fence_rtfcfE .fs-dots .fs-dot{ --s: 10px; }\n    #fence_rtfcfE .fs-arrows .arrow{ width:42px; height:42px; }\n    #fence_rtfcfE .fs-arrows .arrow svg{ width:18px; }\n  }\n\n  \/* Reduced motion *\/\n  @media (prefers-reduced-motion: reduce){\n    #fence_rtfcfE .reveal-up, #fence_rtfcfE .reveal-stagger > *{ animation:none !important; opacity:1 !important; transform:none !important; }\n    #fence_rtfcfE .fs-slide{ transition:none !important; }\n  }\n  <\/style>\n\n  <script>\n  (function(){\n    const root   = document.getElementById('fence_rtfcfE');\n    if(!root) return;\n\n    const media  = root.querySelector('.media.pro');\n    const slider = root.querySelector('.fs-slider');\n    const slides = slider ? Array.from(slider.querySelectorAll('.fs-slide')) : [];\n    const prev   = root.querySelector('.fs-arrows .prev');\n    const next   = root.querySelector('.fs-arrows .next');\n    const dotsEl = root.querySelector('.fs-dots');\n    const progEl = root.querySelector('.progress-bar span');\n\n    if (!slides.length) return; \/\/ no gallery -> keep layout only\n\n    \/\/ Build dots\n    slides.forEach((_, k) => {\n      const d = document.createElement('span');\n      d.className = 'fs-dot' + (k===0 ? ' is-active' : '');\n      d.setAttribute('role','tab');\n      d.setAttribute('aria-label','\u0627\u0644\u0630\u0647\u0627\u0628 \u0625\u0644\u0649 \u0627\u0644\u0634\u0631\u064a\u062d\u0629 ' + (k+1));\n      d.addEventListener('click', ()=>{ stop(); show(k); start(); });\n      dotsEl.appendChild(d);\n    });\n    const dots = Array.from(dotsEl.querySelectorAll('.fs-dot'));\n\n    let i=0, auto=null, prog=null, pval=0, down=false, sx=0;\n\n    function activate(idx){\n      slides.forEach((s,k)=>s.classList.toggle('is-active', k===idx));\n      dots.forEach((d,k)=>d.classList.toggle('is-active', k===idx));\n    }\n    function show(idx){\n      const total = slides.length;\n      i = (idx + total) % total;\n      activate(i); pval=0;\n    }\n    function nextFn(){ show(i+1); }\n    function prevFn(){ show(i-1); }\n\n    function start(){\n      stop();\n      auto = setInterval(nextFn, 4000);\n      prog = setInterval(()=>{\n        pval += 2.5; \/\/ 0..100 over 4s\n        if (progEl) progEl.style.width = Math.min(pval,100)+'%';\n        if (pval >= 100) pval = 0;\n      }, 100);\n    }\n    function stop(){ clearInterval(auto); clearInterval(prog); }\n\n    \/\/ Buttons\n    if (prev) prev.addEventListener('click', ()=>{ stop(); prevFn(); start(); });\n    if (next) next.addEventListener('click', ()=>{ stop(); nextFn(); start(); });\n\n    \/\/ Wheel\n    media.addEventListener('wheel', (e)=>{\n      e.preventDefault(); stop();\n      (e.deltaY > 0 || e.deltaX > 0) ? nextFn() : prevFn();\n      start();\n    }, {passive:false});\n\n    \/\/ Drag (Pointer)\n    media.addEventListener('pointerdown', (e)=>{ down=true; sx=e.clientX; media.classList.add('is-dragging'); stop(); }, {passive:false});\n    window.addEventListener('pointerup', (e)=>{\n      if(!down) return;\n      down=false; media.classList.remove('is-dragging');\n      const dx = e.clientX - sx;\n      if (Math.abs(dx) > 50) { dx > 0 ? prevFn() : nextFn(); }\n      start();\n    }, {passive:true});\n    window.addEventListener('pointermove', (e)=>{\n      if(!down) return;\n      const active = root.querySelector('.fs-slide.is-active');\n      const dx = e.clientX - sx;\n      if (active) active.style.transform = 'translateX('+(dx*0.08)+'px) scale(1.015)';\n      if (e.cancelable) e.preventDefault();\n    }, {passive:false});\n    window.addEventListener('pointercancel', ()=>{ down=false; media.classList.remove('is-dragging'); start(); }, {passive:true});\n\n    \/\/ Keyboard access \u2014 obey section direction\n    const isRTL = (root.getAttribute('dir') === 'rtl');\n    media.setAttribute('tabindex', '0');\n    media.addEventListener('keydown', (e)=>{\n      if (isRTL){\n        if (e.key === 'ArrowLeft')  { stop(); nextFn(); start(); } \/\/ RTL: \u064a\u0633\u0627\u0631 = \u0627\u0644\u062a\u0627\u0644\u064a\n        if (e.key === 'ArrowRight') { stop(); prevFn(); start(); } \/\/ RTL: \u064a\u0645\u064a\u0646 = \u0627\u0644\u0633\u0627\u0628\u0642\n      } else {\n        if (e.key === 'ArrowLeft')  { stop(); prevFn(); start(); } \/\/ LTR: \u064a\u0633\u0627\u0631 = \u0627\u0644\u0633\u0627\u0628\u0642\n        if (e.key === 'ArrowRight') { stop(); nextFn(); start(); } \/\/ LTR: \u064a\u0645\u064a\u0646 = \u0627\u0644\u062a\u0627\u0644\u064a\n      }\n    });\n\n    \/\/ Init\n    activate(0); start();\n  })();\n  <\/script>\n\n  <\/div>\n\t\t\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-c2db4b7 e-flex e-con-boxed e-con e-parent\" data-id=\"c2db4b7\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2715942 elementor-widget elementor-widget-shortcode\" data-id=\"2715942\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n  <!-- Roads & Infrastructure \u2014 Landscape Hero + Details (No Border, No Chips, Mobile-Taller, No-Overflow) -->\n  <section id=\"roads_73YnpB\" class=\"roads-wide\" dir=\"ltr\" aria-label=\"Road and infrastructure works\">\n    <!-- \u0628\u0627\u0646\u0648\u0631\u0627\u0645\u0627 \u0639\u0631\u064a\u0636\u0629 -->\n    <figure class=\"rw-hero\">\n              <div class=\"rw-slider\" aria-live=\"polite\">\n                      <img src=\"https:\/\/asamcc.com\/wp-content\/uploads\/2025\/10\/\u0623\u0639\u0645\u0627\u0644-\u0627\u0644\u0637\u0631\u0642-\u0648\u0627\u0644\u0628\u0646\u064a\u0629-\u0627\u0644\u062a\u062d\u062a\u064a\u0629-1536x864.webp\"\n                 alt=\"\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0637\u0631\u0642 \u0648\u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u2014 \u0635\u0648\u0631\u0629 \u0628\u0627\u0646\u0648\u0631\u0627\u0645\u064a\u0629\"\n                 class=\"rw-slide is-active\"\n                 loading=\"lazy\" decoding=\"async\">\n                  <\/div>\n\n        <!-- \u0623\u0633\u0647\u0645 \u0627\u0644\u062a\u0646\u0642\u0644 (Glassy, Circular) -->\n        <div class=\"rw-arrows\" aria-hidden=\"false\">\n          <button class=\"arrow prev\" type=\"button\" aria-label=\"\u0627\u0644\u0633\u0627\u0628\u0642\">\n            <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15.5 4 7.5 12l8 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/button>\n          <button class=\"arrow next\" type=\"button\" aria-label=\"\u0627\u0644\u062a\u0627\u0644\u064a\">\n            <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8.5 4 16.5 12l-8 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/button>\n        <\/div>\n\n        <!-- Progress bar -->\n        <div class=\"progress-bar\" role=\"progressbar\" aria-label=\"\u0645\u0624\u0634\u0631 \u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631\"><span><\/span><\/div>\n      \n      <!-- \u0628\u0637\u0627\u0642\u0629 \u0645\u062d\u062a\u0648\u0649 \u0641\u0648\u0642 \u0627\u0644\u0635\u0648\u0631\u0629 -->\n      <div class=\"rw-card reveal-up\">\n        <span class=\"eyebrow\">Specialized services<\/span>\n        <h2>\n          Road and infrastructure works\n          <i class=\"h-underline\" aria-hidden=\"true\"><\/i>\n        <\/h2>\n        <p>\n          We provide comprehensive solutions from burial and grading to final asphalt works, using the latest backfilling, paving and asphalt equipment in accordance with approved standards.\n        <\/p>\n      <\/div>\n    <\/figure>\n\n    <!-- \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u062e\u062f\u0645\u0629 \u062a\u062d\u062a \u0627\u0644\u0635\u0648\u0631\u0629 -->\n    <div class=\"rw-details\">\n      <div class=\"col\">\n        <h3>Our services include<\/h3>\n        <ul class=\"list reveal-stagger\">\n          <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Burial and leveling works: preparing and paving the lands according to the required levels using approved materials subject to field tests.<\/li>\n          <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Earthworks: Implementing the base and support layers according to engineering standards to ensure stability.<\/li>\n          <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Asphalt works: spreading and compacting asphalt layers with precision and specifications that match the requirements of official authorities.<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"col\">\n        <h3>Additional details<\/h3>\n        <ul class=\"list reveal-stagger\">\n          <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Ballast works: supply and installation of all sizes with perfect finishing and safe edges.<\/li>\n          <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Interlock works: implementing corridors, entrances, courtyards and parking lots with practical and aesthetic designs.<\/li>\n          <li><span class=\"tick\" aria-hidden=\"true\"><\/span>Rainwater drainage: Implementing ground slopes and drainage lines to ensure water flow and protect road layers.<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <style>\n  \/* Font *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700;800&display=swap');\n\n  \/* Scope reset *\/\n  #roads_73YnpB, #roads_73YnpB *{ box-sizing: border-box; }\n\n  \/* Tokens *\/\n  #roads_73YnpB{\n    --primary:#142F5D; --black:#000; --white:#fff;\n    --ink: rgba(0,0,0,.82);\n    --ring: rgba(20,47,93,.18);\n    --radius: 20px; --shadow: 0 18px 44px rgba(0,0,0,.08);\n\n    font-family:'Tajawal', system-ui, -apple-system, \"Segoe UI\", Arial, sans-serif;\n    color: var(--black);\n    max-width: 100%;\n    overflow: hidden;\n  }\n\n  \/* ===== Hero (landscape) \u2014 \u0628\u062f\u0648\u0646 \u0623\u064a \u0625\u0637\u0627\u0631 ===== *\/\n  #roads_73YnpB .rw-hero{\n    position: relative; margin: 0;\n    display:block; width:100%; max-width:100%;\n    border-radius: var(--radius);\n    overflow: hidden;\n    box-shadow: var(--shadow);\n    aspect-ratio: 16 \/ 9;\n    min-height: 420px;\n    background: none; border: none; padding: 0;\n    cursor: grab;\n  }\n  #roads_73YnpB .rw-hero.is-dragging{ cursor: grabbing; }\n\n  \/* Slider images *\/\n  #roads_73YnpB .rw-slider{ position:absolute; inset:0; }\n  #roads_73YnpB .rw-slide{\n    position:absolute; inset:0; width:100%; height:100%; max-width:100%;\n    object-fit: cover; display: block;\n    transform: scale(1.02); filter: saturate(1.03) contrast(1.04);\n    opacity:0; transition: opacity .8s ease, transform .3s ease; will-change: opacity, transform;\n  }\n  #roads_73YnpB .rw-slide.is-active{ opacity:1; }\n  #roads_73YnpB .rw-hero:hover .rw-slide.is-active{ transform: scale(1.06); }\n\n  \/* Vignette \u062e\u0641\u064a\u0641 *\/\n  #roads_73YnpB .rw-hero::after{\n    content:\"\"; position:absolute; inset:0; border-radius:0;\n    background: radial-gradient(120% 90% at 70% 20%, rgba(0,0,0,0) 55%, rgba(0,0,0,.06) 100%);\n    pointer-events:none;\n  }\n\n  \/* \u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0641\u0648\u0642 \u0627\u0644\u0635\u0648\u0631\u0629 *\/\n  #roads_73YnpB .rw-card{\n    position: absolute; inset-inline-start: 22px; inset-block-end: 22px;\n    max-width: min(50ch, 46%);\n    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));\n    border: 1px solid rgba(20,47,93,.22);\n    border-radius: 16px; padding: 16px 18px;\n    box-shadow: 0 14px 34px rgba(0,0,0,.10);\n    backdrop-filter: blur(2px);\n  }\n  #roads_73YnpB .eyebrow{\n    display:inline-block; font-weight:800; font-size:12px; letter-spacing:.6px;\n    color: var(--primary); background: rgba(20,47,93,.08);\n    border:1px solid rgba(20,47,93,.20);\n    padding:6px 10px; border-radius:999px; margin-bottom:8px;\n  }\n  #roads_73YnpB h2{\n    margin:0 0 8px; color: var(--primary); font-weight:800; font-size: clamp(22px,3.2vw,40px);\n    position:relative; display:inline-block;\n  }\n  #roads_73YnpB h2 .h-underline{\n    position:absolute; inset-inline-start:0; inset-block-end:-6px;\n    height:4px; width:0; background: var(--primary); border-radius:4px;\n    animation: underline-reveal .9s .25s ease-out forwards;\n  }\n  @keyframes underline-reveal{ to{ width: 160px; } }\n  #roads_73YnpB .rw-card p{\n    margin:6px 0 0; color: var(--ink); line-height:1.9; font-size: clamp(14px,1.5vw,18px);\n  }\n\n  \/* ===== Dots (\u062c\u0645\u064a\u0644\u0629 \u0648\u0648\u0627\u0636\u062d\u0629) ===== *\/\n  #roads_73YnpB .rw-dots{\n    position:absolute; inset-block-end: clamp(12px,2vw,18px); inset-inline-start: 50%;\n    transform: translateX(-50%);\n    display:flex; gap:10px; padding:6px 10px;\n    background: rgba(255,255,255,.78);\n    border:1px solid rgba(20,47,93,.18);\n    border-radius: 999px;\n    box-shadow: 0 10px 22px rgba(0,0,0,.08);\n    backdrop-filter: blur(2px);\n    z-index:5;\n  }\n  #roads_73YnpB .rw-dot{\n    --s: 9px;\n    width: var(--s); height: var(--s);\n    border-radius: 999px;\n    background: rgba(20,47,93,.28);\n    outline: 2px solid transparent;\n    transition: transform .2s ease, background-color .2s ease, outline-color .2s ease;\n    cursor: pointer;\n  }\n  #roads_73YnpB .rw-dot.is-active{\n    background: var(--primary);\n    transform: scale(1.35);\n    outline-color: rgba(20,47,93,.22);\n  }\n\n  \/* ===== Arrows (Glassy, Circular, Elegant) ===== *\/\n  #roads_73YnpB .rw-arrows{\n    position:absolute; inset-block:0; inset-inline:0;\n    display:flex; align-items:center; justify-content:space-between;\n    padding-inline:clamp(10px,3vw,28px);\n    pointer-events:none; z-index:10;\n  }\n  #roads_73YnpB .rw-arrows .arrow{\n    pointer-events:auto;\n    width:clamp(46px,5.5vw,60px);\n    height:clamp(46px,5.5vw,60px);\n    display:grid; place-items:center;\n    border-radius:50%;\n    background:rgba(255,255,255,0.55);\n    backdrop-filter:blur(6px) saturate(1.4);\n    border:1px solid rgba(255,255,255,0.6);\n    box-shadow:0 6px 20px rgba(0,0,0,0.12);\n    color:#142F5D;\n    transition:all .25s ease;\n  }\n  #roads_73YnpB .rw-arrows .arrow svg{\n    width:clamp(16px,2.2vw,22px);\n    height:auto; stroke-width:2.4;\n  }\n  #roads_73YnpB .rw-arrows .arrow:hover{\n    background:rgba(20,47,93,0.9);\n    color:#fff;\n    transform:scale(1.08);\n    border-color:rgba(255,255,255,0.75);\n    box-shadow:0 10px 25px rgba(20,47,93,0.35);\n  }\n  #roads_73YnpB .rw-arrows .arrow:active{ transform:scale(0.96); opacity:.9; }\n\n  \/* ===== Progress bar ===== *\/\n  #roads_73YnpB .progress-bar{\n    position:absolute; inset-inline:0; inset-block-end:0; height:4px;\n    background: rgba(20,47,93,.12); z-index:4;\n  }\n  #roads_73YnpB .progress-bar span{\n    display:block; width:0; height:100%; background: var(--primary); transition: width .1s linear;\n  }\n\n  \/* ===== Details under hero ===== *\/\n  #roads_73YnpB .rw-details{\n    display:grid; grid-template-columns: 1fr 1fr;\n    gap: clamp(14px, 3vw, 24px);\n    margin-top: 16px;\n  }\n  @media (max-width: 900px){ #roads_73YnpB .rw-details{ grid-template-columns: 1fr; } }\n\n  #roads_73YnpB h3{\n    margin: 0 0 8px; font-size: clamp(16px,2vw,20px); font-weight:800; color:#000;\n  }\n  #roads_73YnpB .list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }\n  #roads_73YnpB .list li{\n    background:#fff; border:1px solid var(--ring); border-radius:12px; padding:12px 14px;\n    display:flex; gap:10px; align-items:flex-start;\n    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;\n  }\n  #roads_73YnpB .list li:hover{\n    transform: translateY(-2px);\n    box-shadow: 0 12px 26px rgba(0,0,0,.08);\n    border-color: rgba(20,47,93,.30);\n  }\n  #roads_73YnpB .tick{\n    width:16px; height:16px; flex:0 0 16px; margin-top:3px;\n    background: var(--primary); border-radius:4px; position:relative;\n  }\n  #roads_73YnpB .tick::after{\n    content:\"\"; position:absolute; inset:3px 4px 4px 3px;\n    border-right:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(45deg);\n  }\n\n  \/* ===== Animations ===== *\/\n  #roads_73YnpB .reveal-up{ opacity:0; transform: translateY(12px); animation: fade-up .7s ease-out forwards; }\n  #roads_73YnpB .reveal-stagger > *{ opacity:0; transform: translateY(8px); animation: fade-up .6s ease-out forwards; }\n  #roads_73YnpB .reveal-stagger > *:nth-child(1){ animation-delay:.05s; }\n  #roads_73YnpB .reveal-stagger > *:nth-child(2){ animation-delay:.1s; }\n  #roads_73YnpB .reveal-stagger > *:nth-child(3){ animation-delay:.15s; }\n  #roads_73YnpB .reveal-stagger > *:nth-child(4){ animation-delay:.2s; }\n  @keyframes fade-up{ to{ opacity:1; transform:none; } }\n\n  \/* ===========================\n     Responsive (Mobile Taller + No Overflow)\n  =========================== *\/\n  @media (max-width: 1200px){\n    #roads_73YnpB .rw-card{ max-width: 64%; padding: clamp(14px, 2.2vw, 20px); }\n  }\n  @media (max-width: 900px){\n    #roads_73YnpB .rw-card{ inset-inline: 16px; inset-block-end: 16px; max-width: unset; }\n    #roads_73YnpB .rw-details{ grid-template-columns: 1fr; }\n  }\n  @media (max-width: 680px){\n    #roads_73YnpB{ overflow: hidden; max-width: 100vw; }\n    #roads_73YnpB .rw-hero{\n      aspect-ratio: 3 \/ 4;   \/* \u0623\u0637\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\n      min-height: 520px; width: 100%; max-width: 100%;\n    }\n    #roads_73YnpB .rw-slide{ height: 100%; transform: none; } \/* \u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u0633\u0643\u064a\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 *\/\n    #roads_73YnpB .rw-card{\n      inset-inline: 12px; inset-block-end: 12px;\n      max-width: calc(100% - 24px);\n      padding: 14px; border-radius: 14px;\n      background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));\n    }\n    #roads_73YnpB .rw-dots .rw-dot{ --s: 10px; }\n  }\n  @media (max-width: 420px){\n    #roads_73YnpB .rw-card{ inset-inline: 10px; inset-block-end: 10px; max-width: calc(100% - 20px); }\n  }\n\n  \/* Hover \u0639\u0644\u0649 \u0627\u0644\u0644\u0645\u0633 *\/\n  @media (hover: none){\n    #roads_73YnpB .rw-hero:hover .rw-slide.is-active{ transform: none; }\n  }\n\n  \/* Reduced motion *\/\n  @media (prefers-reduced-motion: reduce){\n    #roads_73YnpB .reveal-up, #roads_73YnpB .reveal-stagger > *{ animation:none !important; opacity:1 !important; transform:none !important; }\n    #roads_73YnpB .rw-slide{ transition:none !important; }\n  }\n  <\/style>\n\n  <script>\n  (function(){\n    const root = document.getElementById('roads_73YnpB');\n    if(!root) return;\n\n    const hero     = root.querySelector('.rw-hero');\n    const slider   = root.querySelector('.rw-slider');\n    const slides   = slider ? Array.from(slider.querySelectorAll('.rw-slide')) : [];\n    const progress = root.querySelector('.progress-bar span');\n    const prevBtn  = root.querySelector('.rw-arrows .prev');\n    const nextBtn  = root.querySelector('.rw-arrows .next');\n\n    \/\/ \u0644\u0648 \u0645\u0641\u064a\u0634 \u062c\u0627\u0644\u064a\u0631\u064a\u060c \u0645\u0627 \u0646\u0643\u0645\u0644\u0634 (\u064a\u0628\u0642\u0649 \u0627\u0644\u0643\u0627\u0631\u062f \u0641\u0642\u0637)\n    if (!slides.length) return;\n\n    \/\/ \u0628\u0646\u0627\u0621 \u0627\u0644\u0646\u0642\u0627\u0637\n    const dotsWrap = document.createElement('div');\n    dotsWrap.className = 'rw-dots';\n    slides.forEach((_, k) => {\n      const dot = document.createElement('span');\n      dot.className = 'rw-dot' + (k===0?' is-active':'');\n      dot.setAttribute('role','button');\n      dot.setAttribute('aria-label','\u0627\u0630\u0647\u0628 \u0625\u0644\u0649 \u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0631\u0642\u0645 ' + (k+1));\n      dot.addEventListener('click', () => { stop(); show(k); start(); });\n      dotsWrap.appendChild(dot);\n    });\n    hero.appendChild(dotsWrap);\n    const dots = dotsWrap.querySelectorAll('.rw-dot');\n\n    \/\/ \u0627\u0644\u062d\u0627\u0644\u0629\n    let i=0, auto=null, prog=null, val=0, down=false, sx=0;\n\n    function activate(idx){\n      slides.forEach((s, k) => s.classList.toggle('is-active', k===idx));\n      dots.forEach((d, k) => d.classList.toggle('is-active', k===idx));\n    }\n    function show(idx){\n      const total = slides.length;\n      i = (idx + total) % total;\n      activate(i);\n      val = 0; \/\/ \u0625\u0639\u0627\u062f\u0629 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0642\u062f\u0645\n    }\n    function next(){ show(i+1); }\n    function prev(){ show(i-1); }\n\n    function start(){\n      stop();\n      auto = setInterval(next, 4000);\n      prog = setInterval(() => {\n        val += 2.5; \/\/ 0..100 \u062e\u0644\u0627\u0644 4 \u062b\u0648\u0627\u0646\u064a\n        if (progress) progress.style.width = Math.min(val, 100) + '%';\n        if (val >= 100) val = 0;\n      }, 100);\n    }\n    function stop(){ clearInterval(auto); clearInterval(prog); }\n\n    \/\/ \u0623\u0633\u0647\u0645\n    if (prevBtn) prevBtn.addEventListener('click', () => { stop(); prev(); start(); });\n    if (nextBtn) nextBtn.addEventListener('click', () => { stop(); next(); start(); });\n\n    \/\/ \u0639\u062c\u0644\u0629 \u0627\u0644\u0645\u0627\u0648\u0633\/\u0627\u0644\u062a\u0631\u0627\u0643 \u0628\u0627\u062f\n    hero.addEventListener('wheel', (e) => {\n      e.preventDefault(); stop();\n      (e.deltaY > 0 || e.deltaX > 0) ? next() : prev();\n      start();\n    }, {passive:false});\n\n    \/\/ \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0645\u0646 \u0627\u0644\u0633\u0650\u0643\u0634\u0646\n    const isRTL = (root.getAttribute('dir') === 'rtl');\n\n    \/\/ \u0633\u062d\u0628 \u0628\u0627\u0644\u0645\u0627\u0648\u0633\/\u0627\u0644\u062a\u0627\u062a\u0634 (Pointer) \u2014 \u064a\u062a\u0628\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\n    hero.addEventListener('pointerdown', (e) => {\n      down = true; sx = e.clientX; hero.classList.add('is-dragging'); stop();\n    }, {passive:false});\n    window.addEventListener('pointerup', (e) => {\n      if (!down) return;\n      down = false; hero.classList.remove('is-dragging');\n      const dx = e.clientX - sx;\n      if (Math.abs(dx) > 50) {\n        if (isRTL) { dx > 0 ? prev() : next(); }   \/\/ RTL: \u064a\u0645\u064a\u0646=\u0633\u0627\u0628\u0642\u060c \u064a\u0633\u0627\u0631=\u0627\u0644\u062a\u0627\u0644\u064a\n        else       { dx > 0 ? next() : prev(); }   \/\/ LTR: \u064a\u0645\u064a\u0646=\u0627\u0644\u062a\u0627\u0644\u064a\u060c \u064a\u0633\u0627\u0631=\u0633\u0627\u0628\u0642\n      }\n      start();\n    }, {passive:true});\n    window.addEventListener('pointercancel', () => { down=false; hero.classList.remove('is-dragging'); start(); }, {passive:true});\n    window.addEventListener('pointermove', (e) => {\n      if (!down) return;\n      const active = root.querySelector('.rw-slide.is-active');\n      const dx = e.clientX - sx;\n      if (active) active.style.transform = 'translateX('+(dx*0.08)+'px) scale(1.02)';\n      if (e.cancelable) e.preventDefault();\n    }, {passive:false});\n\n    \/\/ \u0643\u064a\u0628\u0648\u0631\u062f \u2014 \u064a\u062a\u0628\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\n    hero.setAttribute('tabindex', '0');\n    hero.addEventListener('keydown', (e) => {\n      if (isRTL){\n        if (e.key === 'ArrowLeft')  { stop(); next(); start(); } \/\/ \u064a\u0633\u0627\u0631 = \u0627\u0644\u062a\u0627\u0644\u064a\n        if (e.key === 'ArrowRight') { stop(); prev(); start(); } \/\/ \u064a\u0645\u064a\u0646 = \u0627\u0644\u0633\u0627\u0628\u0642\n      } else {\n        if (e.key === 'ArrowLeft')  { stop(); prev(); start(); } \/\/ \u064a\u0633\u0627\u0631 = \u0627\u0644\u0633\u0627\u0628\u0642\n        if (e.key === 'ArrowRight') { stop(); next(); start(); } \/\/ \u064a\u0645\u064a\u0646 = \u0627\u0644\u062a\u0627\u0644\u064a\n      }\n    });\n\n    \/\/ \u062a\u0634\u063a\u064a\u0644\n    activate(0);\n    start();\n  })();\n  <\/script>\n\n  \n<\/div>\n\t\t\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-8c211ee e-flex e-con-boxed e-con e-parent\" data-id=\"8c211ee\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d02726 elementor-widget elementor-widget-shortcode\" data-id=\"4d02726\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n  <!-- ===== Civil & Concrete Section ===== -->\n  <section id=\"civil_Bqq1KY\" class=\"civil-wide-alt\" dir=\"ltr\" aria-label=\"Civil and concrete works\">\n    <figure class=\"cwa-hero\">\n              <div class=\"cwa-slider\" aria-live=\"polite\">\n                      <img\n              src=\"https:\/\/asamcc.com\/wp-content\/uploads\/2025\/10\/\u0635\u0648\u0631\u0629-\u0648\u0627\u062a\u0633\u0627\u0628-\u0628\u062a\u0627\u0631\u064a\u062e-2025-10-11-\u0641\u064a-21.36.18_b3c47ac6-1-1536x864.webp\"\n              alt=\"\u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u062e\u0631\u0633\u0627\u0646\u064a\u0629 \u2014 \u0635\u0648\u0631\u0629 \u0628\u0627\u0646\u0648\u0631\u0627\u0645\u064a\u0629\"\n              class=\"cwa-slide is-active\"\n              loading=\"lazy\" decoding=\"async\">\n                      <img\n              src=\"https:\/\/asamcc.com\/wp-content\/uploads\/2025\/10\/\u0635\u0648\u0631\u0629-\u0648\u0627\u062a\u0633\u0627\u0628-\u0628\u062a\u0627\u0631\u064a\u062e-2025-10-11-\u0641\u064a-21.36.18_36a3e379-1152x1536.webp\"\n              alt=\"\u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u062e\u0631\u0633\u0627\u0646\u064a\u0629 \u2014 \u0635\u0648\u0631\u0629 \u0628\u0627\u0646\u0648\u0631\u0627\u0645\u064a\u0629\"\n              class=\"cwa-slide\"\n              loading=\"lazy\" decoding=\"async\">\n                      <img\n              src=\"https:\/\/asamcc.com\/wp-content\/uploads\/2025\/10\/\u0635\u0648\u0631\u0629-\u0648\u0627\u062a\u0633\u0627\u0628-\u0628\u062a\u0627\u0631\u064a\u062e-2025-10-13-\u0641\u064a-19.26.52_7576be4a-864x1536.jpg\"\n              alt=\"\u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u062e\u0631\u0633\u0627\u0646\u064a\u0629 \u2014 \u0635\u0648\u0631\u0629 \u0628\u0627\u0646\u0648\u0631\u0627\u0645\u064a\u0629\"\n              class=\"cwa-slide\"\n              loading=\"lazy\" decoding=\"async\">\n                  <\/div>\n\n        <!-- \u0623\u0633\u0647\u0645 \u0627\u0644\u062a\u0646\u0642\u0651\u0644 (\u062a\u0635\u0645\u064a\u0645 \u0632\u062c\u0627\u062c\u064a \u0623\u0646\u064a\u0642) -->\n        <div class=\"cwa-arrows\" aria-hidden=\"false\">\n          <button class=\"arrow prev\" type=\"button\" aria-label=\"\u0627\u0644\u0633\u0627\u0628\u0642\">\n            <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15.5 4 7.5 12l8 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/button>\n          <button class=\"arrow next\" type=\"button\" aria-label=\"\u0627\u0644\u062a\u0627\u0644\u064a\">\n            <svg viewbox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8.5 4 16.5 12l-8 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/button>\n        <\/div>\n      \n      <div class=\"cwa-overlay\"><\/div>\n      <div class=\"progress-bar\" role=\"progressbar\" aria-label=\"\u0645\u0624\u0634\u0631 \u0627\u0644\u0633\u0644\u0627\u064a\u062f\u0631\"><span><\/span><\/div>\n\n      <figcaption class=\"cwa-caption reveal-up\">\n        <span class=\"eyebrow\">Specialized services<\/span>\n        <h2>\n          Civil and concrete works\n          <i class=\"h-underline\" aria-hidden=\"true\"><\/i>\n        <\/h2>\n        <p>\n          We carry out all construction and reinforced concrete works in Al Sarh Al Mutqan, from foundations to final finishes.\n        <\/p>\n      <\/figcaption>\n    <\/figure>\n\n    <!-- \u0634\u0628\u0643\u0629 \u0627\u0644\u062e\u062f\u0645\u0627\u062a (\u0643\u0645\u0627 \u0647\u064a) -->\n    <div class=\"cwa-grid\">\n      <article class=\"cwa-card reveal-stagger\">\n        <div class=\"item\"><span class=\"tick\"><\/span>Casting foundations and concrete slabs for buildings and facilities.<\/div>\n        <div class=\"item\"><span class=\"tick\"><\/span>Implementation of walls, concrete fences, and sidewalks.<\/div>\n        <div class=\"item\"><span class=\"tick\"><\/span>Construction of service rooms, culverts, and water tanks.<\/div>\n        <div class=\"item\"><span class=\"tick\"><\/span>Industrial concrete floors with specifications to resist high loads.<\/div>\n        <div class=\"item\"><span class=\"tick\"><\/span>Ready-mix concrete and reinforcement according to approved plans.<\/div>\n        <div class=\"item\"><span class=\"tick\"><\/span>Final finishes and insulation according to technical standards.<\/div>\n      <\/article>\n    <\/div>\n  <\/section>\n\n  <style>\n  \/* Font *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700;800&display=swap');\n\n  #civil_Bqq1KY, #civil_Bqq1KY *{ box-sizing: border-box; }\n  #civil_Bqq1KY{\n    --primary:#142F5D; --ink:rgba(0,0,0,.84); --ring:rgba(20,47,93,.18);\n    --radius:20px; --shadow:0 18px 44px rgba(0,0,0,.08);\n    font-family:'Tajawal', system-ui, -apple-system, \"Segoe UI\", Arial, sans-serif;\n    color:#000; display:grid; gap: clamp(14px, 3vw, 24px); max-width:100%; overflow:hidden;\n  }\n\n  \/* ===== Hero ===== *\/\n  #civil_Bqq1KY .cwa-hero{\n    position:relative; margin:0; display:block; width:100%;\n    aspect-ratio:16\/9; min-height:420px; border-radius:var(--radius);\n    overflow:hidden; border:1px solid var(--ring); box-shadow:var(--shadow);\n    cursor: grab;\n  }\n  #civil_Bqq1KY .cwa-hero.is-dragging{ cursor: grabbing; }\n\n  #civil_Bqq1KY .cwa-slider{ position:absolute; inset:0; }\n  #civil_Bqq1KY .cwa-slide{\n    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;\n    transform: scale(1.02); filter: saturate(1.03) contrast(1.04);\n    opacity:0; transition: opacity .8s ease, transform .3s ease; will-change: opacity, transform;\n  }\n  #civil_Bqq1KY .cwa-slide.is-active{ opacity:1; }\n  #civil_Bqq1KY .cwa-hero:hover .cwa-slide.is-active{ transform: scale(1.06); }\n\n  \/* Overlay *\/\n  #civil_Bqq1KY .cwa-overlay{\n    position:absolute; inset:0;\n    background:\n      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.25) 28%, rgba(255,255,255,.38) 52%, rgba(255,255,255,.12) 100%),\n      linear-gradient(135deg, rgba(20,47,93,.28), rgba(20,47,93,.05));\n    pointer-events:none;\n  }\n\n  \/* Caption *\/\n  #civil_Bqq1KY .cwa-caption{\n    position:absolute; inset-inline: clamp(16px,3vw,28px); inset-block-end: clamp(16px,3vw,28px);\n    max-width:min(66ch, 60%); background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));\n    border:1px solid rgba(20,47,93,.22); border-radius:16px; padding: clamp(14px, 2.4vw, 18px);\n    box-shadow:0 14px 34px rgba(0,0,0,.10); backdrop-filter: blur(2px);\n  }\n  #civil_Bqq1KY .eyebrow{\n    display:inline-block; font-weight:800; font-size:12px; letter-spacing:.6px;\n    color:var(--primary); background: rgba(20,47,93,.08); border:1px solid rgba(20,47,93,.20);\n    padding:6px 10px; border-radius:999px; margin-bottom:8px;\n  }\n  #civil_Bqq1KY h2{\n    margin:0 0 8px; color:var(--primary); font-weight:800; font-size: clamp(22px,3.2vw,40px);\n    position:relative; display:inline-block;\n  }\n  #civil_Bqq1KY h2 .h-underline{\n    position:absolute; inset-inline-start:0; inset-block-end:-6px; height:4px; width:0; background: var(--primary); border-radius:4px;\n    animation: underline-reveal .9s .25s ease-out forwards;\n  }\n  @keyframes underline-reveal{ to{ width:160px; } }\n  #civil_Bqq1KY .cwa-caption p{ margin:6px 0 0; color:var(--ink); line-height:1.9; font-size: clamp(14px,1.5vw,18px); }\n\n  \/* ===== Dots (\u062c\u0645\u064a\u0644\u0629 \u0648\u0648\u0627\u0636\u062d\u0629) ===== *\/\n  #civil_Bqq1KY .cwa-dots{\n    position:absolute; inset-block-end: clamp(12px,2vw,18px); inset-inline-start: 50%;\n    transform: translateX(-50%);\n    display:flex; gap:10px; padding:6px 10px;\n    background: rgba(255,255,255,.78);\n    border:1px solid rgba(20,47,93,.18);\n    border-radius: 999px;\n    box-shadow: 0 10px 22px rgba(0,0,0,.08);\n    backdrop-filter: blur(2px);\n    z-index:5;\n  }\n  #civil_Bqq1KY .cwa-dot{\n    --s: 9px;\n    width: var(--s); height: var(--s);\n    border-radius: 999px;\n    background: rgba(20,47,93,.28);\n    outline: 2px solid transparent;\n    transition: transform .2s ease, background-color .2s ease, outline-color .2s ease;\n    cursor: pointer;\n  }\n  #civil_Bqq1KY .cwa-dot.is-active{\n    background: var(--primary);\n    transform: scale(1.35);\n    outline-color: rgba(20,47,93,.22);\n  }\n\n  \/* ===== Arrows (Glassy, Circular, Elegant) ===== *\/\n  #civil_Bqq1KY .cwa-arrows{\n    position:absolute; inset-block:0; inset-inline:0;\n    display:flex; align-items:center; justify-content:space-between;\n    padding-inline:clamp(10px,3vw,28px);\n    pointer-events:none; z-index:10;\n  }\n  #civil_Bqq1KY .cwa-arrows .arrow{\n    pointer-events:auto;\n    width:clamp(46px,5.5vw,60px);\n    height:clamp(46px,5.5vw,60px);\n    display:grid; place-items:center;\n    border-radius:50%;\n    background:rgba(255,255,255,0.55);\n    backdrop-filter:blur(6px) saturate(1.4);\n    border:1px solid rgba(255,255,255,0.6);\n    box-shadow:0 6px 20px rgba(0,0,0,0.12);\n    color:#142F5D;\n    transition:all .25s ease;\n  }\n  #civil_Bqq1KY .cwa-arrows .arrow svg{\n    width:clamp(16px,2.2vw,22px);\n    height:auto;\n    stroke-width:2.4;\n  }\n  #civil_Bqq1KY .cwa-arrows .arrow:hover{\n    background:rgba(20,47,93,0.9);\n    color:#fff;\n    transform:scale(1.08);\n    border-color:rgba(255,255,255,0.75);\n    box-shadow:0 10px 25px rgba(20,47,93,0.35);\n  }\n  #civil_Bqq1KY .cwa-arrows .arrow:active{\n    transform:scale(0.96);\n    opacity:.9;\n  }\n  @media (max-width:680px){\n    #civil_Bqq1KY .cwa-arrows .arrow{ width:42px;height:42px; box-shadow:0 4px 14px rgba(0,0,0,0.10); }\n    #civil_Bqq1KY .cwa-arrows .arrow svg{ width:18px; }\n    #civil_Bqq1KY .cwa-dot{ --s: 10px; }\n  }\n\n  \/* ===== Progress bar ===== *\/\n  #civil_Bqq1KY .progress-bar{\n    position:absolute; inset-inline:0; inset-block-end:0; height:4px; background: rgba(20,47,93,.12); z-index:4;\n  }\n  #civil_Bqq1KY .progress-bar span{\n    display:block; width:0; height:100%; background: var(--primary); transition: width .1s linear;\n  }\n\n  \/* ===== Services Grid ===== *\/\n  #civil_Bqq1KY .cwa-grid{ display:grid; gap: 12px; }\n  #civil_Bqq1KY .cwa-card{\n    border: 1px solid var(--ring);\n    border-radius: var(--radius);\n    background:#fff;\n    box-shadow: var(--shadow);\n    padding: clamp(16px, 3vw, 24px);\n    display:grid;\n    grid-template-columns: repeat(3, minmax(220px, 1fr));\n    gap: 12px;\n  }\n  #civil_Bqq1KY .item{\n    display:flex; gap:10px; align-items:flex-start;\n    padding: 12px 14px;\n    border:1px solid var(--ring);\n    border-radius: 12px;\n    background: #fff;\n    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;\n  }\n  #civil_Bqq1KY .item:hover{\n    transform: translateY(-2px);\n    box-shadow: 0 12px 26px rgba(0,0,0,.08);\n    border-color: rgba(20,47,93,.30);\n  }\n  #civil_Bqq1KY .tick{\n    width:16px; height:16px; flex:0 0 16px; margin-top:3px;\n    background: var(--primary); border-radius:4px; position:relative;\n  }\n  #civil_Bqq1KY .tick::after{\n    content:\"\"; position:absolute; inset:3px 4px 4px 3px;\n    border-right:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(45deg);\n  }\n\n  \/* ===== Reveal animations ===== *\/\n  #civil_Bqq1KY .reveal-up{ opacity:0; transform: translateY(12px); animation: fade-up .7s ease-out forwards; }\n  #civil_Bqq1KY .reveal-stagger > *{ opacity:0; transform: translateY(8px); animation: fade-up .6s ease-out forwards; }\n  #civil_Bqq1KY .reveal-stagger > *:nth-child(1){ animation-delay:.05s; }\n  #civil_Bqq1KY .reveal-stagger > *:nth-child(2){ animation-delay:.1s; }\n  #civil_Bqq1KY .reveal-stagger > *:nth-child(3){ animation-delay:.15s; }\n  #civil_Bqq1KY .reveal-stagger > *:nth-child(4){ animation-delay:.2s; }\n  #civil_Bqq1KY .reveal-stagger > *:nth-child(5){ animation-delay:.25s; }\n  #civil_Bqq1KY .reveal-stagger > *:nth-child(6){ animation-delay:.30s; }\n  @keyframes fade-up{ to{ opacity:1; transform:none; } }\n\n  \/* ===== Responsive ===== *\/\n  @media (max-width: 900px){\n    #civil_Bqq1KY .cwa-card{ grid-template-columns: repeat(2, 1fr); }\n  }\n  @media (max-width: 680px){\n    #civil_Bqq1KY{ overflow: hidden; max-width: 100vw; }\n    #civil_Bqq1KY .cwa-hero{ aspect-ratio: 3\/4; min-height:520px; }\n    #civil_Bqq1KY .cwa-caption{\n      inset-inline: 12px; inset-block-end: 12px; max-width: calc(100% - 24px);\n      padding: 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));\n    }\n    #civil_Bqq1KY h2{ font-size: clamp(20px, 6vw, 28px); }\n    #civil_Bqq1KY .cwa-caption p{ font-size: 14px; line-height: 1.85; }\n    #civil_Bqq1KY .cwa-card{ grid-template-columns: 1fr; padding: 14px; }\n    #civil_Bqq1KY .item{ padding: 14px 16px; box-shadow: 0 8px 18px rgba(0,0,0,.06); }\n  }\n\n  \/* Respect reduced motion *\/\n  @media (prefers-reduced-motion: reduce){\n    #civil_Bqq1KY .cwa-slide{ transition: none !important; }\n  }\n  <\/style>\n\n  <script>\n  (function(){\n    const root = document.getElementById('civil_Bqq1KY');\n    if(!root) return;\n\n    const hero     = root.querySelector('.cwa-hero');\n    const slider   = root.querySelector('.cwa-slider');\n    const slides   = slider ? Array.from(slider.querySelectorAll('.cwa-slide')) : [];\n    const progress = root.querySelector('.progress-bar span');\n    const prevBtn  = root.querySelector('.cwa-arrows .prev');\n    const nextBtn  = root.querySelector('.cwa-arrows .next');\n\n    if (!slides.length) return;\n\n    \/\/ Build dots\n    const dotsWrap = document.createElement('div');\n    dotsWrap.className = 'cwa-dots';\n    slides.forEach((_, k) => {\n      const dot = document.createElement('span');\n      dot.className = 'cwa-dot' + (k===0?' is-active':'');\n      dot.setAttribute('role','button');\n      dot.setAttribute('aria-label','\u0627\u0630\u0647\u0628 \u0625\u0644\u0649 \u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0631\u0642\u0645 ' + (k+1));\n      dot.addEventListener('click', () => { stop(); show(k); start(); });\n      dotsWrap.appendChild(dot);\n    });\n    hero.appendChild(dotsWrap);\n    const dots = dotsWrap.querySelectorAll('.cwa-dot');\n\n    \/\/ State\n    let i=0, auto=null, prog=null, val=0, down=false, sx=0;\n\n    function activate(idx){\n      slides.forEach((s, k) => s.classList.toggle('is-active', k===idx));\n      dots.forEach((d, k) => d.classList.toggle('is-active', k===idx));\n    }\n    function show(idx){\n      const total = slides.length;\n      i = (idx + total) % total;\n      activate(i);\n      val = 0;\n    }\n    function next(){ show(i+1); }\n    function prev(){ show(i-1); }\n\n    function start(){\n      stop();\n      auto = setInterval(next, 4000);\n      prog = setInterval(() => {\n        val += 2.5; \/\/ 0..100 \u0641\u064a 4 \u062b\u0648\u0627\u0646\u064a\n        if (progress) progress.style.width = Math.min(val, 100) + '%';\n        if (val >= 100) val = 0;\n      }, 100);\n    }\n    function stop(){ clearInterval(auto); clearInterval(prog); }\n\n    \/\/ Buttons\n    if (prevBtn) prevBtn.addEventListener('click', () => { stop(); prev(); start(); });\n    if (nextBtn) nextBtn.addEventListener('click', () => { stop(); next(); start(); });\n\n    \/\/ Wheel (\u0645\u0627\u0648\u0633\/\u062a\u0631\u0627\u0643 \u0628\u0627\u062f)\n    hero.addEventListener('wheel', (e) => {\n      e.preventDefault(); stop();\n      (e.deltaY > 0 || e.deltaX > 0) ? next() : prev();\n      start();\n    }, {passive:false});\n\n    \/\/ Detect direction from section\n    const isRTL = (root.getAttribute('dir') === 'rtl');\n\n    \/\/ Drag (Pointer) \u2014 obey direction\n    hero.addEventListener('pointerdown', (e) => {\n      down = true; sx = e.clientX; hero.classList.add('is-dragging'); stop();\n    }, {passive:false});\n    window.addEventListener('pointerup', (e) => {\n      if (!down) return;\n      down = false; hero.classList.remove('is-dragging');\n      const dx = e.clientX - sx;\n      if (Math.abs(dx) > 50) {\n        if (isRTL) { dx > 0 ? prev() : next(); }  \/\/ RTL: \u064a\u0645\u064a\u0646=\u0633\u0627\u0628\u0642\u060c \u064a\u0633\u0627\u0631=\u0627\u0644\u062a\u0627\u0644\u064a\n        else       { dx > 0 ? next() : prev(); }  \/\/ LTR: \u064a\u0645\u064a\u0646=\u0627\u0644\u062a\u0627\u0644\u064a\u060c \u064a\u0633\u0627\u0631=\u0633\u0627\u0628\u0642\n      }\n      start();\n    }, {passive:true});\n    window.addEventListener('pointercancel', () => { down=false; hero.classList.remove('is-dragging'); start(); }, {passive:true});\n    window.addEventListener('pointermove', (e) => {\n      if (!down) return;\n      const active = root.querySelector('.cwa-slide.is-active');\n      const dx = e.clientX - sx;\n      if (active) active.style.transform = 'translateX('+(dx*0.08)+'px) scale(1.02)';\n      if (e.cancelable) e.preventDefault();\n    }, {passive:false});\n\n    \/\/ Keyboard \u2014 obey direction\n    hero.setAttribute('tabindex', '0');\n    hero.addEventListener('keydown', (e) => {\n      if (isRTL){\n        if (e.key === 'ArrowLeft')  { stop(); next(); start(); } \/\/ \u064a\u0633\u0627\u0631 = \u0627\u0644\u062a\u0627\u0644\u064a\n        if (e.key === 'ArrowRight') { stop(); prev(); start(); } \/\/ \u064a\u0645\u064a\u0646 = \u0627\u0644\u0633\u0627\u0628\u0642\n      } else {\n        if (e.key === 'ArrowLeft')  { stop(); prev(); start(); } \/\/ \u064a\u0633\u0627\u0631 = \u0627\u0644\u0633\u0627\u0628\u0642\n        if (e.key === 'ArrowRight') { stop(); next(); start(); } \/\/ \u064a\u0645\u064a\u0646 = \u0627\u0644\u062a\u0627\u0644\u064a\n      }\n    });\n\n    \/\/ Init\n    activate(0);\n    start();\n  })();\n  <\/script>\n\n  <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0634\u0631\u0643\u0629 \u0627\u0644\u0635\u0631\u062d \u0627\u0644\u0645\u062a\u0642\u0646 \u0644\u0644\u0645\u0642\u0627\u0648\u0644\u0627\u062a \u0645\u0640\u0640\u0640\u0634\u0640\u0640\u0640\u0627\u0631\u064a\u0640\u0640\u0640\u0639\u0640\u0640\u0640\u0646\u0640\u0640\u0640\u0627 0%<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/asamcc.com\/en\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asamcc.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/asamcc.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/asamcc.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/asamcc.com\/en\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":31,"href":"https:\/\/asamcc.com\/en\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/asamcc.com\/en\/wp-json\/wp\/v2\/pages\/15\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/asamcc.com\/en\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}