{"id":1262,"date":"2026-07-25T11:34:31","date_gmt":"2026-07-25T11:34:31","guid":{"rendered":"https:\/\/demowebsite.ir\/bht\/?page_id=1262"},"modified":"2026-08-10T12:19:49","modified_gmt":"2026-08-10T12:19:49","slug":"licenses","status":"publish","type":"page","link":"https:\/\/demowebsite.ir\/bht\/licenses\/","title":{"rendered":"Licenses"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1262\" class=\"elementor elementor-1262\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdf5aac e-flex e-con-boxed e-con e-parent\" data-id=\"bdf5aac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8367ab elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"f8367ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  BHT \u2014 HEADER + LICENSES PAGE (3D carousel) + FOOTER (merged)\n  ======================================================\n  Single Elementor \"HTML\" widget.\n\n  ALIGNMENT NOTE\n  --------------\n  Unlike the About\/Contact pages, the Licenses widget has no left\/right\n  text column to line up \u2014 it's a full-bleed, centered 3D scene with a\n  centered masthead heading and overlay controls. The header and footer\n  both still use the shared --bht-max \/ --bht-pad-inline variables\n  declared once on #bht-page, exactly as in the other merged pages.\n\n  LANGUAGE SWITCHER (EN \/ DE)\n  -----------------------------\n  Same globe + EN(UK flag) \/ DE(German flag) switcher as the other\n  pages. Static copy (masthead, hint text, loading text) is translated\n  the same way as elsewhere via data-i18n. The 3D carousel's captions\n  and lightbox text are generated by JavaScript from the CERTS array,\n  so those get their own small bilingual data table and re-render\n  themselves on a \"bht:langchange\" event fired by the switcher below.\n  Shares the \"bhtLang\" localStorage key with the other pages.\n-->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@600;700;800;900&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\n<div id=\"bht-page\" style=\"--bht-max:1320px; --bht-pad-inline: clamp(20px, 4vw, 64px);\">\n\n<header class=\"bht-header-wrap\">\n  <div class=\"bht-header-bg\"><\/div>\n\n  <div class=\"bht-header-inner\">\n    <a href=\"https:\/\/demowebsite.ir\/bht\/\" class=\"bht-header-logo\">\n      <img decoding=\"async\" src=\"https:\/\/demowebsite.ir\/bht\/wp-content\/uploads\/2026\/05\/BHT-Logo-300-w.png\" alt=\"BHT Logo\">\n    <\/a>\n\n    <nav class=\"bht-header-nav\">\n      <a href=\"https:\/\/demowebsite.ir\/bht\/industrial-supply\/\" data-i18n=\"nav_industrial\">Industrial supply<\/a>\n      <a href=\"https:\/\/demowebsite.ir\/bht\/engineering-manufacturing\/\" data-i18n=\"nav_engineering\">Engineering &amp; Manufacturing<\/a>\n      <a href=\"https:\/\/demowebsite.ir\/bht\/renewable-clean-energy\/\" data-i18n=\"nav_renewable\">Renewable &amp; Clean Energy<\/a>\n      <a href=\"https:\/\/demowebsite.ir\/bht\/raw-materials-supply\/\" data-i18n=\"nav_raw\">Raw Materials supply<\/a>\n      <a href=\"https:\/\/demowebsite.ir\/bht\/it-cybersecurity\/\" data-i18n=\"nav_it\">IT &amp; Cybersecurity<\/a>\n\n      <div class=\"bht-lang-switch\" role=\"group\" aria-label=\"Language selector\">\n        <svg class=\"bht-lang-globe\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n          <circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><\/circle>\n          <path d=\"M3 12h18M12 3c2.5 2.6 3.8 5.7 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.7-3.8-9s1.3-6.4 3.8-9z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><\/path>\n        <\/svg>\n        <button type=\"button\" class=\"bht-lang-btn is-active\" data-lang=\"en\" aria-pressed=\"true\" aria-label=\"Switch to English\">\n          <span class=\"bht-lang-flag\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 60 40\" width=\"18\" height=\"12\"><rect width=\"60\" height=\"40\" fill=\"#00247d\"\/><path d=\"M0,0 60,40M60,0 0,40\" stroke=\"#fff\" stroke-width=\"8\"\/><path d=\"M0,0 60,40M60,0 0,40\" stroke=\"#cf142b\" stroke-width=\"4\"\/><path d=\"M30,0V40M0,20H60\" stroke=\"#fff\" stroke-width=\"12\"\/><path d=\"M30,0V40M0,20H60\" stroke=\"#cf142b\" stroke-width=\"7\"\/><\/svg>\n          <\/span>\n          <span>EN<\/span>\n        <\/button>\n        <button type=\"button\" class=\"bht-lang-btn\" data-lang=\"de\" aria-pressed=\"false\" aria-label=\"Auf Deutsch umschalten\">\n          <span class=\"bht-lang-flag\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 60 40\" width=\"18\" height=\"12\"><rect width=\"60\" height=\"13.3\" y=\"0\" fill=\"#000\"\/><rect width=\"60\" height=\"13.3\" y=\"13.3\" fill=\"#dd0000\"\/><rect width=\"60\" height=\"13.4\" y=\"26.6\" fill=\"#ffce00\"\/><\/svg>\n          <\/span>\n          <span>DE<\/span>\n        <\/button>\n      <\/div>\n    <\/nav>\n\n    <button class=\"bht-header-toggle\" aria-label=\"Toggle navigation\" aria-expanded=\"false\">\n      <span><\/span>\n      <span><\/span>\n      <span><\/span>\n    <\/button>\n  <\/div>\n<\/header>\n\n<div class=\"bht-widget-root\" id=\"bhtWidgetRoot\">\n\n<div class=\"stage\">\n  <div class=\"masthead\">\n    <h1 data-i18n=\"licenses_title\">Licenses<\/h1>\n  <\/div>\n\n  <div id=\"canvas-wrap\">\n    <div id=\"loading\" data-i18n=\"loading_text\">Unsealing records\u2026<\/div>\n    <div class=\"caption\" id=\"caption\">\n      <p class=\"eyebrow\" id=\"capEyebrow\">\u2014<\/p>\n      <h2 id=\"capTitle\">\u2014<\/h2>\n    <\/div>\n    <button class=\"nav prev\" id=\"prevBtn\" aria-label=\"Previous certificate\">\u2039<\/button>\n    <button class=\"nav next\" id=\"nextBtn\" aria-label=\"Next certificate\">\u203a<\/button>\n  <\/div>\n\n  <div class=\"controls\">\n    <div class=\"dots\" id=\"dots\"><\/div>\n    <div class=\"counter\" id=\"counter\">01 \/ 04<\/div>\n  <\/div>\n  <p class=\"hint\">\n    <span class=\"hint-desktop\" data-i18n=\"hint_desktop\">Drag to browse, click a certificate to step to it, click the front one to zoom in \u2014 or use <kbd>\u2190<\/kbd> <kbd>\u2192<\/kbd><\/span>\n    <span class=\"hint-touch\" data-i18n=\"hint_touch\">Swipe to browse, tap a certificate to step to it, tap the front one to zoom in<\/span>\n  <\/p>\n<\/div>\n\n<div class=\"lightbox\" id=\"lightbox\">\n  <button class=\"lightbox-close\" id=\"lightboxClose\" aria-label=\"Close zoom\">\u00d7<\/button>\n  <figure class=\"lightbox-figure\">\n    <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"Certificate detail\">\n    <figcaption>\n      <p class=\"eyebrow\" id=\"lbEyebrow\">\u2014<\/p>\n      <h2 id=\"lbTitle\">\u2014<\/h2>\n    <\/figcaption>\n  <\/figure>\n<\/div>\n\n<\/div>\n\n<footer class=\"bht-footer-wrap\">\n  <div class=\"bht-footer-inner\">\n    <div class=\"bht-footer-brand\">\n      <a href=\"https:\/\/demowebsite.ir\/bht\/\" class=\"bht-footer-logo\">\n        <img decoding=\"async\" src=\"https:\/\/demowebsite.ir\/bht\/wp-content\/uploads\/2026\/05\/BHT-Logo-300-w.png\" alt=\"BHT Logo\">\n      <\/a>\n\n      <div class=\"bht-footer-social\">\n        <a href=\"https:\/\/de.linkedin.com\/company\/bht-electric-control-mechanic-gmbh-&-co.-kg\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"BHT on LinkedIn\">\n          <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\">\n            <path d=\"M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.03-1.85-3.03-1.85 0-2.14 1.45-2.14 2.94v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45z\"\/>\n          <\/svg>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"bht-footer-column\">\n      <h4 data-i18n=\"footer_contact_heading\">Contact us<\/h4>\n      <a href=\"https:\/\/demowebsite.ir\/bht\/contact-us\/\" data-i18n=\"footer_contact_link\">Contact BHT<\/a>\n      <a href=\"https:\/\/demowebsite.ir\/bht\/terms-of-use\/\" data-i18n=\"footer_terms_link\">Terms &amp; Conditions<\/a>\n    <\/div>\n\n    <div class=\"bht-footer-column\">\n      <h4 data-i18n=\"footer_about_heading\">About us<\/h4>\n      <a href=\"https:\/\/demowebsite.ir\/bht\/about-us\/\" data-i18n=\"footer_about_link\">About BHT<\/a>\n      <a href=\"https:\/\/demowebsite.ir\/bht\/licenses\/\" data-i18n=\"footer_licenses_link\">Licenses<\/a>\n      <a href=\"https:\/\/demowebsite.ir\/bht\/privacy-policy-2\/\" data-i18n=\"footer_privacy_link\">Privacy &amp; Policy<\/a>\n    <\/div>\n  <\/div>\n\n  <div class=\"bht-footer-bottom\">\n    <p>&copy; <span class=\"bht-footer-year\"><\/span> <span data-i18n=\"footer_rights\">BHT Electric Control Mechanic. All rights reserved.<\/span><\/p>\n  <\/div>\n<\/footer>\n\n<\/div><!-- \/#bht-page -->\n\n<style>\n#bht-page, #bht-page * { box-sizing: border-box; }\n#bht-page a { text-decoration: none; }\n\n\/* ============================================================\n   SHARED ALIGNMENT SYSTEM\n============================================================ *\/\n.bht-header-inner {\n  max-width: var(--bht-max);\n  margin-inline: auto;\n  width: 100%;\n  padding-inline: var(--bht-pad-inline);\n  box-sizing: border-box;\n}\n\n.bht-footer-inner {\n  max-width: var(--bht-max);\n  margin-inline: auto;\n  width: 100%;\n  padding-left: 0;\n  padding-right: var(--bht-pad-inline);\n  box-sizing: border-box;\n}\n\n\/* ============ HEADER ============ *\/\n.bht-header-wrap {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  z-index: 999;\n  isolation: isolate;\n  padding-block: 52px;\n  background: rgba(255, 255, 255, 0.08);\n  backdrop-filter: blur(5px) saturate(160%);\n  -webkit-backdrop-filter: blur(10px) saturate(160%);\n  border: none;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.25);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    inset 0 1px 0 rgba(255, 255, 255, 0.3),\n    inset 0 -1px 0 rgba(0, 0, 0, 0.1);\n  transition: box-shadow 0.6s ease;\n}\n\n.bht-header-wrap:hover {\n  box-shadow:\n    0 12px 40px rgba(0, 0, 0, 0.3),\n    inset 0 1px 0 rgba(255, 255, 255, 0.4),\n    inset 0 -1px 0 rgba(0, 0, 0, 0.15);\n}\n\n.bht-header-bg {\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  z-index: -1;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.bht-header-bg::before {\n  content: '';\n  position: absolute;\n  top: -30%; left: -20%;\n  width: 160%; height: 160%;\n  background: radial-gradient(circle at 30% 30%, rgba(120, 200, 255, 0.35), transparent 60%),\n              radial-gradient(circle at 70% 70%, rgba(255, 150, 220, 0.3), transparent 60%);\n  filter: blur(40px);\n  animation: bht-liquid-morph 12s ease-in-out infinite;\n}\n\n@keyframes bht-liquid-morph {\n  0%, 100% { border-radius: 42% 58% 63% 37% \/ 41% 44% 56% 59%; transform: rotate(0deg) scale(1); }\n  33% { border-radius: 63% 37% 41% 59% \/ 51% 62% 38% 49%; transform: rotate(8deg) scale(1.05); }\n  66% { border-radius: 37% 63% 55% 45% \/ 60% 40% 60% 40%; transform: rotate(-6deg) scale(0.97); }\n}\n\n.bht-header-logo {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n}\n\n.bht-header-logo img {\n  height: 64px;\n  width: auto;\n  display: block;\n}\n\n.bht-header-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n}\n\n.bht-header-nav {\n  display: flex;\n  align-items: center;\n  gap: clamp(20px, 2.6vw, 40px);\n  flex-wrap: nowrap;\n}\n\n.bht-header-nav a {\n  position: relative;\n  color: #ffffff;\n  text-decoration: none;\n  font-family: 'Archivo', sans-serif;\n  font-size: 0.7rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  white-space: nowrap;\n  opacity: 0.9;\n  padding-bottom: 8px;\n  transition: opacity 0.6s ease, color 0.6s ease;\n}\n\n.bht-header-nav a::after {\n  content: '';\n  position: absolute;\n  left: 0; bottom: 0;\n  width: 100%; height: 2px;\n  background: #F68D1E;\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.6s ease;\n}\n\n.bht-header-nav a:hover { opacity: 1; color: #F68D1E; }\n.bht-header-nav a:hover::after { transform: scaleX(1); }\n\n\/* ============ LANGUAGE SWITCH ============ *\/\n.bht-lang-switch {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: clamp(8px, 1.5vw, 24px);\n  padding-left: clamp(8px, 1.5vw, 24px);\n  border-left: 1px solid rgba(255, 255, 255, 0.25);\n}\n\n.bht-lang-globe { color: rgba(255, 255, 255, 0.65); flex-shrink: 0; }\n\n.bht-lang-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: rgba(255, 255, 255, 0.06);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 20px;\n  padding: 5px 10px 5px 6px;\n  color: rgba(255, 255, 255, 0.75);\n  font-family: 'Archivo', sans-serif;\n  font-size: 0.65rem;\n  font-weight: 700;\n  letter-spacing: 0.03em;\n  cursor: pointer;\n  transition: background .2s ease, border-color .2s ease, color .2s ease;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.bht-lang-btn:hover { border-color: rgba(246, 141, 30, 0.6); color: #ffffff; }\n.bht-lang-btn.is-active { background: rgba(246, 141, 30, 0.18); border-color: #F68D1E; color: #ffffff; }\n.bht-lang-flag { display: inline-flex; align-items: center; border-radius: 2px; overflow: hidden; line-height: 0; }\n.bht-lang-flag svg { display: block; }\n\n.bht-header-toggle {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  width: 32px; height: 32px;\n  background: transparent;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.bht-header-toggle:focus,\n.bht-header-toggle:active { outline: none; background: transparent; }\n\n.bht-header-toggle span {\n  display: block;\n  width: 26px; height: 2px;\n  background: #ffffff;\n  border-radius: 2px;\n  transition: transform 0.6s ease, opacity 0.6s ease;\n}\n\n.bht-header-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\n.bht-header-toggle.is-active span:nth-child(2) { opacity: 0; }\n.bht-header-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\n\n@media (max-width: 1100px) {\n  .bht-header-wrap { padding-block: 18px; }\n  .bht-header-logo img { height: 50px; }\n\n  .bht-header-nav {\n    position: absolute;\n    top: 100%; left: 0; right: 0;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n    padding-inline: var(--bht-pad-inline);\n    background: rgba(20, 20, 25, 0.55);\n    backdrop-filter: blur(12px) saturate(160%);\n    -webkit-backdrop-filter: blur(12px) saturate(160%);\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n    max-height: 0;\n    overflow: hidden;\n    opacity: 0;\n    pointer-events: none;\n    transition: max-height 0.6s ease, opacity 0.6s ease, padding 0.6s ease;\n  }\n\n  .bht-header-nav.is-open { max-height: 400px; opacity: 1; pointer-events: auto; padding-block: 16px; }\n  .bht-header-nav a { width: 100%; padding: 10px 4px; font-size: 0.85rem; }\n\n  .bht-lang-switch {\n    margin-left: 0;\n    padding-left: 0;\n    border-left: none;\n    width: 100%;\n    padding-block: 10px 4px;\n  }\n\n  .bht-header-toggle { display: flex; }\n}\n\n@media (max-width: 480px) {\n  .bht-header-wrap { padding-block: 14px; }\n  .bht-header-logo img { height: 40px; }\n}\n\n\/* ============ LICENSES WIDGET ============ *\/\n.bht-widget-root{\n  --ink:#12151C;\n  --brass:#A9822F;\n  --brass-bright:#D3A94A;\n  --steel-2:#8B94A3;\n}\n.bht-widget-root, .bht-widget-root *{ box-sizing:border-box; }\n.bht-widget-root{\n  height:140vh;\n  margin:0;\n  background:radial-gradient(ellipse at 50% -10%, #232a38 0%, var(--ink) 55%), var(--ink);\n  font-family:'Inter', sans-serif;\n  color:#F3EEDF;\n  overflow:hidden;\n  position:relative;\n  padding-top: clamp(60px, 11%, 140px);\n}\n.stage{\npadding-top:5vh;\n}\n.bht-widget-root::before{\n  content:\"\";\n  position:fixed; inset:0;\n  background-image:\n    repeating-linear-gradient(115deg, rgba(211,169,74,0.035) 0px, rgba(211,169,74,0.035) 1px, transparent 1px, transparent 26px),\n    repeating-linear-gradient(25deg, rgba(211,169,74,0.03) 0px, rgba(211,169,74,0.03) 1px, transparent 1px, transparent 26px);\n  pointer-events:none;\n  z-index:0;\n}\n\n.bht-widget-root .stage{ position:relative; height:100vh; display:flex; flex-direction:column; z-index:1; }\n\n.bht-widget-root .masthead{\n  text-align:center;\n  padding:28px 32px 20px;\n  border-bottom:1px solid rgba(211,169,74,0.25);\n  flex:none;\n}\n.bht-widget-root .masthead h1{\n  margin:0;\n  font-family:'Fraunces', serif; font-weight:600;\n  font-size:clamp(20px,3vw,30px);\n  letter-spacing:0.02em;\n  color:#F6F2E6;\n}\n\n.bht-widget-root #canvas-wrap{ position:relative; flex:1; min-height:0; touch-action:none; cursor:grab; }\n.bht-widget-root canvas{ display:block; width:100%; height:100%; }\n\n.bht-widget-root .caption{\n  position:absolute; left:50%; top:14px; transform:translateX(-50%);\n  text-align:center; pointer-events:none;\n  max-width:90%;\n  padding:0 10px;\n}\n.bht-widget-root .caption .eyebrow{ margin:0 0 3px; font-family:'IBM Plex Mono', monospace; font-size:clamp(9px,1.6vw,10px); letter-spacing:1.8px; text-transform:uppercase; color:var(--accent, var(--brass-bright)); transition:color 0.4s; }\n.bht-widget-root .caption h2{ margin:0; font-family:'Fraunces', serif; font-weight:600; font-size:clamp(15px,2.4vw,22px); color:#F6F2E6; }\n\n.bht-widget-root .nav{\n  position:absolute; top:50%; transform:translateY(-50%);\n  width:44px; height:44px; border-radius:50%;\n  border:1px solid rgba(211,169,74,0.4);\n  background:rgba(18,21,28,0.35);\n  backdrop-filter:blur(4px);\n  color:var(--brass-bright); font-size:21px;\n  display:flex; align-items:center; justify-content:center;\n  cursor:pointer; transition:background 0.2s, transform 0.15s, border-color 0.2s;\n  z-index:2;\n}\n.bht-widget-root .nav:hover{ background:rgba(211,169,74,0.16); border-color:var(--brass-bright); }\n.bht-widget-root .nav:active{ transform:translateY(-50%) scale(0.92); }\n.bht-widget-root .nav:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px; }\n.bht-widget-root .nav.prev{ left:18px; }\n.bht-widget-root .nav.next{ right:18px; }\n\n.bht-widget-root .controls{ flex:none; display:flex; align-items:center; justify-content:center; gap:16px; padding:6px 0 10px; }\n.bht-widget-root .dots{ display:flex; gap:9px; }\n.bht-widget-root .dot{ width:9px; height:9px; border-radius:50%; background:rgba(211,169,74,0.25); border:1px solid rgba(211,169,74,0.5); cursor:pointer; padding:0; transition:background 0.2s, transform 0.2s; }\n.bht-widget-root .dot.active{ background:var(--brass-bright); transform:scale(1.15); }\n.bht-widget-root .dot:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:3px; }\n.bht-widget-root .counter{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:1.5px; color:var(--steel-2); min-width:56px; }\n\n.bht-widget-root .hint{ flex:none; text-align:center; padding:0 16px 16px; font-size:clamp(10.5px,1.6vw,11.5px); color:var(--steel-2); }\n.bht-widget-root .hint kbd{ font-family:'IBM Plex Mono', monospace; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:3px; padding:1px 5px; font-size:10.5px; }\n.bht-widget-root .hint .hint-touch{ display:none; }\n\n@media (hover:none) and (pointer:coarse){\n  .bht-widget-root .hint .hint-desktop{ display:none; }\n  .bht-widget-root .hint .hint-touch{ display:inline; }\n}\n\n.bht-widget-root #loading{\n  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;\n  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:2px; color:var(--brass-bright);\n  text-transform:uppercase; transition:opacity 0.5s; z-index:5;\n  text-align:center; padding:0 20px;\n}\n\n.bht-widget-root.lightbox-open #canvas-wrap{ pointer-events:none; }\n\n.bht-widget-root .lightbox{\n  position:fixed; inset:0; z-index:999999999; display:flex; align-items:center; justify-content:center;\n  background:rgba(8,10,14,0.88); backdrop-filter:blur(6px);\n  opacity:0; visibility:hidden; transition:opacity 0.35s ease, visibility 0.35s;\n  padding:40px 20px; cursor:zoom-out;\n}\n.bht-widget-root .lightbox.open{ opacity:1; visibility:visible; }\n.bht-widget-root .lightbox-figure{\n  margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;\n  max-width:92vw; transform:scale(0.92); transition:transform 0.4s cubic-bezier(.2,.8,.3,1.15);\n  cursor:default;\n}\n.bht-widget-root .lightbox.open .lightbox-figure{ transform:scale(1); }\n.bht-widget-root .lightbox-figure img{\n  max-height:78vh; max-width:100%; display:block; border-radius:6px; background:#fff;\n  box-shadow:0 40px 90px -20px rgba(0,0,0,0.65); border:1px solid rgba(211,169,74,0.35);\n}\n.bht-widget-root .lightbox-figure figcaption{ text-align:center; }\n.bht-widget-root .lightbox-figure .eyebrow{ margin:0 0 2px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--brass-bright); }\n.bht-widget-root .lightbox-figure h2{ margin:0; font-family:'Fraunces', serif; font-weight:600; font-size:clamp(16px,3vw,19px); color:#F6F2E6; }\n.bht-widget-root .lightbox-close{\n  position:absolute; top:22px; right:26px; width:42px; height:42px; border-radius:50%;\n  border:1px solid rgba(211,169,74,0.4); background:rgba(255,255,255,0.05); color:var(--brass-bright);\n  font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;\n  transition:background 0.2s, border-color 0.2s;\n  z-index:2;\n}\n.bht-widget-root .lightbox-close:hover{ background:rgba(211,169,74,0.16); border-color:var(--brass-bright); }\n.bht-widget-root .lightbox-close:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px; }\n\n@media (max-width:1024px){\n  .bht-widget-root{ height:130vh; padding-top: clamp(52px, 9%, 110px); }\n}\n\n@media (max-width:900px){\n  .bht-widget-root{ height:125vh; }\n  .bht-widget-root .masthead{ padding:22px 20px 16px; }\n}\n\n@media (max-width:640px){\n  .bht-widget-root{ height:118vh; padding-top: clamp(40px, 8%, 90px); }\n  .bht-widget-root .masthead{ padding:18px 18px 14px; gap:12px; }\n  .bht-widget-root .nav{ width:38px; height:38px; font-size:18px; }\n  .bht-widget-root .nav.prev{ left:8px; } .bht-widget-root .nav.next{ right:8px; }\n  .bht-widget-root .lightbox{ padding:24px 16px; }\n  .bht-widget-root .lightbox-close{ top:14px; right:16px; width:38px; height:38px; font-size:20px; }\n}\n\n@media (max-width:480px){\n  .bht-widget-root{ height:110vh; padding-top: clamp(32px, 7%, 70px); }\n  .bht-widget-root .nav{ width:34px; height:34px; font-size:16px; }\n  .bht-widget-root .nav.prev{ left:4px; } .bht-widget-root .nav.next{ right:4px; }\n  .bht-widget-root .controls{ gap:10px; }\n  .bht-widget-root .counter{ font-size:10px; min-width:48px; }\n}\n\n@media (orientation: portrait) and (min-width: 900px){\n  .bht-widget-root{ height:120vh; }\n}\n\n\/* ============ FOOTER ============ *\/\n.bht-footer-wrap {\n  background: linear-gradient(180deg, #131D2E 0%, #18253B 100%);\n  overflow: hidden;\n  padding-block-start: 60px;\n  font-family: 'Inter', sans-serif;\n}\n\n.bht-footer-inner {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 48px;\n  padding-top: 3vh;\n}\n\n.bht-footer-brand {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  flex-shrink: 0;\n  padding: 0;\n  margin: 0;\n}\n\n.bht-footer-logo {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n}\n\n.bht-footer-logo img {\n  height: 56px;\n  width: auto;\n  display: block;\n}\n\n.bht-footer-social { display: flex; gap: 10px; }\n\n.bht-footer-social a {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px; height: 34px;\n  border-radius: 6px;\n  background: rgba(255, 255, 255, 0.08);\n  color: #ffffff;\n  transition: background 0.6s ease, color 0.6s ease;\n}\n\n.bht-footer-social a:hover { background: #F68D1E; color: #131D2E; }\n\n.bht-footer-column {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 140px;\n}\n\n.bht-footer-column h4 {\n  margin: 0;\n  color: #ffffff;\n  font-family: 'Archivo', sans-serif;\n  font-weight: 700;\n  font-size: 1.05rem;\n}\n\n.bht-footer-column a {\n  color: rgba(255, 255, 255, 0.55);\n  text-decoration: none;\n  font-size: 0.95rem;\n  transition: color 0.6s ease;\n}\n\n.bht-footer-column a:hover { color: #F68D1E; }\n\n.bht-footer-bottom {\n  max-width: var(--bht-max);\n  margin: 0 auto;\n  margin-top: 60px;\n  padding: 24px var(--bht-pad-inline) 24px 0;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.bht-footer-bottom p {\n  margin: 0;\n  color: rgba(255, 255, 255, 0.4);\n  font-size: 0.8rem;\n  text-align: center;\n}\n\n@media (max-width: 1100px) {\n  .bht-footer-wrap { padding-block-start: 48px; }\n  .bht-footer-inner { padding-top: 2vh; gap: 40px; }\n}\n\n@media (max-width: 800px) {\n  .bht-footer-inner {\n    flex-direction: column;\n    flex-wrap: nowrap;\n    align-items: center;\n    text-align: center;\n    gap: 40px;\n  }\n  .bht-footer-brand,\n  .bht-footer-column { width: 100%; align-items: center; }\n  .bht-footer-social { justify-content: center; }\n}\n\n@media (max-width: 600px) {\n  .bht-footer-wrap { padding-block-start: 40px; }\n  .bht-footer-bottom { margin-top: 40px; }\n}\n\n@media (max-width: 480px) {\n  .bht-footer-inner { padding-top: 1.5vh; }\n  .bht-footer-logo img { height: 44px; }\n}\n<\/style>\n\n<script>\n(function() {\n  var toggle = document.querySelector('.bht-header-toggle');\n  var nav = document.querySelector('.bht-header-nav');\n\n  if (!toggle || !nav) return;\n\n  toggle.addEventListener('click', function() {\n    var isOpen = nav.classList.toggle('is-open');\n    toggle.classList.toggle('is-active', isOpen);\n    toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n  });\n\n  document.addEventListener('click', function(e) {\n    if (!nav.contains(e.target) && !toggle.contains(e.target)) {\n      nav.classList.remove('is-open');\n      toggle.classList.remove('is-active');\n      toggle.setAttribute('aria-expanded', 'false');\n    }\n  });\n\n  window.addEventListener('resize', function() {\n    if (window.innerWidth > 1100) {\n      nav.classList.remove('is-open');\n      toggle.classList.remove('is-active');\n      toggle.setAttribute('aria-expanded', 'false');\n    }\n  });\n})();\n<\/script>\n\n<script>\ndocument.querySelector('.bht-footer-year').textContent = new Date().getFullYear();\n<\/script>\n\n<!-- ============ LANGUAGE SWITCHER (EN \/ DE) ============\n     Hand-written translations, shares the \"bhtLang\" localStorage\n     key with the other pages. Fires a \"bht:langchange\" custom event\n     that the carousel script (further below) listens for, so its\n     JS-generated captions\/lightbox text stay in sync. -->\n<script>\n(function(){\n  var TRANSLATIONS = {\n    nav_industrial:   { en: 'Industrial supply',              de: 'Industrielle Zulieferung' },\n    nav_engineering:  { en: 'Engineering & Manufacturing',     de: 'Ingenieurwesen & Fertigung' },\n    nav_renewable:    { en: 'Renewable & Clean Energy',        de: 'Erneuerbare & Saubere Energie' },\n    nav_raw:          { en: 'Raw Materials supply',            de: 'Rohstoffversorgung' },\n    nav_it:           { en: 'IT & Cybersecurity',               de: 'IT & Cybersicherheit' },\n\n    licenses_title:   { en: 'Licenses',                        de: 'Lizenzen' },\n    loading_text:     { en: 'Unsealing records\u2026',               de: 'Unterlagen werden entsiegelt\u2026' },\n    hint_desktop:     { en: 'Drag to browse, click a certificate to step to it, click the front one to zoom in \u2014 or use \u2190 \u2192',\n                         de: 'Ziehen zum Durchbl\u00e4ttern, auf ein Zertifikat klicken, um dorthin zu springen, auf das vordere klicken zum Vergr\u00f6\u00dfern \u2013 oder \u2190 \u2192 verwenden' },\n    hint_touch:       { en: 'Swipe to browse, tap a certificate to step to it, tap the front one to zoom in',\n                         de: 'Wischen zum Durchbl\u00e4ttern, auf ein Zertifikat tippen, um dorthin zu springen, auf das vordere tippen zum Vergr\u00f6\u00dfern' },\n\n    footer_contact_heading: { en: 'Contact us',                 de: 'Kontakt' },\n    footer_contact_link:    { en: 'Contact BHT',                de: 'BHT kontaktieren' },\n    footer_terms_link:      { en: 'Terms & Conditions',         de: 'Allgemeine Gesch\u00e4ftsbedingungen' },\n    footer_about_heading:   { en: 'About us',                   de: '\u00dcber uns' },\n    footer_about_link:      { en: 'About BHT',                  de: '\u00dcber BHT' },\n    footer_licenses_link:   { en: 'Licenses',                   de: 'Lizenzen' },\n    footer_privacy_link:    { en: 'Privacy & Policy',           de: 'Datenschutz' },\n    footer_rights:           { en: 'BHT Electric Control Mechanic. All rights reserved.',\n                                de: 'BHT Electric Control Mechanic. Alle Rechte vorbehalten.' }\n  };\n\n  var STORAGE_KEY = 'bhtLang';\n\n  function getSavedLang(){\n    try {\n      var v = window.localStorage.getItem(STORAGE_KEY);\n      return (v === 'de' || v === 'en') ? v : null;\n    } catch(e){ return null; }\n  }\n\n  function saveLang(lang){\n    try { window.localStorage.setItem(STORAGE_KEY, lang); } catch(e){ \/* storage unavailable, ignore *\/ }\n  }\n\n  \/\/ Exposed so the carousel script (loaded separately, on demand) can\n  \/\/ read the current language without re-implementing storage logic.\n  window.bhtGetLang = function(){\n    return (document.documentElement.getAttribute('lang') === 'de') ? 'de' : 'en';\n  };\n\n  function applyLanguage(lang){\n    var nodes = document.querySelectorAll('[data-i18n]');\n    nodes.forEach(function(node){\n      var key = node.getAttribute('data-i18n');\n      var entry = TRANSLATIONS[key];\n      if (!entry) return;\n      node.textContent = entry[lang] || entry.en;\n    });\n\n    document.documentElement.setAttribute('lang', lang);\n\n    var buttons = document.querySelectorAll('.bht-lang-btn');\n    buttons.forEach(function(btn){\n      var isActive = btn.getAttribute('data-lang') === lang;\n      btn.classList.toggle('is-active', isActive);\n      btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');\n    });\n\n    saveLang(lang);\n    document.dispatchEvent(new CustomEvent('bht:langchange', { detail: { lang: lang } }));\n  }\n\n  function initLanguage(){\n    var saved = getSavedLang();\n    var browserLang = (navigator.language || '').toLowerCase().indexOf('de') === 0 ? 'de' : 'en';\n    applyLanguage(saved || browserLang);\n  }\n\n  document.addEventListener('click', function(e){\n    var btn = e.target.closest ? e.target.closest('.bht-lang-btn') : null;\n    if (!btn) return;\n    var lang = btn.getAttribute('data-lang');\n    if (lang === 'de' || lang === 'en') applyLanguage(lang);\n  });\n\n  initLanguage();\n})();\n<\/script>\n\n<script>\n(function(){\n  \/\/ Guard against Elementor's editor re-injecting this widget's raw HTML every\n  \/\/ time you edit the page (it doesn't reload the page \u2014 it re-runs this exact\n  \/\/ script tag in the same document). Without this, a second run crashes with\n  \/\/ \"redeclaration of let X\" and the whole widget silently stops working,\n  \/\/ which is what was actually blocking the images from ever loading.\n  if (window.__bhtCarouselInit) return;\n  window.__bhtCarouselInit = true;\n\n  function init(){\n\n\/\/ Each entry carries both languages; the eyebrow ISO code stays identical\n\/\/ in both (standard numbers aren't translated), only the descriptive\n\/\/ title\/eyebrow text differs.\nconst CERTS = [\n  { file: \"https:\/\/demowebsite.ir\/bht\/wp-content\/uploads\/2026\/07\/ISO-BHT_page-0001.jpg\",\n    eyebrow: { en: \"Integrated Management System\", de: \"Integriertes Managementsystem\" },\n    title:   { en: \"IMS\", de: \"IMS\" },\n    accent: 0xC24A42 },\n  { file: \"https:\/\/demowebsite.ir\/bht\/wp-content\/uploads\/2026\/07\/ISO-BHT_page-0002.jpg\",\n    eyebrow: { en: \"ISO 45001:2018\", de: \"ISO 45001:2018\" },\n    title:   { en: \"Occupational Health & Safety\", de: \"Arbeitsschutz & Arbeitssicherheit\" },\n    accent: 0xC9962C },\n  { file: \"https:\/\/demowebsite.ir\/bht\/wp-content\/uploads\/2026\/07\/ISO-BHT_page-0003.jpg\",\n    eyebrow: { en: \"ISO 14001:2015\", de: \"ISO 14001:2015\" },\n    title:   { en: \"Environmental Management\", de: \"Umweltmanagement\" },\n    accent: 0x4C7A4C },\n  { file: \"https:\/\/demowebsite.ir\/bht\/wp-content\/uploads\/2026\/07\/ISO-BHT_page-0004.jpg\",\n    eyebrow: { en: \"ISO 9001:2015\", de: \"ISO 9001:2015\" },\n    title:   { en: \"Quality Management System\", de: \"Qualit\u00e4tsmanagementsystem\" },\n    accent: 0xC24A42 }\n];\nconst TOTAL = CERTS.length;\nconst CARD_HEIGHT = 3.0;\nconst SPACING = 2.6;\n\nfunction certLang(){ return (window.bhtGetLang ? window.bhtGetLang() : 'en'); }\nfunction certEyebrow(i){ return CERTS[i].eyebrow[certLang()] || CERTS[i].eyebrow.en; }\nfunction certTitle(i){ return CERTS[i].title[certLang()] || CERTS[i].title.en; }\n\nconst root = document.getElementById('bhtWidgetRoot');\nconst wrap = root.querySelector('#canvas-wrap');\nconst scene = new THREE.Scene();\nscene.fog = new THREE.Fog(0x12151c, 6, 15);\n\nconst camera = new THREE.PerspectiveCamera(38, wrap.clientWidth \/ wrap.clientHeight, 0.1, 100);\nconst camBase = new THREE.Vector3(0, 0.35, 8.2);\ncamera.position.copy(camBase);\ncamera.lookAt(0, 0, 0);\n\nconst renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\nrenderer.setSize(wrap.clientWidth, wrap.clientHeight);\nrenderer.outputEncoding = THREE.sRGBEncoding;\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\nrenderer.toneMappingExposure = 0.82;\nwrap.insertBefore(renderer.domElement, wrap.firstChild);\n\nconst rig = new THREE.Group();\nscene.add(rig);\n\nscene.add(new THREE.HemisphereLight(0xfff6e5, 0x14181f, 0.55));\nconst keyLight = new THREE.DirectionalLight(0xffffff, 0.3);\nkeyLight.position.set(2, 4, 5);\nscene.add(keyLight);\nconst glow = new THREE.PointLight(0xD3A94A, 0.9, 9, 2);\nglow.position.set(0, 0.6, 2.5);\nscene.add(glow);\n\nfunction makeShadowTexture(){\n  const s = 256;\n  const c = document.createElement('canvas'); c.width = s; c.height = s;\n  const ctx = c.getContext('2d');\n  const g = ctx.createRadialGradient(s\/2, s\/2, 0, s\/2, s\/2, s\/2);\n  g.addColorStop(0, 'rgba(10,8,4,0.55)');\n  g.addColorStop(0.6, 'rgba(10,8,4,0.22)');\n  g.addColorStop(1, 'rgba(10,8,4,0)');\n  ctx.fillStyle = g;\n  ctx.fillRect(0, 0, s, s);\n  return new THREE.CanvasTexture(c);\n}\nconst shadowTex = makeShadowTexture();\n\nconst loader = new THREE.TextureLoader();\nloader.setCrossOrigin('anonymous');\nconst cards = [];\n\nfunction buildCard(data){\n  return new Promise(resolve => {\n    loader.load(\n      data.file,\n      tex => {\n        tex.encoding = THREE.sRGBEncoding;\n        tex.anisotropy = 8;\n        const img = tex.image;\n        const aspect = img.width \/ img.height;\n        const h = CARD_HEIGHT, w = CARD_HEIGHT * aspect, depth = 0.05;\n\n        const geo = new THREE.BoxGeometry(w, h, depth);\n        const edgeMat  = new THREE.MeshStandardMaterial({ color: 0x2b3345, roughness: 0.45, metalness: 0.5 });\n        const backMat  = new THREE.MeshStandardMaterial({ color: data.accent, roughness: 0.5, metalness: 0.35 });\n        const frontMat = new THREE.MeshBasicMaterial({ map: tex, color: 0xc7c7c7 });\n        const mesh = new THREE.Mesh(geo, [edgeMat, edgeMat, edgeMat, edgeMat, frontMat, backMat]);\n        rig.add(mesh);\n\n        const shadowGeo = new THREE.PlaneGeometry(w * 1.3, h * 0.5);\n        const shadowMat = new THREE.MeshBasicMaterial({ map: shadowTex, transparent: true, depthWrite: false });\n        const shadowMesh = new THREE.Mesh(shadowGeo, shadowMat);\n        shadowMesh.rotation.x = -Math.PI \/ 2;\n        shadowMesh.position.y = -h\/2 - 0.75;\n        rig.add(shadowMesh);\n\n        resolve({ mesh, shadowMesh, w, h, data });\n      },\n      undefined,\n      err => {\n        console.error('[BHT carousel] failed to load texture:', data.file, err);\n        const loadingEl = root.querySelector('#loading');\n        if (loadingEl) loadingEl.textContent = 'Failed to load: ' + data.file;\n        resolve(null);\n      }\n    );\n  });\n}\n\nPromise.all(CERTS.map(buildCard)).then(built => {\n  cards.push(...built.filter(Boolean));\n  if (cards.length) {\n    const loadingEl = root.querySelector('#loading');\n    if (loadingEl) { loadingEl.style.opacity = '0'; setTimeout(() => loadingEl.remove(), 550); }\n  }\n  buildDots();\n  updateCaption(true);\n  applyResponsiveRig();\n  animate();\n});\n\nfunction computeRigScale(){\n  const w = wrap.clientWidth;\n  if (w < 380) return 0.6;\n  if (w < 480) return 0.68;\n  if (w < 640) return 0.78;\n  if (w < 900) return 0.88;\n  return 1;\n}\nfunction applyResponsiveRig(){\n  rig.scale.setScalar(computeRigScale());\n}\n\nlet current = 0;\nlet target = 0;\nlet dragging = false;\nlet dragStartX = 0;\nlet dragStartY = 0;\nlet dragStartTime = 0;\nlet dragStartCurrent = 0;\nconst DRAG_SENS = 220;\nconst CLICK_MAX_DIST = 8;\nconst CLICK_MAX_TIME = 350;\n\nconst raycaster = new THREE.Raycaster();\nconst pointerNDC = new THREE.Vector2();\n\nconst dotsWrap = root.querySelector('#dots');\nconst counterEl = root.querySelector('#counter');\nconst capEyebrow = root.querySelector('#capEyebrow');\nconst capTitle = root.querySelector('#capTitle');\n\nfunction buildDots(){\n  CERTS.forEach((c, i) => {\n    const dot = document.createElement('button');\n    dot.className = 'dot';\n    dot.setAttribute('aria-label', 'Go to certificate ' + (i+1));\n    dot.addEventListener('click', () => goTo(i));\n    dotsWrap.appendChild(dot);\n  });\n}\n\nfunction logicalIndex(v){ return ((Math.round(v) % TOTAL) + TOTAL) % TOTAL; }\n\nfunction renormalize(){\n  const shift = Math.floor(current \/ TOTAL) * TOTAL;\n  if (shift !== 0) {\n    current -= shift;\n    target -= shift;\n    dragStartCurrent -= shift;\n  }\n}\n\nfunction goTo(i){\n  const curLogical = logicalIndex(target);\n  let diff = i - curLogical;\n  if (diff > TOTAL\/2) diff -= TOTAL;\n  if (diff < -TOTAL\/2) diff += TOTAL;\n  target += diff;\n}\nfunction next(){ target += 1; }\nfunction prev(){ target -= 1; }\n\nroot.querySelector('#nextBtn').addEventListener('click', next);\nroot.querySelector('#prevBtn').addEventListener('click', prev);\n\nconst lightboxEl = root.querySelector('#lightbox');\nconst lightboxImg = root.querySelector('#lightboxImg');\nconst lbEyebrow = root.querySelector('#lbEyebrow');\nconst lbTitle = root.querySelector('#lbTitle');\nlet lightboxIndex = 0;\nlet lightboxOpen = false;\n\nfunction openLightbox(idx){\n  lightboxIndex = idx;\n  const c = CERTS[idx];\n  lightboxImg.src = c.file;\n  lightboxImg.alt = certEyebrow(idx) + ' \u2014 ' + certTitle(idx);\n  lbEyebrow.textContent = certEyebrow(idx);\n  lbTitle.textContent = certTitle(idx);\n  lightboxEl.classList.add('open');\n  root.classList.add('lightbox-open');\n  lightboxOpen = true;\n}\nfunction closeLightbox(){\n  lightboxEl.classList.remove('open');\n  root.classList.remove('lightbox-open');\n  lightboxOpen = false;\n}\nroot.querySelector('#lightboxClose').addEventListener('click', closeLightbox);\nlightboxEl.addEventListener('click', e => { if (e.target === lightboxEl) closeLightbox(); });\n\n\/\/ Keep captions\/lightbox text in sync when the header language switch is used.\ndocument.addEventListener('bht:langchange', function(){\n  updateCaption(true);\n  if (lightboxOpen) openLightbox(lightboxIndex);\n});\n\nwindow.addEventListener('keydown', e => {\n  if (e.key === 'Escape') { closeLightbox(); return; }\n  if (e.key === 'ArrowRight') {\n    if (lightboxOpen) { const i = (lightboxIndex + 1) % TOTAL; goTo(i); openLightbox(i); }\n    else next();\n  }\n  if (e.key === 'ArrowLeft') {\n    if (lightboxOpen) { const i = (lightboxIndex - 1 + TOTAL) % TOTAL; goTo(i); openLightbox(i); }\n    else prev();\n  }\n});\n\nfunction cardIndexAtPointer(clientX, clientY){\n  if (!cards.length) return null;\n  const rect = renderer.domElement.getBoundingClientRect();\n  pointerNDC.x = ((clientX - rect.left) \/ rect.width) * 2 - 1;\n  pointerNDC.y = -(((clientY - rect.top) \/ rect.height) * 2 - 1);\n  raycaster.setFromCamera(pointerNDC, camera);\n  const hits = raycaster.intersectObjects(cards.map(c => c.mesh));\n  if (!hits.length) return null;\n  return cards.findIndex(c => c.mesh === hits[0].object);\n}\n\nwrap.addEventListener('pointerdown', e => {\n  if (e.target.closest('.nav')) return;\n  dragging = true;\n  dragStartX = e.clientX;\n  dragStartY = e.clientY;\n  dragStartTime = performance.now();\n  dragStartCurrent = current;\n  wrap.setPointerCapture(e.pointerId);\n  wrap.style.cursor = 'grabbing';\n});\n\nwrap.addEventListener('pointermove', e => {\n  if (dragging) {\n    const dx = e.clientX - dragStartX;\n    current = dragStartCurrent - dx \/ DRAG_SENS;\n    target = current;\n    return;\n  }\n  const idx = cardIndexAtPointer(e.clientX, e.clientY);\n  wrap.style.cursor = idx !== null ? 'pointer' : 'grab';\n});\n\nwrap.addEventListener('pointerleave', () => {\n  if (dragging) { endDrag(); return; }\n  wrap.style.cursor = 'grab';\n});\n\nfunction endDrag(){\n  if (!dragging) return;\n  dragging = false;\n  target = Math.round(current);\n  wrap.style.cursor = 'grab';\n}\n\nwrap.addEventListener('pointerup', e => {\n  const dx = e.clientX - dragStartX;\n  const dy = e.clientY - dragStartY;\n  const dt = performance.now() - dragStartTime;\n  const wasTap = Math.abs(dx) < CLICK_MAX_DIST && Math.abs(dy) < CLICK_MAX_DIST && dt < CLICK_MAX_TIME;\n  endDrag();\n  if (!wasTap) return;\n\n  const idx = cardIndexAtPointer(e.clientX, e.clientY);\n  if (idx === null) return;\n\n  const frontIdx = logicalIndex(target);\n  if (idx === frontIdx) { openLightbox(idx); return; }\n\n  let diff = idx - frontIdx;\n  if (diff > TOTAL\/2) diff -= TOTAL;\n  if (diff < -TOTAL\/2) diff += TOTAL;\n  if (diff > 0) next();\n  else if (diff < 0) prev();\n});\nwrap.addEventListener('pointercancel', endDrag);\n\nlet mouseNX = 0, mouseNY = 0;\nwindow.addEventListener('mousemove', e => {\n  mouseNX = (e.clientX \/ window.innerWidth) * 2 - 1;\n  mouseNY = (e.clientY \/ window.innerHeight) * 2 - 1;\n});\n\nlet lastActive = -1;\nfunction updateCaption(force){\n  const idx = logicalIndex(current);\n  if (idx === lastActive && !force) return;\n  lastActive = idx;\n  capEyebrow.textContent = certEyebrow(idx);\n  capTitle.textContent = certTitle(idx);\n  root.querySelector('#caption').style.setProperty('--accent', '#' + CERTS[idx].accent.toString(16).padStart(6,'0'));\n  dotsWrap.querySelectorAll('.dot').forEach((d,i) => d.classList.toggle('active', i === idx));\n  counterEl.textContent = String(idx+1).padStart(2,'0') + ' \/ ' + String(TOTAL).padStart(2,'0');\n}\n\nconst clock = new THREE.Clock();\nfunction animate(){\n  requestAnimationFrame(animate);\n  const t = clock.getElapsedTime();\n\n  if (!dragging) current += (target - current) * 0.09;\n  renormalize();\n\n  cards.forEach((card, i) => {\n    let diff = i - current;\n    while (diff > TOTAL\/2) diff -= TOTAL;\n    while (diff < -TOTAL\/2) diff += TOTAL;\n    const abs = Math.abs(diff);\n\n    const x = diff * SPACING;\n    const z = -abs * 1.35;\n    const rotY = THREE.MathUtils.clamp(-diff, -1, 1) * (Math.PI\/3.6);\n    const scale = Math.max(1 - abs*0.22, 0.42);\n    const bob = Math.sin(t*0.8 + i*1.7) * 0.03;\n    const opacity = THREE.MathUtils.clamp(1.4 - abs*0.8, 0, 1);\n\n    card.mesh.position.set(x, bob, z);\n    card.mesh.rotation.y = rotY;\n    card.mesh.scale.setScalar(scale);\n    card.mesh.material.forEach(m => { m.transparent = true; m.opacity = opacity; });\n\n    card.shadowMesh.position.x = x;\n    card.shadowMesh.position.z = z + 0.2;\n    card.shadowMesh.scale.setScalar(scale);\n    card.shadowMesh.material.opacity = Math.max(0.7 - abs*0.35, 0) * (0.9);\n  });\n\n  const activeCard = cards[logicalIndex(current)];\n  if (activeCard){\n    glow.position.x += (activeCard.mesh.position.x * rig.scale.x - glow.position.x) * 0.1;\n  }\n\n  camera.position.x += ((camBase.x + mouseNX*0.35) - camera.position.x) * 0.05;\n  camera.position.y += ((camBase.y - mouseNY*0.2) - camera.position.y) * 0.05;\n  camera.lookAt(0, 0, -0.4);\n\n  updateCaption(false);\n  renderer.render(scene, camera);\n}\n\nlet resizeRAF = null;\nwindow.addEventListener('resize', () => {\n  if (resizeRAF) cancelAnimationFrame(resizeRAF);\n  resizeRAF = requestAnimationFrame(() => {\n    camera.aspect = wrap.clientWidth \/ wrap.clientHeight;\n    camera.updateProjectionMatrix();\n    renderer.setSize(wrap.clientWidth, wrap.clientHeight);\n    applyResponsiveRig();\n  });\n});\n\n  } \/\/ end init()\n\n  if (window.THREE) {\n    init();\n  } else {\n    const threeScript = document.createElement('script');\n    threeScript.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js';\n    threeScript.onload = init;\n    document.head.appendChild(threeScript);\n  }\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Industrial supply Engineering &amp; Manufacturing Renewable &amp; Clean Energy Raw Materials supply IT &amp; Cybersecurity EN DE Licenses Unsealing records\u2026 \u2014 \u2014 \u2039 \u203a 01 \/ 04 Drag to browse, click a certificate to step to it, click the front one to zoom in \u2014 or use \u2190 \u2192 Swipe to browse, tap a certificate [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebsite.ir\/bht\/wp-json\/wp\/v2\/pages\/1262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebsite.ir\/bht\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebsite.ir\/bht\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebsite.ir\/bht\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebsite.ir\/bht\/wp-json\/wp\/v2\/comments?post=1262"}],"version-history":[{"count":28,"href":"https:\/\/demowebsite.ir\/bht\/wp-json\/wp\/v2\/pages\/1262\/revisions"}],"predecessor-version":[{"id":1555,"href":"https:\/\/demowebsite.ir\/bht\/wp-json\/wp\/v2\/pages\/1262\/revisions\/1555"}],"wp:attachment":[{"href":"https:\/\/demowebsite.ir\/bht\/wp-json\/wp\/v2\/media?parent=1262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}