{"id":193,"date":"2026-05-16T13:26:57","date_gmt":"2026-05-16T13:26:57","guid":{"rendered":"https:\/\/hidrodoko.com\/?page_id=193"},"modified":"2026-06-15T08:18:04","modified_gmt":"2026-06-15T08:18:04","slug":"sherbimet","status":"publish","type":"page","link":"https:\/\/hidrodoko.com\/en\/sherbimet\/","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"193\" class=\"elementor elementor-193\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16967c8 e-con e-atomic-element e-flexbox-base e-d255d60 \" data-id=\"16967c8\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"16967c8\" data-e-type=\"e-flexbox\" data-id=\"16967c8\">\n    \t\t<div class=\"elementor-element elementor-element-f100b40 elementor-widget elementor-widget-html\" data-id=\"f100b40\" data-element_type=\"widget\" data-e-type=\"widget\" data-no-translation=\"\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.elementor-element-f100b40{display:none !important}<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2a544d9 e-con e-atomic-element e-flexbox-base e-4184764 \" data-id=\"2a544d9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2a544d9\" data-e-type=\"e-flexbox\" data-id=\"2a544d9\">\n    \t\t<div class=\"elementor-element elementor-element-6c61528 elementor-widget elementor-widget-html\" data-id=\"6c61528\" data-element_type=\"widget\" data-e-type=\"widget\" data-no-translation=\"\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\"\/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<title>Services \u2013 Hidro Doko 3D<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\"\/>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\n:root{\r\n  --navy:#0E2A47;--navy2:#163860;--copper:#C86A1F;--copper2:#E08842;\r\n  --bg:#EEF4FB;--text:#0D1E33;--muted:#5A6E85;--border:#B8CDE0;\r\n}\r\nhtml,body{height:100%;font-family:'Inter',sans-serif;font-weight:300;background:var(--bg);color:var(--text)}\r\n\r\n.hero{background:var(--navy);padding:52px 2rem 44px;text-align:center;border-bottom:3px solid var(--copper);position:relative;overflow:hidden}\r\n.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 40%,rgba(200,106,31,.14) 0%,transparent 55%);pointer-events:none}\r\n.hero-eye{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);margin-bottom:12px}\r\n.hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:500;color:#fff;line-height:1.1;margin-bottom:10px}\r\n.hero h1 em{font-style:italic;color:var(--copper2)}\r\n.hero-sub{font-size:13px;color:rgba(255,255,255,.5);max-width:460px;margin:0 auto}\r\n.hint{display:inline-flex;gap:20px;margin-top:18px;font-size:11px;color:rgba(255,255,255,.35);letter-spacing:.06em}\r\n.hint span{display:flex;align-items:center;gap:5px}\r\n\r\n.stage-wrap{position:relative;width:100%;height:520px;background:linear-gradient(160deg,#0a1f38 0%,#0E2A47 60%,#163860 100%);overflow:hidden;cursor:grab}\r\n.stage-wrap:active{cursor:grabbing}\r\n#canvas3d{width:100%;height:100%;display:block}\r\n\r\n.panel{position:absolute;top:50%;right:32px;transform:translateY(-50%);width:260px;background:rgba(14,42,71,.96);border:1px solid rgba(200,106,31,.4);border-radius:14px;padding:24px 20px;pointer-events:none;opacity:0;transition:opacity .25s;backdrop-filter:blur(8px)}\r\n.panel.visible{opacity:1;pointer-events:auto}\r\n.panel-num{font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:600;color:var(--copper);letter-spacing:.12em;margin-bottom:6px}\r\n.panel-title{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:500;color:#fff;margin-bottom:10px;line-height:1.2}\r\n.panel-desc{font-size:13px;color:rgba(255,255,255,.7);line-height:1.65;margin-bottom:14px}\r\n.panel-why{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--copper);margin-bottom:5px}\r\n.panel-reason{font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.55}\r\n.panel-close{position:absolute;top:10px;right:12px;background:none;border:none;color:rgba(255,255,255,.4);font-size:18px;cursor:pointer;line-height:1;padding:4px}\r\n.panel-close:hover{color:var(--copper2)}\r\n\r\n.services-intro{max-width:820px;margin:0 auto;padding:48px 2rem 0}\r\n.services-intro h2{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--navy);margin-bottom:10px}\r\n.services-intro p{font-size:15px;color:var(--muted);margin-bottom:32px}\r\n.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding-bottom:16px}\r\n.card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 18px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;transition:border-color .2s,box-shadow .2s}\r\n.card:hover{border-color:var(--copper);box-shadow:0 4px 16px rgba(200,106,31,.12)}\r\n.card-num{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--copper);line-height:1;min-width:28px}\r\n.card-title{font-size:14px;font-weight:500;color:var(--navy);margin-bottom:3px}\r\n.card-desc{font-size:12.5px;color:var(--muted);line-height:1.55}\r\n\r\n.why-wrap{background:var(--navy);margin-top:48px;padding:48px 2rem}\r\n.why-inner{max-width:820px;margin:0 auto}\r\n.why-inner h2{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:500;color:#fff;margin-bottom:6px}\r\n.why-inner .sub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:28px}\r\n.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}\r\n.why-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:16px 18px}\r\n.why-card-title{font-size:13.5px;font-weight:500;color:var(--copper2);margin-bottom:5px}\r\n.why-card-text{font-size:12.5px;color:rgba(255,255,255,.58);line-height:1.6}\r\n\r\n.cta-bar{background:var(--copper);padding:28px 2rem;text-align:center}\r\n.cta-bar p{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:#fff;margin-bottom:12px}\r\n.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}\r\n.btn{padding:10px 24px;border-radius:6px;font-size:13px;font-weight:500;text-decoration:none;letter-spacing:.04em;transition:opacity .2s}\r\n.btn-white{background:#fff;color:var(--copper)}\r\n.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.7);color:#fff}\r\n.btn:hover{opacity:.85}\r\n\r\n@media(max-width:680px){\r\n  .stage-wrap{height:360px}\r\n  .panel{right:10px;width:220px;padding:18px 14px}\r\n  .grid,.why-grid{grid-template-columns:1fr}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"hero\">\r\n  <p class=\"hero-eye\">A Group \u00b7 hidrodoko.com<\/p>\r\n  <h1>Our <em>Services<\/em><\/h1>\r\n  <p class=\"hero-sub\">Explore the 3D bathroom \u2014 click any element to discover our service.<\/p>\r\n  <div class=\"hint\">\r\n    <span>\ud83d\uddb1 Rotate<\/span>\r\n    <span>\ud83d\udc46 Click an object<\/span>\r\n    <span>\ud83d\udd0d Scroll to zoom<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"stage-wrap\" id=\"stage\">\r\n  <canvas id=\"canvas3d\"><\/canvas>\r\n  <div class=\"panel\" id=\"panel\">\r\n    <button class=\"panel-close\" id=\"panelClose\">\u00d7<\/button>\r\n    <div class=\"panel-num\" id=\"pNum\"><\/div>\r\n    <div class=\"panel-title\" id=\"pTitle\"><\/div>\r\n    <div class=\"panel-desc\" id=\"pDesc\"><\/div>\r\n    <div class=\"panel-why\" id=\"pWhyLabel\"><\/div>\r\n    <div class=\"panel-reason\" id=\"pReason\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"services-intro\">\r\n  <h2>10 services, one team<\/h2>\r\n  <p>From first installation to ongoing maintenance \u2014 Hidro Doko covers every hydrosanitary need.<\/p>\r\n  <div class=\"grid\" id=\"servGrid\"><\/div>\r\n<\/div>\r\n\r\n<div class=\"why-wrap\">\r\n  <div class=\"why-inner\">\r\n    <h2>Why choose us?<\/h2>\r\n    <p class=\"sub\">With over 35 years of experience, we bring the best from the factory to your home.<\/p>\r\n    <div class=\"why-grid\" id=\"whyGrid\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"cta-bar\">\r\n  <p>Have a project in mind? Our consultancy is free.<\/p>\r\n  <div class=\"cta-btns\">\r\n    <a href=\"https:\/\/wa.me\/355686030717\" class=\"btn btn-white\">WhatsApp us<\/a>\r\n    <a href=\"https:\/\/hidrodoko.com\/na-kontaktoni\/\" class=\"btn btn-outline\">Contact us<\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst EN = {\r\n  whyLabel: 'Why Hidro Doko?',\r\n  services: [\r\n    { id:'pipes',    num:'01', title:'Hydraulic systems',        desc:'Full installation of hot and cold water pipework, drainage and discharge systems for homes, apartments and commercial premises.',                         reason:'35+ years of experience \u2014 every joint tested before handover.' },\r\n    { id:'furniture',num:'02', title:'Bathroom furniture',       desc:'Professional installation of complete bathroom sets including washbasins, units, mirrors and accessories, with a clean, guaranteed finish.',              reason:'Italian and European manufacture \u2014 guaranteed long-term quality.' },\r\n    { id:'toilet',   num:'03', title:'WCs and bidets',           desc:'Fitting, connecting and testing of floor-standing and wall-hung WCs and bidets, with total leak prevention.',                                             reason:'Leak guarantee \u2014 we do not leave until everything is tested.' },\r\n    { id:'bath',     num:'04', title:'Baths and shower enclosures',desc:'Installation of classic baths, whirlpool baths and shower enclosures, including hydraulic connections and professional silicone sealing.',              reason:'Certified technicians \u2014 clean, fast, problem-free work.' },\r\n    { id:'mixer',    num:'05', title:'Mixer taps and brassware', desc:'Installation of mixer taps for basin, shower and bath, including thermostatic and concealed models.',                                                      reason:'Genuine Sanitec and Thermic parts \u2014 maximum service life.' },\r\n    { id:'repair',   num:'06', title:'Repairs and maintenance',  desc:'Rapid response for water leaks, blocked pipes, dripping taps, low pressure and mixer tap defects.',                                                       reason:'Emergency service \u2014 our team comes the same day.' },\r\n    { id:'parts',    num:'07', title:'Component replacement',    desc:'Replacement of mixer taps, traps, WC seats, flexi-hoses and any other hydraulic component with original parts.',                                         reason:'Original parts only \u2014 we never compromise on quality.' },\r\n    { id:'clean',    num:'08', title:'Professional pipe cleaning',desc:'High-pressure cleaning of pipes blocked by grease, sludge and limescale deposits, without damaging the existing system.',                               reason:'High-pressure technology \u2014 guaranteed results.' },\r\n    { id:'boiler',   num:'09', title:'Boilers and solar systems',desc:'Installation and connection of electric, gas and solar panel water heating systems, with full technical safety compliance.',                              reason:'Solar energy specialists \u2014 real savings on your bills.' },\r\n    { id:'consult',  num:'10', title:'Consultancy and design',   desc:'Assistance selecting the right products, hydraulic design and recommendations for your ideal bathroom \u2014 free for every buyer.',                           reason:'Free consultancy \u2014 no purchase obligation.' },\r\n  ],\r\n  why: [\r\n    { title:'Quality guaranteed products',   text:'We work exclusively with international brands, guaranteeing long-term durability.' },\r\n    { title:'Competitive prices',            text:'We offer the best quality-to-price ratio in the market, without compromise.' },\r\n    { title:'Professional team',             text:'Our technical staff have years of experience in hydrosanitary installations.' },\r\n    { title:'Free consultancy',              text:'We help you choose products that suit your space, style and budget.' },\r\n    { title:'After-sales service',           text:'Technical support even after installation \u2014 the relationship does not end at purchase.' },\r\n    { title:'Safe delivery and installation',text:'Delivery and installation by qualified technicians, with full product safety.' },\r\n    { title:'Wide product range',            text:'Furniture, basins, WCs, baths, mixer taps, showers \u2014 everything in one place.' },\r\n    { title:'Continuously updated catalogue',text:'Regularly refreshed with the latest modern, minimalist and luxury models.' },\r\n  ]\r\n};\r\n\r\nconst lang = EN;\r\nconst servGrid = document.getElementById('servGrid');\r\nlang.services.forEach(s => {\r\n  const d = document.createElement('div');\r\n  d.className = 'card'; d.dataset.id = s.id;\r\n  d.innerHTML = `<div class=\"card-num\">${s.num}<\/div><div class=\"card-body\"><div class=\"card-title\">${s.title}<\/div><div class=\"card-desc\">${s.desc.substring(0,90)}\u2026<\/div><\/div>`;\r\n  d.addEventListener('click', () => showPanel(s));\r\n  servGrid.appendChild(d);\r\n});\r\nconst whyGrid = document.getElementById('whyGrid');\r\nlang.why.forEach(w => {\r\n  const d = document.createElement('div');\r\n  d.className = 'why-card';\r\n  d.innerHTML = `<div class=\"why-card-title\">${w.title}<\/div><div class=\"why-card-text\">${w.text}<\/div>`;\r\n  whyGrid.appendChild(d);\r\n});\r\n\r\n\/\/ \u2500\u2500 THREE.JS (identical scene logic) \u2500\u2500\r\nconst canvas   = document.getElementById('canvas3d');\r\nconst stage    = document.getElementById('stage');\r\nconst W = () => stage.clientWidth;\r\nconst H = () => stage.clientHeight;\r\n\r\nconst renderer = new THREE.WebGLRenderer({ canvas, antialias:true, alpha:true });\r\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio,2));\r\nrenderer.shadowMap.enabled = true;\r\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\r\nrenderer.setSize(W(),H());\r\n\r\nconst scene  = new THREE.Scene();\r\nconst camera = new THREE.PerspectiveCamera(45, W()\/H(), 0.1, 100);\r\ncamera.position.set(5.5, 5.5, 5.5);\r\ncamera.lookAt(0, 0.5, 0);\r\n\r\nconst ambient = new THREE.AmbientLight(0xffffff, 0.55); scene.add(ambient);\r\nconst sun = new THREE.DirectionalLight(0xffffff, 0.9);\r\nsun.position.set(6,9,6); sun.castShadow=true;\r\nsun.shadow.mapSize.set(1024,1024);\r\nsun.shadow.camera.left=-8; sun.shadow.camera.right=8;\r\nsun.shadow.camera.top=8; sun.shadow.camera.bottom=-8;\r\nscene.add(sun);\r\nconst fill = new THREE.DirectionalLight(0x7ab0d4, 0.35);\r\nfill.position.set(-4,3,-4); scene.add(fill);\r\nconst copperPoint = new THREE.PointLight(0xC86A1F, 0.4, 10);\r\ncopperPoint.position.set(0,3,0); scene.add(copperPoint);\r\n\r\nconst C = (hex,rough=0.7,metal=0) => new THREE.MeshStandardMaterial({color:hex,roughness:rough,metalness:metal});\r\nconst TILE_W   = C(0xdce8f4,0.35,0.05);\r\nconst TILE_F   = C(0xc5d8ec,0.45,0.0);\r\nconst PORCELAIN= C(0xf0f5fa,0.25,0.02);\r\nconst CHROME   = C(0xd4dfe8,0.15,0.85);\r\nconst COPPER_M = C(0xC86A1F,0.3,0.6);\r\nconst GLASS    = new THREE.MeshStandardMaterial({color:0xa8c8e8,roughness:0.05,metalness:0.1,transparent:true,opacity:0.28});\r\nconst WOOD     = C(0xb08060,0.8,0.0);\r\nconst MIRROR   = new THREE.MeshStandardMaterial({color:0x90b8cc,roughness:0.02,metalness:0.9});\r\n\r\n\/\/ Room\r\nconst floor = new THREE.Mesh(new THREE.BoxGeometry(6,0.08,6), TILE_F);\r\nfloor.position.set(0,-0.04,0); floor.receiveShadow=true; scene.add(floor);\r\nconst grid = new THREE.GridHelper(6,6,0x7a9fc0,0x7a9fc0);\r\ngrid.position.y=0.002; grid.material.opacity=0.18; grid.material.transparent=true; scene.add(grid);\r\nconst wallB = new THREE.Mesh(new THREE.BoxGeometry(6,4,0.08), TILE_W);\r\nwallB.position.set(0,2,-3); wallB.receiveShadow=true; scene.add(wallB);\r\nconst wallL = new THREE.Mesh(new THREE.BoxGeometry(0.08,4,6), TILE_W);\r\nwallL.position.set(-3,2,0); wallL.receiveShadow=true; scene.add(wallL);\r\nconst baseB = new THREE.Mesh(new THREE.BoxGeometry(6,0.06,0.04), COPPER_M);\r\nbaseB.position.set(0,0.03,-2.96); scene.add(baseB);\r\nconst baseL = new THREE.Mesh(new THREE.BoxGeometry(0.04,0.06,6), COPPER_M);\r\nbaseL.position.set(-2.96,0.03,0); scene.add(baseL);\r\n\r\nconst clickables = [];\r\nconst serviceMap = {};\r\nlang.services.forEach(s => serviceMap[s.id] = s);\r\n\r\nfunction mk(geom,mat,x,y,z,sid) {\r\n  const m = new THREE.Mesh(geom, mat.clone());\r\n  m.position.set(x,y,z); m.castShadow=true; m.receiveShadow=true;\r\n  m.userData.serviceId=sid; m.userData.baseY=y;\r\n  scene.add(m); clickables.push(m); return m;\r\n}\r\n\r\n\/\/ Objects\r\nmk(new THREE.BoxGeometry(1.8,0.55,0.9), C(0xecf4fa,0.2,0.05), -1.8,0.275,-2.4,'bath');\r\nconst tubi = new THREE.Mesh(new THREE.BoxGeometry(1.55,0.35,0.65), C(0xd0e8f5,0.1,0.0));\r\ntubi.position.set(-1.8,0.45,-2.4); tubi.userData.serviceId='bath'; tubi.userData.baseY=0.45; scene.add(tubi); clickables.push(tubi);\r\nmk(new THREE.CylinderGeometry(0.04,0.04,0.25,8), CHROME, -1.05,0.65,-2.4,'mixer');\r\nmk(new THREE.BoxGeometry(0.45,0.42,0.6), PORCELAIN, 1.8,0.21,-2.5,'toilet');\r\nmk(new THREE.BoxGeometry(0.4,0.38,0.18), PORCELAIN, 1.8,0.61,-2.72,'toilet');\r\nconst wcSeat = new THREE.Mesh(new THREE.TorusGeometry(0.16,0.04,8,20), PORCELAIN);\r\nwcSeat.rotation.x=Math.PI\/2; wcSeat.position.set(1.8,0.44,-2.41); wcSeat.userData.serviceId='toilet'; wcSeat.userData.baseY=0.44; scene.add(wcSeat); clickables.push(wcSeat);\r\nmk(new THREE.BoxGeometry(0.9,0.76,0.5), WOOD, -2.5,0.38,-0.6,'furniture');\r\nmk(new THREE.BoxGeometry(0.9,0.05,0.5), C(0xf0f5fa,0.15,0.05), -2.5,0.785,-0.6,'furniture');\r\nmk(new THREE.BoxGeometry(0.62,0.1,0.38), PORCELAIN, -2.5,0.83,-0.6,'furniture');\r\nmk(new THREE.CylinderGeometry(0.025,0.025,0.22,8), CHROME, -2.5,0.97,-0.78,'mixer');\r\nmk(new THREE.CylinderGeometry(0.04,0.025,0.04,8), CHROME, -2.5,1.09,-0.78,'mixer');\r\nmk(new THREE.BoxGeometry(0.7,0.9,0.04), MIRROR, -2.93,1.55,-0.6,'parts');\r\nmk(new THREE.BoxGeometry(1.2,0.08,1.2), C(0xd8eaf5,0.3,0.02), 1.5,0.04,-1.4,'bath');\r\nconst gw1 = new THREE.Mesh(new THREE.BoxGeometry(1.2,1.9,0.04), GLASS);\r\ngw1.position.set(1.5,0.99,-2.0); gw1.userData.serviceId='bath'; gw1.userData.baseY=0.99; scene.add(gw1); clickables.push(gw1);\r\nconst gw2 = new THREE.Mesh(new THREE.BoxGeometry(0.04,1.9,1.2), GLASS);\r\ngw2.position.set(0.9,0.99,-1.4); gw2.userData.serviceId='bath'; gw2.userData.baseY=0.99; scene.add(gw2); clickables.push(gw2);\r\nmk(new THREE.CylinderGeometry(0.025,0.025,0.5,8), CHROME, 1.5,1.8,-1.95,'mixer');\r\nmk(new THREE.CylinderGeometry(0.12,0.12,0.04,16), CHROME, 1.5,1.56,-1.95,'mixer');\r\nmk(new THREE.CylinderGeometry(0.3,0.3,0.8,16), C(0xb8ccd8,0.4,0.3), -0.5,1.7,-2.88,'boiler');\r\nmk(new THREE.SphereGeometry(0.3,12,8,0,Math.PI*2,0,Math.PI\/2), C(0xb8ccd8,0.35,0.3), -0.5,2.1,-2.88,'boiler');\r\nmk(new THREE.BoxGeometry(0.9,0.6,0.05), C(0x1a3a5a,0.5,0.2), -0.5,2.7,-2.87,'boiler');\r\n[2.55,2.75,2.95].forEach(py => { const l = new THREE.Mesh(new THREE.BoxGeometry(0.86,0.02,0.02), COPPER_M); l.position.set(-0.5,py,-2.84); scene.add(l); });\r\nmk(new THREE.CylinderGeometry(0.03,0.03,2.2,8), CHROME, -2.88,1.0,-1.8,'pipes');\r\nconst ph = mk(new THREE.CylinderGeometry(0.03,0.03,0.6,8), CHROME, -2.58,0.3,-1.8,'pipes');\r\nph.rotation.z=Math.PI\/2;\r\nconst pe = mk(new THREE.TorusGeometry(0.1,0.03,8,12,Math.PI\/2), CHROME, -2.88,0.3,-1.8,'pipes');\r\npe.rotation.y=Math.PI;\r\nmk(new THREE.CylinderGeometry(0.12,0.12,0.04,16), C(0x8aaccc,0.4,0.4), 0.8,0.01,0.8,'clean');\r\nmk(new THREE.CylinderGeometry(0.1,0.1,0.01,16), C(0x607080,0.6,0.5), 0.8,0.025,0.8,'clean');\r\nconst tb = mk(new THREE.CylinderGeometry(0.015,0.015,0.7,8), CHROME, -2.9,1.0,0.5,'repair');\r\ntb.rotation.x=Math.PI\/2;\r\nmk(new THREE.CylinderGeometry(0.025,0.025,0.06,8), CHROME, -2.9,1.0,0.15,'repair');\r\nmk(new THREE.CylinderGeometry(0.025,0.025,0.06,8), CHROME, -2.9,1.0,0.85,'repair');\r\nmk(new THREE.BoxGeometry(0.55,0.3,0.02), C(0xf5f0ea,0.9,0.0), -2.87,1.0,0.5,'repair');\r\nmk(new THREE.BoxGeometry(0.7,0.04,0.2), WOOD, -2.63,1.05,0.5,'consult');\r\n\r\n\/\/ Panel + interaction\r\nlet hoveredId=null, selectedId=null;\r\nconst raycaster=new THREE.Raycaster(), mouse=new THREE.Vector2();\r\nconst panel=document.getElementById('panel');\r\n\r\nfunction setHL(m,on) {\r\n  if(!m.material) return;\r\n  m.material.emissive=new THREE.Color(on?0xC86A1F:0x000000);\r\n  m.material.emissiveIntensity=on?0.35:0;\r\n}\r\nfunction hlGroup(sid,on){ clickables.forEach(m=>{ if(m.userData.serviceId===sid) setHL(m,on); }); }\r\nfunction clearHL(){ clickables.forEach(m=>setHL(m,false)); }\r\n\r\nfunction showPanel(s) {\r\n  selectedId=s.id;\r\n  document.getElementById('pNum').textContent=s.num;\r\n  document.getElementById('pTitle').textContent=s.title;\r\n  document.getElementById('pDesc').textContent=s.desc;\r\n  document.getElementById('pWhyLabel').textContent=lang.whyLabel;\r\n  document.getElementById('pReason').textContent=s.reason;\r\n  panel.classList.add('visible');\r\n  clearHL(); hlGroup(s.id,true);\r\n}\r\nfunction hidePanel(){ panel.classList.remove('visible'); selectedId=null; clearHL(); }\r\ndocument.getElementById('panelClose').addEventListener('click', hidePanel);\r\n\r\nlet isDragging=false, lastX=0, lastY=0;\r\nlet rotY=Math.PI\/5, rotX=0.42, targetRotY=Math.PI\/5, targetRotX=0.42;\r\nconst RADIUS=9.5;\r\nfunction updateCamera(){\r\n  camera.position.x=RADIUS*Math.sin(rotY)*Math.cos(rotX);\r\n  camera.position.y=RADIUS*Math.sin(rotX)+1.2;\r\n  camera.position.z=RADIUS*Math.cos(rotY)*Math.cos(rotX);\r\n  camera.lookAt(0,0.8,-0.5);\r\n}\r\nupdateCamera();\r\n\r\nstage.addEventListener('mousedown',e=>{isDragging=true;lastX=e.clientX;lastY=e.clientY;});\r\nwindow.addEventListener('mouseup',()=>isDragging=false);\r\nwindow.addEventListener('mousemove',e=>{\r\n  if(!isDragging){\r\n    const r=canvas.getBoundingClientRect();\r\n    mouse.x=((e.clientX-r.left)\/r.width)*2-1;\r\n    mouse.y=-((e.clientY-r.top)\/r.height)*2+1;\r\n    raycaster.setFromCamera(mouse,camera);\r\n    const hits=raycaster.intersectObjects(clickables);\r\n    const nH=hits.length?hits[0].object.userData.serviceId:null;\r\n    if(nH!==hoveredId){\r\n      if(hoveredId&&hoveredId!==selectedId) hlGroup(hoveredId,false);\r\n      hoveredId=nH;\r\n      if(hoveredId&&hoveredId!==selectedId) hlGroup(hoveredId,true);\r\n      canvas.style.cursor=hoveredId?'pointer':'grab';\r\n    }\r\n    return;\r\n  }\r\n  targetRotY-=(e.clientX-lastX)*0.008;\r\n  targetRotX=Math.max(-0.05,Math.min(0.7,targetRotX+(e.clientY-lastY)*0.006));\r\n  lastX=e.clientX; lastY=e.clientY;\r\n});\r\nstage.addEventListener('click',e=>{\r\n  if(Math.abs(e.clientX-lastX)>5) return;\r\n  const r=canvas.getBoundingClientRect();\r\n  mouse.x=((e.clientX-r.left)\/r.width)*2-1;\r\n  mouse.y=-((e.clientY-r.top)\/r.height)*2+1;\r\n  raycaster.setFromCamera(mouse,camera);\r\n  const hits=raycaster.intersectObjects(clickables);\r\n  if(hits.length){ const s=serviceMap[hits[0].object.userData.serviceId]; if(s) showPanel(s); }\r\n  else hidePanel();\r\n});\r\nlet lTX=0,lTY=0;\r\nstage.addEventListener('touchstart',e=>{lTX=e.touches[0].clientX;lTY=e.touches[0].clientY;},{passive:true});\r\nstage.addEventListener('touchmove',e=>{\r\n  targetRotY-=(e.touches[0].clientX-lTX)*0.01;\r\n  targetRotX=Math.max(-0.05,Math.min(0.7,targetRotX+(e.touches[0].clientY-lTY)*0.007));\r\n  lTX=e.touches[0].clientX; lTY=e.touches[0].clientY;\r\n},{passive:true});\r\nstage.addEventListener('touchend',e=>{\r\n  const t=e.changedTouches[0];\r\n  if(Math.abs(t.clientX-lTX)<10&&Math.abs(t.clientY-lTY)<10){\r\n    const r=canvas.getBoundingClientRect();\r\n    mouse.x=((t.clientX-r.left)\/r.width)*2-1;\r\n    mouse.y=-((t.clientY-r.top)\/r.height)*2+1;\r\n    raycaster.setFromCamera(mouse,camera);\r\n    const hits=raycaster.intersectObjects(clickables);\r\n    if(hits.length){ const s=serviceMap[hits[0].object.userData.serviceId]; if(s) showPanel(s); }\r\n    else hidePanel();\r\n  }\r\n});\r\nwindow.addEventListener('resize',()=>{\r\n  renderer.setSize(W(),H()); camera.aspect=W()\/H(); camera.updateProjectionMatrix();\r\n});\r\n\r\nlet t=0;\r\nfunction animate(){\r\n  requestAnimationFrame(animate); t+=0.005;\r\n  rotY+=(targetRotY-rotY)*0.08; rotX+=(targetRotX-rotX)*0.08;\r\n  updateCamera();\r\n  copperPoint.position.y=3+Math.sin(t)*0.3;\r\n  copperPoint.intensity=0.35+Math.sin(t*1.3)*0.08;\r\n  clickables.forEach(m=>{\r\n    if(!m.userData.serviceId) return;\r\n    const active=m.userData.serviceId===selectedId||m.userData.serviceId===hoveredId;\r\n    const tgt=m.userData.baseY+(active?0.08:0);\r\n    m.position.y+=(tgt-m.position.y)*0.12;\r\n  });\r\n  renderer.render(scene,camera);\r\n}\r\nanimate();\r\ndocument.querySelectorAll('.card').forEach(c=>{\r\n  c.addEventListener('click',()=>stage.scrollIntoView({behavior:'smooth',block:'center'}));\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Services \u2013 Hidro Doko 3D A Group \u00b7 hidrodoko.com Our Services Explore the 3D bathroom \u2014 click any element to discover our service. \ud83d\uddb1 Rotate \ud83d\udc46 Click an object \ud83d\udd0d Scroll to zoom \u00d7 10 services, one team From first installation to ongoing maintenance \u2014 Hidro Doko covers every hydrosanitary need. Why choose us? With [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":18,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-193","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Sh\u00ebrbimet - Hidro Doko<\/title>\n<meta name=\"description\" content=\"Specialist\u00ebt tan\u00eb ofrojn\u00eb nj\u00eb gam\u00eb t\u00eb gjer\u00eb sh\u00ebrbimesh, q\u00eb nga montimi i pajisjeve hidrosanitare n\u00eb sht\u00ebpit\u00eb tuaja, inspektimi i ambjenteve\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hidrodoko.com\/en\/sherbimet\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sh\u00ebrbimet - Hidro Doko\" \/>\n<meta property=\"og:description\" content=\"Specialist\u00ebt tan\u00eb ofrojn\u00eb nj\u00eb gam\u00eb t\u00eb gjer\u00eb sh\u00ebrbimesh, q\u00eb nga montimi i pajisjeve hidrosanitare n\u00eb sht\u00ebpit\u00eb tuaja, inspektimi i ambjenteve\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hidrodoko.com\/en\/sherbimet\/\" \/>\n<meta property=\"og:site_name\" content=\"Hidro Doko\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-15T08:18:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/engineer-working-setup-solar-panel-at-the-roof-top-1-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1331\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/sherbimet\\\/\",\"url\":\"https:\\\/\\\/hidrodoko.com\\\/sherbimet\\\/\",\"name\":\"Sh\u00ebrbimet - Hidro Doko\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/sherbimet\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/sherbimet\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hidrodoko.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/engineer-working-setup-solar-panel-at-the-roof-top-1-1.jpg\",\"datePublished\":\"2026-05-16T13:26:57+00:00\",\"dateModified\":\"2026-06-15T08:18:04+00:00\",\"description\":\"Specialist\u00ebt tan\u00eb ofrojn\u00eb nj\u00eb gam\u00eb t\u00eb gjer\u00eb sh\u00ebrbimesh, q\u00eb nga montimi i pajisjeve hidrosanitare n\u00eb sht\u00ebpit\u00eb tuaja, inspektimi i ambjenteve\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/sherbimet\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hidrodoko.com\\\/sherbimet\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/sherbimet\\\/#primaryimage\",\"url\":\"https:\\\/\\\/hidrodoko.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/engineer-working-setup-solar-panel-at-the-roof-top-1-1.jpg\",\"contentUrl\":\"https:\\\/\\\/hidrodoko.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/engineer-working-setup-solar-panel-at-the-roof-top-1-1.jpg\",\"width\":2000,\"height\":1331},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/sherbimet\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hidrodoko.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sh\u00ebrbimet\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#website\",\"url\":\"https:\\\/\\\/hidrodoko.com\\\/\",\"name\":\"Hidro Doko\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hidrodoko.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#organization\",\"name\":\"Hidro Doko\",\"url\":\"https:\\\/\\\/hidrodoko.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/hidrodoko.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/a_group_logo_algerian_style_A.svg\",\"contentUrl\":\"https:\\\/\\\/hidrodoko.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/a_group_logo_algerian_style_A.svg\",\"width\":1000,\"height\":600,\"caption\":\"Hidro Doko\"},\"image\":{\"@id\":\"https:\\\/\\\/hidrodoko.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sh\u00ebrbimet - Hidro Doko","description":"Specialist\u00ebt tan\u00eb ofrojn\u00eb nj\u00eb gam\u00eb t\u00eb gjer\u00eb sh\u00ebrbimesh, q\u00eb nga montimi i pajisjeve hidrosanitare n\u00eb sht\u00ebpit\u00eb tuaja, inspektimi i ambjenteve","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hidrodoko.com\/en\/sherbimet\/","og_locale":"en_US","og_type":"article","og_title":"Sh\u00ebrbimet - Hidro Doko","og_description":"Specialist\u00ebt tan\u00eb ofrojn\u00eb nj\u00eb gam\u00eb t\u00eb gjer\u00eb sh\u00ebrbimesh, q\u00eb nga montimi i pajisjeve hidrosanitare n\u00eb sht\u00ebpit\u00eb tuaja, inspektimi i ambjenteve","og_url":"https:\/\/hidrodoko.com\/en\/sherbimet\/","og_site_name":"Hidro Doko","article_modified_time":"2026-06-15T08:18:04+00:00","og_image":[{"width":2000,"height":1331,"url":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/engineer-working-setup-solar-panel-at-the-roof-top-1-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hidrodoko.com\/sherbimet\/","url":"https:\/\/hidrodoko.com\/sherbimet\/","name":"Sh\u00ebrbimet - Hidro Doko","isPartOf":{"@id":"https:\/\/hidrodoko.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hidrodoko.com\/sherbimet\/#primaryimage"},"image":{"@id":"https:\/\/hidrodoko.com\/sherbimet\/#primaryimage"},"thumbnailUrl":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/engineer-working-setup-solar-panel-at-the-roof-top-1-1.jpg","datePublished":"2026-05-16T13:26:57+00:00","dateModified":"2026-06-15T08:18:04+00:00","description":"Specialist\u00ebt tan\u00eb ofrojn\u00eb nj\u00eb gam\u00eb t\u00eb gjer\u00eb sh\u00ebrbimesh, q\u00eb nga montimi i pajisjeve hidrosanitare n\u00eb sht\u00ebpit\u00eb tuaja, inspektimi i ambjenteve","breadcrumb":{"@id":"https:\/\/hidrodoko.com\/sherbimet\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hidrodoko.com\/sherbimet\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hidrodoko.com\/sherbimet\/#primaryimage","url":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/engineer-working-setup-solar-panel-at-the-roof-top-1-1.jpg","contentUrl":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/engineer-working-setup-solar-panel-at-the-roof-top-1-1.jpg","width":2000,"height":1331},{"@type":"BreadcrumbList","@id":"https:\/\/hidrodoko.com\/sherbimet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hidrodoko.com\/"},{"@type":"ListItem","position":2,"name":"Sh\u00ebrbimet"}]},{"@type":"WebSite","@id":"https:\/\/hidrodoko.com\/#website","url":"https:\/\/hidrodoko.com\/","name":"Hidro Doko","description":"","publisher":{"@id":"https:\/\/hidrodoko.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hidrodoko.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hidrodoko.com\/#organization","name":"Hidro Doko","url":"https:\/\/hidrodoko.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hidrodoko.com\/#\/schema\/logo\/image\/","url":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/a_group_logo_algerian_style_A.svg","contentUrl":"https:\/\/hidrodoko.com\/wp-content\/uploads\/2026\/05\/a_group_logo_algerian_style_A.svg","width":1000,"height":600,"caption":"Hidro Doko"},"image":{"@id":"https:\/\/hidrodoko.com\/#\/schema\/logo\/image\/"}}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/pages\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":19,"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"predecessor-version":[{"id":705,"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/pages\/193\/revisions\/705"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/media\/18"}],"wp:attachment":[{"href":"https:\/\/hidrodoko.com\/en\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}