{"id":640,"date":"2022-08-15T08:24:40","date_gmt":"2022-08-15T08:24:40","guid":{"rendered":"https:\/\/startersites.io\/blocksy\/renovation\/?page_id=6"},"modified":"2026-09-11T12:02:28","modified_gmt":"2026-09-11T12:02:28","slug":"home","status":"publish","type":"page","link":"https:\/\/aris.hr\/","title":{"rendered":"Po\u010detna"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-9abea31\" data-block-id=\"9abea31\"><style>.stk-9abea31 {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-9abea31-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-20b3448\" data-v=\"4\" data-block-id=\"20b3448\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-20b3448-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-20b3448-inner-blocks\"><style>\r\n\r\nbody:not(.hl-builder) .aris-hero {\r\n  --ah-red: #e1211b;\r\n  --ah-ink: #0b0b0c;\r\n  --ah-overlay: rgba(6, 8, 11, 0.38);\r\n  --ah-cycle: 6s;\r\n\r\n  \/* frosted panel: a little grey in the fill, not pure transparency *\/\r\n  --ah-glass-top: rgba(216, 218, 222, 0.22);\r\n  --ah-glass-bottom: rgba(146, 150, 156, 0.15);\r\n  --ah-glass-line: rgba(255, 255, 255, 0.24);\r\n\r\n  --ah-ease: cubic-bezier(0.22, 1, 0.36, 1);\r\n  --ah-ease-sweep: cubic-bezier(0.66, 0, 0.2, 1);\r\n\r\n  --ah-pad: clamp(16px, 3.2vw, 44px);\r\n\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n\r\n  min-height: 100vh;\r\n  min-height: 100svh;\r\n\r\n  padding: var(--ah-pad);\r\n\r\n  overflow: hidden;\r\n\r\n  background: #090b0d;\r\n  color: #fff;\r\n\r\n  font-family:\r\n    \"Helvetica Neue\",\r\n    Helvetica,\r\n    Arial,\r\n    system-ui,\r\n    sans-serif;\r\n\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-hero *,\r\nbody:not(.hl-builder) .aris-hero *::before,\r\nbody:not(.hl-builder) .aris-hero *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-hero :focus-visible {\r\n  outline: 2px solid #fff;\r\n  outline-offset: 4px;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   BACKGROUND STAGE\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-stage {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  overflow: hidden;\r\n  background: #090b0d;\r\n  border-radius: 0 !important;\r\n}\r\n\r\nbody:not(.hl-builder) .ah-stage::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 2;\r\n  pointer-events: none;\r\n  background: var(--ah-overlay);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-stage::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 3;\r\n  pointer-events: none;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(5, 7, 10, 0.42) 0%,\r\n      rgba(5, 7, 10, 0.09) 24%,\r\n      rgba(5, 7, 10, 0.03) 52%,\r\n      rgba(5, 7, 10, 0.49) 100%\r\n    );\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   SLIDES\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-slide {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n\r\n  opacity: 0;\r\n  border-radius: 0 !important;\r\n\r\n  transform:\r\n    scale(1.055)\r\n    translate3d(\r\n      calc(var(--ah-dir, 1) * 2.2%),\r\n      0,\r\n      0\r\n    );\r\n\r\n  transition:\r\n    opacity 1.05s var(--ah-ease),\r\n    transform 1.55s var(--ah-ease);\r\n\r\n  will-change:\r\n    opacity,\r\n    transform;\r\n}\r\n\r\nbody:not(.hl-builder) .ah-slide img {\r\n  display: block;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 0 !important;\r\n\r\n  object-fit: cover;\r\n  object-position: center;\r\n\r\n  transform: scale(1.001);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-slide.is-active {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    scale(1)\r\n    translate3d(0, 0, 0);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-slide.is-leaving {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    scale(1.025)\r\n    translate3d(\r\n      calc(var(--ah-dir, 1) * -1.5%),\r\n      0,\r\n      0\r\n    );\r\n}\r\n\r\nbody:not(.hl-builder)\r\n.aris-hero:not(.is-ready)\r\n.ah-slide.is-active {\r\n  opacity: 0;\r\n  transform: scale(1.085);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   NAVIGATION (UNIFIED PILL)\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-nav {\r\n  position: relative;\r\n  z-index: 4;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__inner {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n\r\n  width: fit-content;\r\n  max-width: calc(100% - 40px);\r\n  min-height: 64px;\r\n\r\n  gap: 0;\r\n  padding: 8px 12px 8px 30px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.20);\r\n  border-radius: 8px !important;\r\n\r\n  background: rgba(24, 24, 25, 0.90);\r\n  \r\n  -webkit-backdrop-filter: blur(22px) saturate(125%);\r\n  backdrop-filter: blur(22px) saturate(125%);\r\n  \r\n  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.22);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__mark {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 0 0 auto;\r\n  text-decoration: none;\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__mark::after {\r\n  content: \"\";\r\n  display: block;\r\n  width: 1px;\r\n  height: 32px;\r\n  margin-left: 22px;\r\n  background: rgba(255, 255, 255, 0.18);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__logo {\r\n  display: block;\r\n  height: clamp(17px, 1.5vw, 22px);\r\n  width: auto;\r\n  -webkit-filter: none;\r\n  filter: none;\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__links {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: clamp(24px, 1.8vw, 30px);\r\n  margin-left: 24px;\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__link {\r\n  display: inline-block;\r\n  color: rgba(255, 255, 255, 0.84);\r\n  font-size: clamp(14px, 1.05vw, 16px);\r\n  font-weight: 500;\r\n  letter-spacing: -0.01em;\r\n  text-transform: none !important;\r\n  text-decoration: none;\r\n  white-space: nowrap;\r\n  transition: color 0.3s var(--ah-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__link:hover,\r\nbody:not(.hl-builder) .ah-nav__link:focus-visible {\r\n  color: #ffffff;\r\n}\r\n\r\n\/* INNER CTA BUTTON (\"Upit\") - WIDTH REDUCED TO 96px *\/\r\nbody:not(.hl-builder) .ah-nav__btn {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 7px;\r\n\r\n  width: 96px;\r\n  min-width: 96px;\r\n  min-height: 40px;\r\n  margin-left: clamp(24px, 2vw, 30px);\r\n  padding: 6px 12px;\r\n  overflow: hidden;\r\n  flex: 0 0 96px;\r\n  \r\n  background: rgba(255, 255, 255, 0.94);\r\n  color: var(--ah-ink);\r\n  border-radius: 3px !important;\r\n  border: 1px solid rgba(255, 255, 255, 0.6);\r\n  \r\n  font-size: clamp(14px, 1.05vw, 15px);\r\n  font-weight: 600;\r\n  line-height: 1;\r\n  text-decoration: none;\r\n  \r\n  transition:\r\n    transform 0.7s var(--ah-ease),\r\n    background 0.5s var(--ah-ease),\r\n    border-color 0.6s var(--ah-ease),\r\n    box-shadow 0.7s var(--ah-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__btn:hover,\r\nbody:not(.hl-builder) .ah-nav__btn:focus-visible {\r\n  background: #ffffff;\r\n  border-color: #ffffff;\r\n  transform: translate3d(0, -3px, 0);\r\n  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__btn:active {\r\n  transform: translate3d(0, -1px, 0) scale(0.985);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__btn-label {\r\n  position: relative;\r\n  z-index: 2;\r\n  transition: transform 0.8s var(--ah-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__btn:hover .ah-nav__btn-label,\r\nbody:not(.hl-builder) .ah-nav__btn:focus-visible .ah-nav__btn-label {\r\n  transform: translate3d(-2px, 0, 0);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__btn-icon {\r\n  position: relative;\r\n  z-index: 2;\r\n  display: grid;\r\n  place-items: center;\r\n  width: 18px;\r\n  height: 18px;\r\n  flex: 0 0 18px;\r\n  overflow: visible;\r\n  color: inherit;\r\n  transition: transform 0.75s var(--ah-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__btn:hover .ah-nav__btn-icon,\r\nbody:not(.hl-builder) .ah-nav__btn:focus-visible .ah-nav__btn-icon {\r\n  transform: scale(1.045);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__btn-icon .ah-arrow {\r\n  width: 15px;\r\n  height: 15px;\r\n  margin: -7.5px 0 0 -7.5px;\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__btn:hover .ah-arrow--out,\r\nbody:not(.hl-builder) .ah-nav__btn:focus-visible .ah-arrow--out {\r\n  opacity: 0;\r\n  transform: translate3d(21px, -21px, 0);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-nav__btn:hover .ah-arrow--in,\r\nbody:not(.hl-builder) .ah-nav__btn:focus-visible .ah-arrow--in {\r\n  opacity: 1;\r\n  transform: translate3d(0, 0, 0);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   HERO CONTENT\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-content {\r\n  position: relative;\r\n  z-index: 3;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  margin: auto 0;\r\n\r\n  padding:\r\n    clamp(42px, 8vh, 92px)\r\n    0;\r\n\r\n  text-align: center;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   TITLE\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-title {\r\n  max-width: 13.5ch;\r\n\r\n  margin:\r\n    0 0\r\n    clamp(24px, 3.4vh, 40px);\r\n\r\n  font-size:\r\n    clamp(44px, 7vw, 104px);\r\n\r\n  font-weight: 500;\r\n\r\n  line-height: 0.94;\r\n\r\n  letter-spacing: -0.052em;\r\n\r\n  text-wrap: balance;\r\n\r\n  text-shadow:\r\n    0 12px 60px rgba(0, 0, 0, 0.20);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   CTA BUTTON - UPDATED TO WHITE IN NORMAL STATE\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-cta {\r\n  position: relative;\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n\r\n  gap: clamp(10px, 1vw, 14px);\r\n\r\n  min-height: 58px;\r\n\r\n  padding: 7px;\r\n  padding-left: clamp(24px, 2.5vw, 34px);\r\n  padding-right: clamp(16px, 2.5vw, 24px);\r\n\r\n  overflow: hidden;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.9);\r\n  border-radius: 0 !important;\r\n\r\n  \/* Clean White Normal State *\/\r\n  background: #ffffff;\r\n  color: var(--ah-ink);\r\n\r\n  font-family: inherit;\r\n\r\n  font-size:\r\n    clamp(14px, 1.05vw, 16px);\r\n\r\n  font-weight: 600;\r\n\r\n  letter-spacing: -0.015em;\r\n  line-height: 1;\r\n\r\n  text-decoration: none;\r\n\r\n  cursor: pointer;\r\n\r\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);\r\n\r\n  -webkit-backdrop-filter: blur(24px) saturate(180%);\r\n  backdrop-filter: blur(24px) saturate(180%);\r\n\r\n  transition:\r\n    transform 0.7s var(--ah-ease),\r\n    background 0.5s var(--ah-ease),\r\n    color 0.5s var(--ah-ease),\r\n    border-color 0.6s var(--ah-ease),\r\n    box-shadow 0.7s var(--ah-ease);\r\n}\r\n\r\n\r\n\/* LABEL *\/\r\n\r\nbody:not(.hl-builder) .ah-cta__label {\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  transition:\r\n    transform\r\n    0.8s\r\n    var(--ah-ease);\r\n}\r\n\r\nbody:not(.hl-builder)\r\n.ah-cta:hover\r\n.ah-cta__label,\r\n\r\nbody:not(.hl-builder)\r\n.ah-cta:focus-visible\r\n.ah-cta__label {\r\n  transform:\r\n    translate3d(-3px, 0, 0);\r\n}\r\n\r\n\r\n\/* ICON ARROW ONLY *\/\r\n\r\nbody:not(.hl-builder) .ah-cta__icon {\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  display: grid;\r\n  place-items: center;\r\n\r\n  width: 24px;\r\n  height: 24px;\r\n\r\n  flex: 0 0 auto;\r\n\r\n  overflow: visible;\r\n\r\n  background: transparent;\r\n  color: inherit;\r\n\r\n  transform:\r\n    translateZ(0);\r\n\r\n  transition:\r\n    transform 0.75s var(--ah-ease);\r\n}\r\n\r\nbody:not(.hl-builder)\r\n.ah-cta:hover\r\n.ah-cta__icon,\r\n\r\nbody:not(.hl-builder)\r\n.ah-cta:focus-visible\r\n.ah-cta__icon {\r\n  transform:\r\n    scale(1.045);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   ARROW LOOP\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-arrow {\r\n  position: absolute;\r\n\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  width: 19px;\r\n  height: 19px;\r\n\r\n  margin:\r\n    -9.5px 0 0 -9.5px;\r\n\r\n  pointer-events: none;\r\n\r\n  will-change:\r\n    transform,\r\n    opacity;\r\n}\r\n\r\n\r\n\/* CURRENT ARROW *\/\r\n\r\nbody:not(.hl-builder) .ah-arrow--out {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translate3d(0, 0, 0);\r\n\r\n  transition:\r\n    transform\r\n    0.58s\r\n    cubic-bezier(0.55, 0.08, 0.35, 1),\r\n\r\n    opacity\r\n    0.24s\r\n    ease\r\n    0.17s;\r\n}\r\n\r\n\r\n\/* flies out top-right *\/\r\n\r\nbody:not(.hl-builder)\r\n.ah-cta:hover\r\n.ah-arrow--out,\r\n\r\nbody:not(.hl-builder)\r\n.ah-cta:focus-visible\r\n.ah-arrow--out {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translate3d(\r\n      27px,\r\n      -27px,\r\n      0\r\n    );\r\n}\r\n\r\n\r\n\/* NEW ARROW starts bottom-left *\/\r\n\r\nbody:not(.hl-builder) .ah-arrow--in {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translate3d(\r\n      -27px,\r\n      27px,\r\n      0\r\n    );\r\n\r\n  transition:\r\n    transform\r\n    0.72s\r\n    cubic-bezier(0.16, 1, 0.3, 1)\r\n    0.20s,\r\n\r\n    opacity\r\n    0.26s\r\n    ease\r\n    0.21s;\r\n}\r\n\r\n\r\n\/* returns to exact center *\/\r\n\r\nbody:not(.hl-builder)\r\n.ah-cta:hover\r\n.ah-arrow--in,\r\n\r\nbody:not(.hl-builder)\r\n.ah-cta:focus-visible\r\n.ah-arrow--in {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translate3d(\r\n      0,\r\n      0,\r\n      0\r\n    );\r\n}\r\n\r\n\r\n\/* BODY MOTION *\/\r\n\r\nbody:not(.hl-builder) .ah-cta:hover,\r\nbody:not(.hl-builder) .ah-cta:focus-visible {\r\n  transform:\r\n    translate3d(0, -3px, 0);\r\n\r\n  background: #ffffff;\r\n  color: #000;\r\n  border-color: #ffffff;\r\n\r\n  box-shadow:\r\n    0 14px 38px rgba(0, 0, 0, 0.20);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-cta:active {\r\n  transform:\r\n    translate3d(0, -1px, 0)\r\n    scale(0.985);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   THUMB SELECTOR\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-thumbs {\r\n  position: relative;\r\n\r\n  z-index: 4;\r\n\r\n  display: flex;\r\n\r\n  gap:\r\n    clamp(8px, 0.9vw, 12px);\r\n\r\n  width:\r\n    max-content;\r\n\r\n  max-width:\r\n    100%;\r\n\r\n  margin:\r\n    0 auto;\r\n\r\n  padding:\r\n    clamp(8px, 0.9vw, 11px);\r\n\r\n  border:\r\n    1px solid\r\n    var(--ah-glass-line);\r\n\r\n  border-radius: 0 !important;\r\n\r\n  background:\r\n    rgba(12, 14, 17, 0.26);\r\n\r\n  -webkit-backdrop-filter:\r\n    blur(20px);\r\n\r\n  backdrop-filter:\r\n    blur(20px);\r\n\r\n  box-shadow:\r\n    0 10px 44px rgba(0, 0, 0, 0.10);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   THUMBS\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-thumb {\r\n  position: relative;\r\n\r\n  width:\r\n    clamp(82px, 10.5vw, 128px);\r\n\r\n  aspect-ratio:\r\n    3 \/ 2;\r\n\r\n  padding: 0;\r\n\r\n  border: 0;\r\n  border-radius: 0 !important;\r\n\r\n  background: none;\r\n\r\n  cursor: pointer;\r\n\r\n  -webkit-tap-highlight-color:\r\n    transparent;\r\n}\r\n\r\nbody:not(.hl-builder) .ah-thumb__frame {\r\n  position: absolute;\r\n\r\n  inset: 4px;\r\n\r\n  overflow: hidden;\r\n\r\n  border-radius: 0 !important;\r\n\r\n  background:\r\n    rgba(255, 255, 255, 0.08);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-thumb img {\r\n  display: block;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  object-fit: cover;\r\n\r\n  filter:\r\n    saturate(0.68)\r\n    brightness(0.68);\r\n\r\n  transform:\r\n    scale(1.001);\r\n\r\n  transition:\r\n    transform 0.8s var(--ah-ease),\r\n    filter 0.55s var(--ah-ease);\r\n}\r\n\r\nbody:not(.hl-builder)\r\n.ah-thumb:hover\r\nimg {\r\n  transform:\r\n    scale(1.07);\r\n\r\n  filter:\r\n    saturate(0.90)\r\n    brightness(0.90);\r\n}\r\n\r\nbody:not(.hl-builder)\r\n.ah-thumb.is-active\r\nimg {\r\n  filter: none;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   PROGRESS RING\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-ring {\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  overflow: visible;\r\n\r\n  opacity: 0;\r\n\r\n  pointer-events: none;\r\n\r\n  transition:\r\n    opacity\r\n    0.45s\r\n    var(--ah-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ah-ring rect {\r\n  fill: none;\r\n\r\n  stroke: #fff;\r\n\r\n  stroke-width: 2;\r\n\r\n  stroke-linecap: butt;\r\n\r\n  stroke-dasharray: 100;\r\n  stroke-dashoffset: 100;\r\n}\r\n\r\nbody:not(.hl-builder)\r\n.ah-thumb.is-active\r\n.ah-ring {\r\n  opacity: 1;\r\n}\r\n\r\n@keyframes ah-draw {\r\n  from {\r\n    stroke-dashoffset: 100;\r\n  }\r\n\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\nbody:not(.hl-builder)\r\n.aris-hero.is-ready\r\n.ah-thumb.is-progress\r\n.ah-ring\r\nrect {\r\n  animation:\r\n    ah-draw\r\n    var(--ah-cycle)\r\n    linear\r\n    forwards;\r\n}\r\n\r\nbody:not(.hl-builder)\r\n.aris-hero.is-paused\r\n.ah-ring\r\nrect {\r\n  animation-play-state:\r\n    paused;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   ENTRANCE\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .ah-anim {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(18px)\r\n    scale(0.985);\r\n\r\n  transition:\r\n    opacity\r\n    0.75s\r\n    var(--ah-ease)\r\n    var(--ah-d, 0s),\r\n\r\n    transform\r\n    1s\r\n    var(--ah-ease)\r\n    var(--ah-d, 0s);\r\n\r\n  will-change:\r\n    opacity,\r\n    transform;\r\n}\r\n\r\nbody:not(.hl-builder) .ah-anim--down {\r\n  transform:\r\n    translateY(-14px)\r\n    scale(0.985);\r\n}\r\n\r\nbody:not(.hl-builder)\r\n.aris-hero.is-ready\r\n.ah-anim {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0)\r\n    scale(1);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   TABLET\r\n   ============================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n  body:not(.hl-builder) .ah-title {\r\n    max-width: 13ch;\r\n    letter-spacing: -0.04em;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-ring rect {\r\n    stroke-width: 2.4;\r\n  }\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   MOBILE\r\n   ============================================================= *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n  body:not(.hl-builder) .aris-hero {\r\n    --ah-pad: 14px;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-nav__inner {\r\n    width: 100%;\r\n    min-height: 52px;\r\n    padding: 8px 8px 8px 16px;\r\n    gap: 10px;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-nav__mark::after {\r\n    height: 24px;\r\n    margin-left: 10px;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-nav__logo {\r\n    height: 14px;\r\n  }\r\n  \r\n  body:not(.hl-builder) .ah-nav__links {\r\n    gap: 10px;\r\n    margin-left: 10px;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-nav__link {\r\n    font-size: 11px;\r\n  }\r\n  \r\n  body:not(.hl-builder) .ah-nav__btn {\r\n    width: 84px;\r\n    min-width: 84px;\r\n    min-height: 32px;\r\n    margin-left: 12px;\r\n    padding: 5px 10px;\r\n    flex-basis: 84px;\r\n    font-size: 11px;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-title {\r\n    max-width: 12ch;\r\n\r\n    font-size:\r\n      clamp(38px, 11vw, 56px);\r\n\r\n    line-height: 0.97;\r\n\r\n    letter-spacing:\r\n      -0.042em;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-content {\r\n    padding:\r\n      28px 0;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-cta {\r\n    min-height: 54px;\r\n\r\n    gap: 14px;\r\n\r\n    padding-left: 22px;\r\n\r\n    font-size: 14px;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-cta__icon {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-thumbs {\r\n    gap: 7px;\r\n    padding: 7px;\r\n\r\n    border-radius: 0 !important;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-thumb {\r\n    width:\r\n      clamp(74px, 25vw, 104px);\r\n\r\n    border-radius: 0 !important;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-thumb__frame {\r\n    inset: 3px;\r\n    border-radius: 0 !important;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-ring rect {\r\n    stroke-width: 3;\r\n  }\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   SHORT LANDSCAPE\r\n   ============================================================= *\/\r\n\r\n@media\r\n(max-height: 620px)\r\nand\r\n(orientation: landscape) {\r\n\r\n  body:not(.hl-builder) .ah-title {\r\n    font-size:\r\n      clamp(30px, 5.4vw, 58px);\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-content {\r\n    padding: 16px 0;\r\n  }\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   REDUCED MOTION\r\n   ============================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  body:not(.hl-builder) .aris-hero *,\r\n  body:not(.hl-builder) .aris-hero *::before,\r\n  body:not(.hl-builder) .aris-hero *::after {\r\n    animation-duration:\r\n      0.001ms !important;\r\n\r\n    animation-delay:\r\n      0ms !important;\r\n\r\n    transition-duration:\r\n      0.001ms !important;\r\n\r\n    transition-delay:\r\n      0ms !important;\r\n  }\r\n\r\n  body:not(.hl-builder) .ah-ring rect {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- ============================================================\r\n     HERO\r\n     ============================================================ -->\r\n\r\n<section\r\n  class=\"aris-hero\"\r\n  data-cycle=\"6000\"\r\n  aria-label=\"Aris d.o.o. \u2014 uvodna sekcija\"\r\n>\r\n\r\n\r\n  <!-- BACKGROUND -->\r\n\r\n  <div class=\"ah-stage\">\r\n\r\n    <div\r\n      class=\"ah-slide is-active\"\r\n      aria-hidden=\"false\"\r\n    >\r\n      <img\r\n        src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e95b34793a2d512a998e1.webp\"\r\n        alt=\"\"\r\n        loading=\"eager\"\r\n        fetchpriority=\"high\"\r\n        decoding=\"async\"\r\n      >\r\n    <\/div>\r\n\r\n\r\n    <div\r\n      class=\"ah-slide\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <img\r\n        src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e94edbcef8b5f2c22388b.jpg\"\r\n        alt=\"\"\r\n        loading=\"lazy\"\r\n        decoding=\"async\"\r\n      >\r\n    <\/div>\r\n\r\n\r\n    <div\r\n      class=\"ah-slide\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <img\r\n        src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e96e5bcef8b5f2c227ac9.jpg\"\r\n        alt=\"\"\r\n        loading=\"lazy\"\r\n        decoding=\"async\"\r\n      >\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- UNIFIED NAV -->\r\n\r\n  <nav\r\n    class=\"ah-nav ah-anim ah-anim--down\"\r\n    aria-label=\"Glavna navigacija\"\r\n  >\r\n    <div class=\"ah-nav__inner\">\r\n\r\n      <a\r\n        class=\"ah-nav__mark\"\r\n        href=\"\/\"\r\n        aria-label=\"Aris d.o.o.\"\r\n      >\r\n        <img\r\n          class=\"ah-nav__logo\"\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9fcb75e62f080b47871708.png\"\r\n          alt=\"Aris d.o.o.\"\r\n          decoding=\"async\"\r\n        >\r\n      <\/a>\r\n\r\n\r\n      <div class=\"ah-nav__links\">\r\n        <a\r\n          class=\"ah-nav__link\"\r\n          href=\"#projekti\"\r\n        >\r\n          Projekti\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"ah-nav__link\"\r\n          href=\"#usluge\"\r\n        >\r\n          Usluge\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"ah-nav__link\"\r\n          href=\"#kontakt\"\r\n        >\r\n          Kontakt\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <a\r\n        class=\"ah-nav__btn\"\r\n        href=\"#kontakt\"\r\n      >\r\n        <span class=\"ah-nav__btn-label\">Upit<\/span>\r\n\r\n        <span class=\"ah-nav__btn-icon\" aria-hidden=\"true\">\r\n          <svg\r\n            class=\"ah-arrow ah-arrow--out lucide lucide-arrow-up-right\"\r\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n            width=\"24\"\r\n            height=\"24\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <path d=\"M7 7h10v10\"\/>\r\n            <path d=\"M7 17 17 7\"\/>\r\n          <\/svg>\r\n\r\n          <svg\r\n            class=\"ah-arrow ah-arrow--in lucide lucide-arrow-up-right\"\r\n            xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n            width=\"24\"\r\n            height=\"24\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <path d=\"M7 7h10v10\"\/>\r\n            <path d=\"M7 17 17 7\"\/>\r\n          <\/svg>\r\n        <\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/nav>\r\n\r\n\r\n  <!-- CONTENT -->\r\n\r\n  <div class=\"ah-content\">\r\n\r\n    <h1 class=\"ah-title ah-anim\">\r\n      Projektiramo prostore koji traju\r\n    <\/h1>\r\n\r\n\r\n    <a\r\n      class=\"ah-cta ah-anim\"\r\n      href=\"#kontakt\"\r\n    >\r\n\r\n      <span class=\"ah-cta__label\">\r\n        Kontaktirajte nas\r\n      <\/span>\r\n\r\n\r\n      <span class=\"ah-cta__icon\">\r\n\r\n\r\n        <!-- CURRENT ARROW -->\r\n\r\n        <svg\r\n          class=\"ah-arrow ah-arrow--out\"\r\n          xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <path d=\"M7 7h10v10\"\/>\r\n          <path d=\"M7 17 17 7\"\/>\r\n        <\/svg>\r\n\r\n\r\n        <!-- NEW ARROW\r\n             enters from bottom-left -->\r\n\r\n        <svg\r\n          class=\"ah-arrow ah-arrow--in\"\r\n          xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"1.8\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <path d=\"M7 7h10v10\"\/>\r\n          <path d=\"M7 17 17 7\"\/>\r\n        <\/svg>\r\n\r\n\r\n      <\/span>\r\n\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- THUMBS -->\r\n\r\n  <div\r\n    class=\"ah-thumbs\"\r\n    role=\"tablist\"\r\n    aria-label=\"Odaberite fotografiju\"\r\n  >\r\n\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"ah-thumb ah-anim is-active\"\r\n      role=\"tab\"\r\n      aria-selected=\"true\"\r\n      tabindex=\"0\"\r\n      aria-label=\"Fotografija 1\"\r\n    >\r\n\r\n      <span class=\"ah-thumb__frame\">\r\n\r\n        <img\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e95b34793a2d512a998e1.webp\"\r\n          alt=\"\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n      <\/span>\r\n\r\n\r\n      <svg\r\n        class=\"ah-ring\"\r\n        viewBox=\"0 0 120 80\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <rect\r\n          x=\"1\"\r\n          y=\"1\"\r\n          width=\"118\"\r\n          height=\"78\"\r\n          rx=\"0\"\r\n          ry=\"0\"\r\n          pathLength=\"100\"\r\n        \/>\r\n      <\/svg>\r\n\r\n    <\/button>\r\n\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"ah-thumb ah-anim\"\r\n      role=\"tab\"\r\n      aria-selected=\"false\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"Fotografija 2\"\r\n    >\r\n\r\n      <span class=\"ah-thumb__frame\">\r\n\r\n        <img\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e94edbcef8b5f2c22388b.jpg\"\r\n          alt=\"\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n      <\/span>\r\n\r\n\r\n      <svg\r\n        class=\"ah-ring\"\r\n        viewBox=\"0 0 120 80\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <rect\r\n          x=\"1\"\r\n          y=\"1\"\r\n          width=\"118\"\r\n          height=\"78\"\r\n          rx=\"0\"\r\n          ry=\"0\"\r\n          pathLength=\"100\"\r\n        \/>\r\n      <\/svg>\r\n\r\n    <\/button>\r\n\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"ah-thumb ah-anim\"\r\n      role=\"tab\"\r\n      aria-selected=\"false\"\r\n      tabindex=\"-1\"\r\n      aria-label=\"Fotografija 3\"\r\n    >\r\n\r\n      <span class=\"ah-thumb__frame\">\r\n\r\n        <img\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e96e5bcef8b5f2c227ac9.jpg\"\r\n          alt=\"\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n      <\/span>\r\n\r\n\r\n      <svg\r\n        class=\"ah-ring\"\r\n        viewBox=\"0 0 120 80\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <rect\r\n          x=\"1\"\r\n          y=\"1\"\r\n          width=\"118\"\r\n          height=\"78\"\r\n          rx=\"0\"\r\n          ry=\"0\"\r\n          pathLength=\"100\"\r\n        \/>\r\n      <\/svg>\r\n\r\n    <\/button>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n(function () {\r\n  \"use strict\";\r\n\r\n  if (\r\n    document.body &&\r\n    document.body.className.indexOf(\"hl-builder\") !== -1\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  var CYCLE = 6000;\r\n\r\n\r\n  var TIMING = {\r\n    thumbStart: 440,\r\n    thumbStep: 95,\r\n    ringLead: 130,\r\n    title: 860,\r\n    cta: 950,\r\n    nav: 1140\r\n  };\r\n\r\n\r\n  var reduced =\r\n    window.matchMedia &&\r\n    window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n\r\n\r\n  function ms(value) {\r\n    return (\r\n      value \/ 1000\r\n    ).toFixed(3) + \"s\";\r\n  }\r\n\r\n\r\n  function init(root) {\r\n\r\n    if (\r\n      !root ||\r\n      root.getAttribute(\"data-ah-init\") === \"1\"\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    root.setAttribute(\r\n      \"data-ah-init\",\r\n      \"1\"\r\n    );\r\n\r\n\r\n    var slides =\r\n      root.querySelectorAll(\".ah-slide\");\r\n\r\n    var thumbs =\r\n      root.querySelectorAll(\".ah-thumb\");\r\n\r\n    var strip =\r\n      root.querySelector(\".ah-thumbs\");\r\n\r\n    var title =\r\n      root.querySelector(\".ah-title\");\r\n\r\n    var cta =\r\n      root.querySelector(\".ah-cta\");\r\n\r\n    var nav =\r\n      root.querySelector(\".ah-nav\");\r\n\r\n\r\n    var current = 0;\r\n\r\n    var started = false;\r\n\r\n    var i;\r\n\r\n\r\n    if (\r\n      !slides.length ||\r\n      !thumbs.length\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    \/* CYCLE *\/\r\n\r\n    var cycleAttr =\r\n      parseInt(\r\n        root.getAttribute(\"data-cycle\"),\r\n        10\r\n      );\r\n\r\n\r\n    if (\r\n      cycleAttr > 0\r\n    ) {\r\n\r\n      CYCLE =\r\n        cycleAttr;\r\n\r\n      root.style.setProperty(\r\n        \"--ah-cycle\",\r\n        ms(CYCLE)\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* ENTRANCE DELAYS *\/\r\n\r\n    for (\r\n      i = 0;\r\n      i < thumbs.length;\r\n      i++\r\n    ) {\r\n\r\n      thumbs[i].style.setProperty(\r\n        \"--ah-d\",\r\n        ms(\r\n          TIMING.thumbStart +\r\n          i * TIMING.thumbStep\r\n        )\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (title) {\r\n      title.style.setProperty(\r\n        \"--ah-d\",\r\n        ms(TIMING.title)\r\n      );\r\n    }\r\n\r\n\r\n    if (cta) {\r\n      cta.style.setProperty(\r\n        \"--ah-d\",\r\n        ms(TIMING.cta)\r\n      );\r\n    }\r\n\r\n\r\n    if (nav) {\r\n      nav.style.setProperty(\r\n        \"--ah-d\",\r\n        ms(TIMING.nav)\r\n      );\r\n    }\r\n\r\n\r\n    \/* PROGRESS *\/\r\n\r\n    function ring(thumb) {\r\n      return thumb.querySelector(\r\n        \".ah-ring rect\"\r\n      );\r\n    }\r\n\r\n\r\n    function runProgress(index) {\r\n\r\n      if (reduced) {\r\n        return;\r\n      }\r\n\r\n\r\n      var thumb =\r\n        thumbs[index];\r\n\r\n\r\n      thumb.classList.remove(\r\n        \"is-progress\"\r\n      );\r\n\r\n\r\n      void thumb.offsetWidth;\r\n\r\n\r\n      thumb.classList.add(\r\n        \"is-progress\"\r\n      );\r\n    }\r\n\r\n\r\n    function clearProgress() {\r\n\r\n      for (\r\n        var n = 0;\r\n        n < thumbs.length;\r\n        n++\r\n      ) {\r\n\r\n        thumbs[n]\r\n          .classList\r\n          .remove(\r\n            \"is-progress\"\r\n          );\r\n      }\r\n    }\r\n\r\n\r\n    \/* SELECT *\/\r\n\r\n    function select(\r\n      index,\r\n      direction\r\n    ) {\r\n\r\n      if (\r\n        index < 0 ||\r\n        index >= slides.length\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      if (\r\n        index !== current\r\n      ) {\r\n\r\n        var dir =\r\n          direction ||\r\n          (\r\n            index > current\r\n              ? 1\r\n              : -1\r\n          );\r\n\r\n\r\n        var incoming =\r\n          slides[index];\r\n\r\n        var outgoing =\r\n          slides[current];\r\n\r\n\r\n        incoming.style.setProperty(\r\n          \"--ah-dir\",\r\n          dir\r\n        );\r\n\r\n\r\n        outgoing.style.setProperty(\r\n          \"--ah-dir\",\r\n          dir\r\n        );\r\n\r\n\r\n        outgoing.classList.remove(\r\n          \"is-active\"\r\n        );\r\n\r\n\r\n        outgoing.classList.add(\r\n          \"is-leaving\"\r\n        );\r\n\r\n\r\n        outgoing.setAttribute(\r\n          \"aria-hidden\",\r\n          \"true\"\r\n        );\r\n\r\n\r\n        incoming.classList.remove(\r\n          \"is-leaving\"\r\n        );\r\n\r\n\r\n        void incoming.offsetWidth;\r\n\r\n\r\n        incoming.classList.add(\r\n          \"is-active\"\r\n        );\r\n\r\n\r\n        incoming.setAttribute(\r\n          \"aria-hidden\",\r\n          \"false\"\r\n        );\r\n\r\n\r\n        for (\r\n          var n = 0;\r\n          n < thumbs.length;\r\n          n++\r\n        ) {\r\n\r\n          thumbs[n]\r\n            .classList\r\n            .toggle(\r\n              \"is-active\",\r\n              n === index\r\n            );\r\n\r\n\r\n          thumbs[n]\r\n            .setAttribute(\r\n              \"aria-selected\",\r\n              n === index\r\n                ? \"true\"\r\n                : \"false\"\r\n            );\r\n\r\n\r\n          thumbs[n]\r\n            .setAttribute(\r\n              \"tabindex\",\r\n              n === index\r\n                ? \"0\"\r\n                : \"-1\"\r\n            );\r\n        }\r\n\r\n\r\n        current =\r\n          index;\r\n      }\r\n\r\n\r\n      clearProgress();\r\n\r\n      runProgress(\r\n        current\r\n      );\r\n    }\r\n\r\n\r\n    function advance() {\r\n\r\n      select(\r\n        (\r\n          current + 1\r\n        ) %\r\n        slides.length,\r\n        1\r\n      );\r\n    }\r\n\r\n\r\n    \/* RING END *\/\r\n\r\n    for (\r\n      i = 0;\r\n      i < thumbs.length;\r\n      i++\r\n    ) {\r\n\r\n      (function (index) {\r\n\r\n        var rect =\r\n          ring(\r\n            thumbs[index]\r\n          );\r\n\r\n\r\n        if (!rect) {\r\n          return;\r\n        }\r\n\r\n\r\n        rect.addEventListener(\r\n          \"animationend\",\r\n          function () {\r\n\r\n            if (\r\n              thumbs[index]\r\n                .classList\r\n                .contains(\r\n                  \"is-progress\"\r\n                ) &&\r\n              index === current\r\n            ) {\r\n              advance();\r\n            }\r\n\r\n          }\r\n        );\r\n\r\n      })(i);\r\n    }\r\n\r\n\r\n    \/* PAUSE *\/\r\n\r\n    function pause() {\r\n      root.classList.add(\r\n        \"is-paused\"\r\n      );\r\n    }\r\n\r\n\r\n    function resume() {\r\n\r\n      if (started) {\r\n        root.classList.remove(\r\n          \"is-paused\"\r\n        );\r\n      }\r\n    }\r\n\r\n\r\n    if (strip) {\r\n\r\n      strip.addEventListener(\r\n        \"mouseenter\",\r\n        pause\r\n      );\r\n\r\n\r\n      strip.addEventListener(\r\n        \"mouseleave\",\r\n        resume\r\n      );\r\n\r\n\r\n      strip.addEventListener(\r\n        \"focusin\",\r\n        pause\r\n      );\r\n\r\n\r\n      strip.addEventListener(\r\n        \"focusout\",\r\n        resume\r\n      );\r\n    }\r\n\r\n\r\n    document.addEventListener(\r\n      \"visibilitychange\",\r\n      function () {\r\n\r\n        if (\r\n          document.hidden\r\n        ) {\r\n          pause();\r\n        } else {\r\n          resume();\r\n        }\r\n\r\n      }\r\n    );\r\n\r\n\r\n    if (\r\n      window.IntersectionObserver\r\n    ) {\r\n\r\n      var observer =\r\n        new window.IntersectionObserver(\r\n          function (entries) {\r\n\r\n            for (\r\n              var e = 0;\r\n              e < entries.length;\r\n              e++\r\n            ) {\r\n\r\n              if (\r\n                entries[e]\r\n                  .isIntersecting\r\n              ) {\r\n                resume();\r\n              } else {\r\n                pause();\r\n              }\r\n\r\n            }\r\n\r\n          },\r\n          {\r\n            threshold: 0.15\r\n          }\r\n        );\r\n\r\n\r\n      observer.observe(\r\n        root\r\n      );\r\n    }\r\n\r\n\r\n    \/* THUMB INTERACTION *\/\r\n\r\n    for (\r\n      i = 0;\r\n      i < thumbs.length;\r\n      i++\r\n    ) {\r\n\r\n      (function (index) {\r\n\r\n        thumbs[index]\r\n          .addEventListener(\r\n            \"click\",\r\n            function () {\r\n\r\n              if (!started) {\r\n                return;\r\n              }\r\n\r\n\r\n              select(\r\n                index\r\n              );\r\n            }\r\n          );\r\n\r\n\r\n        thumbs[index]\r\n          .addEventListener(\r\n            \"keydown\",\r\n            function (event) {\r\n\r\n              var key =\r\n                event.key;\r\n\r\n              var next =\r\n                null;\r\n\r\n\r\n              if (\r\n                key === \"ArrowRight\" ||\r\n                key === \"ArrowDown\"\r\n              ) {\r\n                next =\r\n                  index + 1;\r\n              }\r\n\r\n              else if (\r\n                key === \"ArrowLeft\" ||\r\n                key === \"ArrowUp\"\r\n              ) {\r\n                next =\r\n                  index - 1;\r\n              }\r\n\r\n              else if (\r\n                key === \"Home\"\r\n              ) {\r\n                next = 0;\r\n              }\r\n\r\n              else if (\r\n                key === \"End\"\r\n              ) {\r\n                next =\r\n                  thumbs.length - 1;\r\n              }\r\n\r\n\r\n              if (\r\n                next === null\r\n              ) {\r\n                return;\r\n              }\r\n\r\n\r\n              event.preventDefault();\r\n\r\n\r\n              next =\r\n                Math.max(\r\n                  0,\r\n                  Math.min(\r\n                    thumbs.length - 1,\r\n                    next\r\n                  )\r\n                );\r\n\r\n\r\n              select(\r\n                next\r\n              );\r\n\r\n\r\n              thumbs[next]\r\n                .focus();\r\n            }\r\n          );\r\n\r\n      })(i);\r\n    }\r\n\r\n\r\n    \/* START *\/\r\n\r\n    function start() {\r\n\r\n      if (started) {\r\n        return;\r\n      }\r\n\r\n\r\n      started =\r\n        true;\r\n\r\n\r\n      root.classList.add(\r\n        \"is-ready\"\r\n      );\r\n\r\n\r\n      if (reduced) {\r\n        return;\r\n      }\r\n\r\n\r\n      window.setTimeout(\r\n        function () {\r\n\r\n          if (\r\n            !root.querySelector(\r\n              \".ah-thumb.is-progress\"\r\n            )\r\n          ) {\r\n            runProgress(\r\n              current\r\n            );\r\n          }\r\n\r\n        },\r\n        TIMING.thumbStart +\r\n        TIMING.ringLead\r\n      );\r\n    }\r\n\r\n\r\n    var hero =\r\n      slides[0]\r\n        .querySelector(\r\n          \"img\"\r\n        );\r\n\r\n\r\n    var settled =\r\n      false;\r\n\r\n\r\n    function ready() {\r\n\r\n      if (settled) {\r\n        return;\r\n      }\r\n\r\n\r\n      settled =\r\n        true;\r\n\r\n\r\n      window.requestAnimationFrame(\r\n        function () {\r\n\r\n          window.requestAnimationFrame(\r\n            start\r\n          );\r\n\r\n        }\r\n      );\r\n    }\r\n\r\n\r\n    if (\r\n      !hero ||\r\n      (\r\n        hero.complete &&\r\n        hero.naturalWidth\r\n      )\r\n    ) {\r\n      ready();\r\n    }\r\n\r\n    else {\r\n\r\n      hero.addEventListener(\r\n        \"load\",\r\n        ready\r\n      );\r\n\r\n\r\n      hero.addEventListener(\r\n        \"error\",\r\n        ready\r\n      );\r\n    }\r\n\r\n\r\n    window.setTimeout(\r\n      ready,\r\n      2200\r\n    );\r\n  }\r\n\r\n\r\n  function boot() {\r\n\r\n    var heroes =\r\n      document.querySelectorAll(\r\n        \".aris-hero\"\r\n      );\r\n\r\n\r\n    for (\r\n      var i = 0;\r\n      i < heroes.length;\r\n      i++\r\n    ) {\r\n\r\n      init(\r\n        heroes[i]\r\n      );\r\n    }\r\n  }\r\n\r\n\r\n  if (\r\n    document.readyState ===\r\n    \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      boot\r\n    );\r\n\r\n  } else {\r\n\r\n    boot();\r\n  }\r\n\r\n})();\r\n<\/script>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-34b43a4\" id=\"usluge\" data-block-id=\"34b43a4\"><style>.stk-34b43a4 {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-34b43a4-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-8152454\" data-v=\"4\" data-block-id=\"8152454\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-8152454-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-8152454-inner-blocks\"><style>\r\n\r\n\r\nbody:not(.hl-builder) .aris-services {\r\n  --as-ink: #0b0b0c;\r\n  --as-muted: #9a9a9a;\r\n\r\n  --as-line: rgba(11, 11, 12, 0.13);\r\n\r\n  --as-fill: #f2f2f0;\r\n\r\n  --as-red: #e1211b;\r\n\r\n  --as-bg: #ffffff;\r\n\r\n  --as-ease:\r\n    cubic-bezier(0.22, 1, 0.36, 1);\r\n\r\n  --as-pad:\r\n    clamp(20px, 5vw, 80px);\r\n\r\n  position: relative;\r\n\r\n  padding:\r\n    clamp(64px, 9vw, 132px)\r\n    var(--as-pad)\r\n    clamp(72px, 10vw, 140px);\r\n\r\n  background:\r\n    var(--as-bg) !important;\r\n\r\n  color:\r\n    var(--as-ink) !important;\r\n\r\n  font-family:\r\n    \"Helvetica Neue\",\r\n    Helvetica,\r\n    Arial,\r\n    system-ui,\r\n    sans-serif !important;\r\n\r\n  -webkit-font-smoothing:\r\n    antialiased;\r\n\r\n  -moz-osx-font-smoothing:\r\n    grayscale;\r\n}\r\n\r\n\r\nbody:not(.hl-builder) .aris-services *,\r\nbody:not(.hl-builder) .aris-services *::before,\r\nbody:not(.hl-builder) .aris-services *::after {\r\n  box-sizing:\r\n    border-box;\r\n}\r\n\r\n\r\nbody:not(.hl-builder) .aris-services :focus-visible {\r\n  outline:\r\n    2px solid\r\n    var(--as-ink);\r\n\r\n  outline-offset:\r\n    3px;\r\n}\r\n\r\n\r\nbody:not(.hl-builder) .as-head {\r\n  margin-bottom:\r\n    clamp(40px, 6vw, 84px);\r\n}\r\n\r\n\r\nbody:not(.hl-builder) .as-eyebrow {\r\n  display: block;\r\n\r\n  margin-bottom:\r\n    clamp(10px, 1.4vw, 18px);\r\n\r\n  color:\r\n    var(--as-muted) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    var(--as-muted) !important;\r\n\r\n  font-size:\r\n    clamp(11px, 0.9vw, 12px) !important;\r\n\r\n  font-weight:\r\n    600 !important;\r\n\r\n  letter-spacing:\r\n    0.22em !important;\r\n\r\n  line-height:\r\n    1.2 !important;\r\n\r\n  text-transform:\r\n    uppercase;\r\n}\r\n\r\n\r\nbody:not(.hl-builder) .as-title {\r\n  margin: 0;\r\n\r\n  color:\r\n    var(--as-ink) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    var(--as-ink) !important;\r\n\r\n  font-size:\r\n    clamp(38px, 5.6vw, 82px) !important;\r\n\r\n  font-weight:\r\n    500 !important;\r\n\r\n  line-height:\r\n    1 !important;\r\n\r\n  letter-spacing:\r\n    -0.035em !important;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   LAYOUT\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-body {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(0, 1fr)\r\n    minmax(0, 1fr);\r\n\r\n  gap:\r\n    clamp(32px, 5vw, 88px);\r\n\r\n  align-items:\r\n    stretch;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   SERVICE LIST\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-list {\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  min-width: 0;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   MOVING ACTIVE PANEL\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-marker {\r\n  position: absolute;\r\n\r\n  left: 0;\r\n  right: 0;\r\n  top: 0;\r\n\r\n  height: 0;\r\n\r\n  border-radius:\r\n    0 !important;\r\n\r\n  background:\r\n    var(--as-fill);\r\n\r\n  opacity: 0;\r\n\r\n  pointer-events:\r\n    none;\r\n\r\n  transform:\r\n    translate3d(0, 0, 0);\r\n\r\n  transition:\r\n    transform\r\n    0.85s\r\n    var(--as-ease),\r\n\r\n    height\r\n    0.85s\r\n    var(--as-ease),\r\n\r\n    opacity\r\n    0.5s\r\n    var(--as-ease);\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   SERVICE ITEM\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-item {\r\n  position: relative;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   SERVICE ROW\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-row {\r\n  position: relative;\r\n\r\n  z-index: 1;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content:\r\n    space-between;\r\n\r\n  gap: 20px;\r\n\r\n  width: 100%;\r\n\r\n  padding:\r\n    clamp(22px, 2.6vw, 34px)\r\n    clamp(16px, 1.7vw, 26px);\r\n\r\n  border: 0 !important;\r\n\r\n  border-bottom:\r\n    1px solid\r\n    var(--as-line) !important;\r\n\r\n  background:\r\n    transparent !important;\r\n\r\n  color:\r\n    var(--as-muted) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    var(--as-muted) !important;\r\n\r\n  font-family:\r\n    inherit !important;\r\n\r\n  font-size:\r\n    clamp(19px, 1.9vw, 29px) !important;\r\n\r\n  font-weight:\r\n    400 !important;\r\n\r\n  letter-spacing:\r\n    -0.02em !important;\r\n\r\n  line-height:\r\n    1.15 !important;\r\n\r\n  text-align:\r\n    left !important;\r\n\r\n  text-transform:\r\n    none !important;\r\n\r\n  cursor:\r\n    pointer;\r\n\r\n  -webkit-tap-highlight-color:\r\n    transparent;\r\n\r\n  transition:\r\n    color\r\n    0.55s\r\n    var(--as-ease),\r\n\r\n    border-color\r\n    0.55s\r\n    var(--as-ease),\r\n\r\n    padding-left\r\n    0.7s\r\n    var(--as-ease);\r\n}\r\n\r\n\r\n\r\n\/* actual text span *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-services\r\n.as-row > span:first-child {\r\n  color:\r\n    var(--as-muted) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    var(--as-muted) !important;\r\n\r\n  font-family:\r\n    inherit !important;\r\n\r\n  font-weight:\r\n    inherit !important;\r\n}\r\n\r\n\r\n\r\n\/* hover *\/\r\n\r\nbody:not(.hl-builder) .as-row:hover {\r\n  color:\r\n    rgba(11, 11, 12, 0.66) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    rgba(11, 11, 12, 0.66) !important;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-services\r\n.as-row:hover > span:first-child {\r\n  color:\r\n    rgba(11, 11, 12, 0.66) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    rgba(11, 11, 12, 0.66) !important;\r\n}\r\n\r\n\r\n\r\n\/* last item *\/\r\n\r\nbody:not(.hl-builder)\r\n.as-item:last-child\r\n.as-row {\r\n  border-bottom-color:\r\n    transparent !important;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   ACTIVE SERVICE\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.as-item.is-active\r\n.as-row {\r\n  color:\r\n    var(--as-ink) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    var(--as-ink) !important;\r\n\r\n  border-bottom-color:\r\n    transparent !important;\r\n\r\n  padding-left:\r\n    clamp(24px, 2.4vw, 34px);\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-services\r\n.as-item.is-active\r\n.as-row > span:first-child {\r\n  color:\r\n    var(--as-ink) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    var(--as-ink) !important;\r\n}\r\n\r\n\r\n\r\n\/* remove divider before active item *\/\r\n\r\nbody:not(.hl-builder)\r\n.as-item:has(+ .as-item.is-active)\r\n.as-row {\r\n  border-bottom-color:\r\n    transparent !important;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   ICON CIRCLE\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-row__icon {\r\n  flex: 0 0 auto;\r\n\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width:\r\n    clamp(38px, 3.3vw, 48px);\r\n\r\n  height:\r\n    clamp(38px, 3.3vw, 48px);\r\n\r\n  border-radius:\r\n    0 !important;\r\n\r\n  background:\r\n    transparent;\r\n\r\n  color:\r\n    var(--as-muted) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    var(--as-muted) !important;\r\n\r\n  transform:\r\n    scale(0.82);\r\n\r\n  transition:\r\n    background\r\n    0.6s\r\n    var(--as-ease),\r\n\r\n    color\r\n    0.5s\r\n    var(--as-ease),\r\n\r\n    transform\r\n    0.75s\r\n    var(--as-ease);\r\n}\r\n\r\n\r\n\r\n\/* icon hover *\/\r\n\r\nbody:not(.hl-builder)\r\n.as-row:hover\r\n.as-row__icon {\r\n  background:\r\n    rgba(11, 11, 12, 0.06);\r\n\r\n  color:\r\n    var(--as-muted) !important;\r\n}\r\n\r\n\r\n\r\n\/* active icon *\/\r\n\r\nbody:not(.hl-builder)\r\n.as-item.is-active\r\n.as-row__icon {\r\n  background:\r\n    #ffffff !important;\r\n\r\n  color:\r\n    var(--as-ink) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    var(--as-ink) !important;\r\n\r\n  transform:\r\n    scale(1);\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   SVG ARROW\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-arrow {\r\n  flex: 0 0 auto;\r\n\r\n  width:\r\n    clamp(18px, 1.5vw, 21px);\r\n\r\n  height:\r\n    clamp(18px, 1.5vw, 21px);\r\n\r\n  color:\r\n    inherit !important;\r\n\r\n  stroke:\r\n    currentColor !important;\r\n\r\n  transform:\r\n    rotate(-45deg);\r\n\r\n  transition:\r\n    transform\r\n    0.75s\r\n    var(--as-ease),\r\n\r\n    color\r\n    0.55s\r\n    var(--as-ease);\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.as-arrow path {\r\n  stroke:\r\n    currentColor !important;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.as-item.is-active\r\n.as-arrow {\r\n  transform:\r\n    rotate(0deg);\r\n\r\n  color:\r\n    var(--as-ink) !important;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   RIGHT IMAGE STAGE\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-stage {\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  min-width: 0;\r\n\r\n  height: 100%;\r\n\r\n  overflow: hidden;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(11, 11, 12, 0.06);\r\n\r\n  border-radius:\r\n    0 !important;\r\n\r\n  background:\r\n    #ececeb;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   IMAGE SWITCHING\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-shot {\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    scale(1.06)\r\n    translateY(\r\n      calc(\r\n        var(--as-dir, 1) *\r\n        2.2%\r\n      )\r\n    );\r\n\r\n  transition:\r\n    opacity\r\n    0.9s\r\n    var(--as-ease),\r\n\r\n    transform\r\n    1.15s\r\n    var(--as-ease);\r\n\r\n  will-change:\r\n    opacity,\r\n    transform;\r\n}\r\n\r\n\r\nbody:not(.hl-builder) .as-shot img {\r\n  display: block;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  object-fit:\r\n    cover;\r\n\r\n  transform:\r\n    scale(1.005);\r\n\r\n  transition:\r\n    transform\r\n    1.4s\r\n    var(--as-ease);\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.as-stage:hover\r\n.as-shot.is-active\r\nimg {\r\n  transform:\r\n    scale(1.035);\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.as-shot.is-active {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    scale(1)\r\n    translateY(0);\r\n}\r\n\r\n\r\n\r\n\/* image darkening *\/\r\n\r\nbody:not(.hl-builder)\r\n.as-stage::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  inset:\r\n    auto 0 0 0;\r\n\r\n  z-index: 1;\r\n\r\n  height:\r\n    46%;\r\n\r\n  pointer-events:\r\n    none;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(6, 8, 11, 0)\r\n      0%,\r\n      rgba(6, 8, 11, 0.34)\r\n      100%\r\n    );\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   CAPTION\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-caption {\r\n  position: absolute;\r\n\r\n  left:\r\n    clamp(12px, 1.2vw, 18px);\r\n\r\n  right:\r\n    clamp(12px, 1.2vw, 18px);\r\n\r\n  bottom:\r\n    clamp(12px, 1.2vw, 18px);\r\n\r\n  z-index: 2;\r\n\r\n  padding:\r\n    clamp(16px, 1.5vw, 22px)\r\n    clamp(18px, 1.7vw, 26px);\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255, 255, 255, 0.16);\r\n\r\n  border-radius:\r\n    0 !important;\r\n\r\n  background:\r\n    rgba(11, 12, 14, 0.42);\r\n\r\n  -webkit-backdrop-filter:\r\n    blur(18px)\r\n    saturate(140%);\r\n\r\n  backdrop-filter:\r\n    blur(18px)\r\n    saturate(140%);\r\n\r\n  color:\r\n    #ffffff !important;\r\n\r\n  -webkit-text-fill-color:\r\n    #ffffff !important;\r\n}\r\n\r\n\r\n\r\n\/* red rule *\/\r\n\r\nbody:not(.hl-builder)\r\n.as-caption__rule {\r\n  display: none;\r\n\r\n  width:\r\n    22px;\r\n\r\n  height:\r\n    2px;\r\n\r\n  margin-bottom:\r\n    13px;\r\n\r\n  border-radius:\r\n    0 !important;\r\n\r\n  background:\r\n    var(--as-red) !important;\r\n}\r\n\r\n\r\n\r\n\/* caption title *\/\r\n\r\nbody:not(.hl-builder)\r\n.as-caption__name {\r\n  display: block;\r\n\r\n  margin-bottom:\r\n    7px;\r\n\r\n  color:\r\n    #ffffff !important;\r\n\r\n  -webkit-text-fill-color:\r\n    #ffffff !important;\r\n\r\n  font-size:\r\n    clamp(15px, 1.2vw, 18px) !important;\r\n\r\n  font-weight:\r\n    700 !important;\r\n\r\n  letter-spacing:\r\n    -0.015em !important;\r\n\r\n  line-height:\r\n    1.2 !important;\r\n}\r\n\r\n\r\n\r\n\/* caption copy *\/\r\n\r\nbody:not(.hl-builder)\r\n.as-caption__text {\r\n  display: block;\r\n\r\n  color:\r\n    rgba(255, 255, 255, 0.88) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    rgba(255, 255, 255, 0.88) !important;\r\n\r\n  font-size:\r\n    clamp(13px, 1vw, 15px) !important;\r\n\r\n  font-weight:\r\n    400 !important;\r\n\r\n  line-height:\r\n    1.5 !important;\r\n\r\n  opacity:\r\n    0.88;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   CAPTION ENTER ANIMATION\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.as-caption__rule,\r\n\r\nbody:not(.hl-builder)\r\n.as-caption__name,\r\n\r\nbody:not(.hl-builder)\r\n.as-caption__text {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(10px);\r\n\r\n  transition:\r\n    opacity\r\n    0.55s\r\n    var(--as-ease),\r\n\r\n    transform\r\n    0.7s\r\n    var(--as-ease);\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.as-caption.is-in\r\n.as-caption__rule {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    none;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.as-caption.is-in\r\n.as-caption__name {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    none;\r\n\r\n  transition-delay:\r\n    0.05s;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.as-caption.is-in\r\n.as-caption__text {\r\n  opacity:\r\n    0.88;\r\n\r\n  transform:\r\n    none;\r\n\r\n  transition-delay:\r\n    0.12s;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   MOBILE PANEL DEFAULT\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-panel {\r\n  display:\r\n    none;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   SECTION ENTRANCE\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder) .as-anim {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(20px);\r\n\r\n  transition:\r\n    opacity\r\n    0.8s\r\n    var(--as-ease)\r\n    var(--as-d, 0s),\r\n\r\n    transform\r\n    0.95s\r\n    var(--as-ease)\r\n    var(--as-d, 0s);\r\n\r\n  will-change:\r\n    opacity,\r\n    transform;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-services.is-in\r\n.as-anim {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    none;\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   TABLET\r\n   ============================================================= *\/\r\n\r\n@media\r\n(max-width: 1180px)\r\nand\r\n(min-width: 901px) {\r\n\r\n  body:not(.hl-builder) .as-row {\r\n    font-size:\r\n      clamp(17px, 2vw, 21px) !important;\r\n\r\n    padding:\r\n      20px\r\n      16px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   MOBILE\r\n   ============================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n  body:not(.hl-builder) .as-body {\r\n    grid-template-columns:\r\n      minmax(0, 1fr);\r\n\r\n    gap: 0;\r\n  }\r\n\r\n\r\n  \/* desktop image hidden *\/\r\n\r\n  body:not(.hl-builder) .as-stage {\r\n    display:\r\n      none;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .as-item:last-child\r\n  .as-row {\r\n    border-bottom:\r\n      0 !important;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder) .as-marker {\r\n    display:\r\n      none;\r\n  }\r\n\r\n\r\n\r\n  \/* ===========================================================\r\n     MOBILE CARDS\r\n     =========================================================== *\/\r\n\r\n  body:not(.hl-builder) .as-item {\r\n    border:\r\n      1px solid\r\n      var(--as-line);\r\n\r\n    border-radius:\r\n      0 !important;\r\n\r\n    margin-bottom:\r\n      10px;\r\n\r\n    overflow:\r\n      hidden;\r\n\r\n    background:\r\n      #ffffff;\r\n\r\n    transition:\r\n      border-color\r\n      0.55s\r\n      var(--as-ease),\r\n\r\n      background\r\n      0.55s\r\n      var(--as-ease);\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .as-item.is-open {\r\n    border-color:\r\n      transparent;\r\n\r\n    background:\r\n      var(--as-fill);\r\n  }\r\n\r\n\r\n\r\n  \/* ===========================================================\r\n     MOBILE ROW\r\n     =========================================================== *\/\r\n\r\n  body:not(.hl-builder) .as-row {\r\n    border-bottom:\r\n      0 !important;\r\n\r\n    padding:\r\n      20px\r\n      18px;\r\n\r\n    color:\r\n      var(--as-muted) !important;\r\n\r\n    -webkit-text-fill-color:\r\n      var(--as-muted) !important;\r\n\r\n    font-size:\r\n      clamp(18px, 4.6vw, 22px) !important;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .as-row > span:first-child {\r\n    color:\r\n      var(--as-muted) !important;\r\n\r\n    -webkit-text-fill-color:\r\n      var(--as-muted) !important;\r\n  }\r\n\r\n\r\n\r\n  \/* open mobile title *\/\r\n\r\n  body:not(.hl-builder)\r\n  .as-item.is-open\r\n  .as-row {\r\n    color:\r\n      var(--as-ink) !important;\r\n\r\n    -webkit-text-fill-color:\r\n      var(--as-ink) !important;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .as-item.is-open\r\n  .as-row > span:first-child {\r\n    color:\r\n      var(--as-ink) !important;\r\n\r\n    -webkit-text-fill-color:\r\n      var(--as-ink) !important;\r\n  }\r\n\r\n\r\n\r\n  \/* ===========================================================\r\n     MOBILE ICON\r\n     =========================================================== *\/\r\n\r\n  body:not(.hl-builder)\r\n  .as-item.is-open\r\n  .as-row__icon {\r\n    background:\r\n      var(--as-ink) !important;\r\n\r\n    color:\r\n      #ffffff !important;\r\n\r\n    -webkit-text-fill-color:\r\n      #ffffff !important;\r\n\r\n    transform:\r\n      scale(1);\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .as-item.is-open\r\n  .as-arrow {\r\n    color:\r\n      #ffffff !important;\r\n  }\r\n\r\n\r\n\r\n  \/* ===========================================================\r\n     ACCORDION\r\n     =========================================================== *\/\r\n\r\n  body:not(.hl-builder) .as-panel {\r\n    display:\r\n      block;\r\n\r\n    height:\r\n      0;\r\n\r\n    overflow:\r\n      hidden;\r\n\r\n    transition:\r\n      height\r\n      0.75s\r\n      var(--as-ease);\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .as-panel__inner {\r\n    padding:\r\n      0 18px 20px;\r\n\r\n    opacity:\r\n      0;\r\n\r\n    transform:\r\n      translateY(16px);\r\n\r\n    transition:\r\n      opacity\r\n      0.55s\r\n      var(--as-ease),\r\n\r\n      transform\r\n      0.7s\r\n      var(--as-ease);\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .as-item.is-open\r\n  .as-panel__inner {\r\n    opacity:\r\n      1;\r\n\r\n    transform:\r\n      none;\r\n\r\n    transition-delay:\r\n      0.12s;\r\n  }\r\n\r\n\r\n\r\n  \/* mobile image *\/\r\n\r\n  body:not(.hl-builder)\r\n  .as-panel__shot {\r\n    position:\r\n      relative;\r\n\r\n    overflow:\r\n      hidden;\r\n\r\n    aspect-ratio:\r\n      4 \/ 3;\r\n\r\n    border-radius:\r\n      0 !important;\r\n\r\n    background:\r\n      #ececeb;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .as-panel__shot img {\r\n    display:\r\n      block;\r\n\r\n    width:\r\n      100%;\r\n\r\n    height:\r\n      100%;\r\n\r\n    object-fit:\r\n      cover;\r\n\r\n    transform:\r\n      scale(1.06);\r\n\r\n    transition:\r\n      transform\r\n      1.1s\r\n      var(--as-ease);\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .as-item.is-open\r\n  .as-panel__shot\r\n  img {\r\n    transform:\r\n      scale(1);\r\n  }\r\n\r\n\r\n\r\n  \/* mobile paragraph *\/\r\n\r\n  body:not(.hl-builder)\r\n  .as-panel__text {\r\n    margin:\r\n      14px 2px 0;\r\n\r\n    color:\r\n      rgba(11, 11, 12, 0.72) !important;\r\n\r\n    -webkit-text-fill-color:\r\n      rgba(11, 11, 12, 0.72) !important;\r\n\r\n    font-family:\r\n      inherit !important;\r\n\r\n    font-size:\r\n      15px !important;\r\n\r\n    font-weight:\r\n      400 !important;\r\n\r\n    line-height:\r\n      1.55 !important;\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =============================================================\r\n   REDUCED MOTION\r\n   ============================================================= *\/\r\n\r\n@media\r\n(prefers-reduced-motion: reduce) {\r\n\r\n  body:not(.hl-builder) .aris-services *,\r\n  body:not(.hl-builder) .aris-services *::before,\r\n  body:not(.hl-builder) .aris-services *::after {\r\n    animation-duration:\r\n      0.001ms !important;\r\n\r\n    transition-duration:\r\n      0.001ms !important;\r\n\r\n    transition-delay:\r\n      0ms !important;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- ============================================================\r\n     SERVICES\r\n     ============================================================ -->\r\n\r\n<section\r\n  class=\"aris-services\"\r\n  data-scroll-offset=\"24\"\r\n  aria-label=\"Usluge\"\r\n>\r\n\r\n\r\n  <!-- HEADER -->\r\n\r\n <div class=\"as-head\">\r\n\r\n  <h2\r\n    class=\"as-title as-anim\"\r\n    style=\"--as-d:0s\"\r\n  >\r\n    \u0160to radimo - usluge\r\n  <\/h2>\r\n\r\n<\/div>\r\n\r\n\r\n  <div class=\"as-body\">\r\n\r\n\r\n    <!-- ========================================================\r\n         LEFT SERVICE LIST\r\n         ======================================================== -->\r\n\r\n    <div\r\n      class=\"as-list\"\r\n      role=\"tablist\"\r\n      aria-label=\"Popis usluga\"\r\n    >\r\n\r\n\r\n      <span\r\n        class=\"as-marker\"\r\n        aria-hidden=\"true\"\r\n      ><\/span>\r\n\r\n\r\n\r\n      <!-- 01 -->\r\n\r\n      <div\r\n        class=\"as-item as-anim\"\r\n        data-name=\"Arhitektonsko projektiranje\"\r\n        data-text=\"Kompletna usluga projektiranja svih vrsta projekata \u010diji obuhvat se temelji na idejnom, glavnom i izvedbenom projektu visokogradnje i niskogradnje.\"\r\n      >\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"as-row\"\r\n          role=\"tab\"\r\n          aria-selected=\"true\"\r\n        >\r\n\r\n          <span>\r\n            Arhitektonsko projektiranje\r\n          <\/span>\r\n\r\n\r\n          <span class=\"as-row__icon\">\r\n\r\n            <svg\r\n              class=\"as-arrow\"\r\n              xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"1.7\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <path d=\"M7 7h10v10\"\/>\r\n              <path d=\"M7 17 17 7\"\/>\r\n            <\/svg>\r\n\r\n          <\/span>\r\n\r\n        <\/button>\r\n\r\n\r\n        <div class=\"as-panel\">\r\n\r\n          <div class=\"as-panel__inner\">\r\n\r\n            <div class=\"as-panel__shot\">\r\n\r\n              <img\r\n                src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ea08f61d6b4accd44f576.png\"\r\n                alt=\"Arhitektonsko projektiranje\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n\r\n            <\/div>\r\n\r\n\r\n            <p class=\"as-panel__text\">\r\n              Kompletna usluga projektiranja svih vrsta projekata \u010diji obuhvat se temelji na idejnom, glavnom i izvedbenom projektu visokogradnje i niskogradnje.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- 02 -->\r\n\r\n      <div\r\n        class=\"as-item as-anim\"\r\n        data-name=\"Izrada tro\u0161kovnika\"\r\n        data-text=\"Usluga izrade tro\u0161kovnika svih vrsta radova prema zahtjevima i potrebama temeljenog na stru\u010dnosti i dugogodi\u0161njem iskustvu na\u0161ih arhitekata i in\u017eenjera.\"\r\n      >\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"as-row\"\r\n          role=\"tab\"\r\n          aria-selected=\"false\"\r\n        >\r\n\r\n          <span>\r\n            Izrada tro\u0161kovnika\r\n          <\/span>\r\n\r\n\r\n          <span class=\"as-row__icon\">\r\n\r\n            <svg\r\n              class=\"as-arrow\"\r\n              xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"1.7\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <path d=\"M7 7h10v10\"\/>\r\n              <path d=\"M7 17 17 7\"\/>\r\n            <\/svg>\r\n\r\n          <\/span>\r\n\r\n        <\/button>\r\n\r\n\r\n        <div class=\"as-panel\">\r\n\r\n          <div class=\"as-panel__inner\">\r\n\r\n            <div class=\"as-panel__shot\">\r\n\r\n              <img\r\n                src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ebd894793a2d512ac8e54.webp\"\r\n                alt=\"Interijeri\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n\r\n            <\/div>\r\n\r\n\r\n            <p class=\"as-panel__text\">\r\n             Usluga izrade tro\u0161kovnika svih vrsta radova prema zahtjevima i potrebama temeljenog na stru\u010dnosti i dugogodi\u0161njem iskustvu na\u0161ih arhitekata i in\u017eenjera.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- 03 -->\r\n\r\n      <div\r\n        class=\"as-item as-anim\"\r\n        data-name=\"Konzalting\"\r\n        data-text=\"Nudimo prijenos znanja s ciljem rje\u0161avanja uo\u010denog problema primjenom metoda temeljenih dugogodi\u0161njim iskustvom kako bi klijent imao najbolju u\u010dinkovitost u konkretnoj situaciji.\"\r\n      >\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"as-row\"\r\n          role=\"tab\"\r\n          aria-selected=\"false\"\r\n        >\r\n\r\n          <span>\r\n            Konzalting\r\n          <\/span>\r\n\r\n\r\n          <span class=\"as-row__icon\">\r\n\r\n            <svg\r\n              class=\"as-arrow\"\r\n              xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"1.7\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <path d=\"M7 7h10v10\"\/>\r\n              <path d=\"M7 17 17 7\"\/>\r\n            <\/svg>\r\n\r\n          <\/span>\r\n\r\n        <\/button>\r\n\r\n\r\n        <div class=\"as-panel\">\r\n\r\n          <div class=\"as-panel__inner\">\r\n\r\n            <div class=\"as-panel__shot\">\r\n\r\n              <img\r\n                src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ebd89968770b81c47f140.webp\"\r\n                alt=\"Urbanizam\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n\r\n            <\/div>\r\n\r\n\r\n            <p class=\"as-panel__text\">\r\n              Nudimo prijenos znanja s ciljem rje\u0161avanja uo\u010denog problema primjenom metoda temeljenih dugogodi\u0161njim iskustvom kako bi klijent imao najbolju u\u010dinkovitost u konkretnoj situaciji.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- 04 -->\r\n\r\n      <div\r\n        class=\"as-item as-anim\"\r\n        data-name=\"3D vizualizacije\"\r\n        data-text=\"Usluga 3D vizualizacije svih vrsta gra\u0111evina, bilo u svrhu prodaje, prezentacije investitoru ili vizualnu predod\u017ebu projektirane gra\u0111evine.\"\r\n      >\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"as-row\"\r\n          role=\"tab\"\r\n          aria-selected=\"false\"\r\n        >\r\n\r\n          <span>\r\n            3D vizualizacije\r\n          <\/span>\r\n\r\n\r\n          <span class=\"as-row__icon\">\r\n\r\n            <svg\r\n              class=\"as-arrow\"\r\n              xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"1.7\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <path d=\"M7 7h10v10\"\/>\r\n              <path d=\"M7 17 17 7\"\/>\r\n            <\/svg>\r\n\r\n          <\/span>\r\n\r\n        <\/button>\r\n\r\n\r\n        <div class=\"as-panel\">\r\n\r\n          <div class=\"as-panel__inner\">\r\n\r\n            <div class=\"as-panel__shot\">\r\n\r\n              <img\r\n                src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ebd89bcef8b5f2c253502.webp\"\r\n                alt=\"3D vizualizacije\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n\r\n            <\/div>\r\n\r\n\r\n            <p class=\"as-panel__text\">\r\n             Usluga 3D vizualizacije svih vrsta gra\u0111evina, bilo u svrhu prodaje, prezentacije investitoru ili vizualnu predod\u017ebu projektirane gra\u0111evine.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- 05 -->\r\n\r\n      <div\r\n        class=\"as-item as-anim\"\r\n        data-name=\"Nadzor izvedbe\"\r\n        data-text=\"Usluga stru\u010dnog i projektantskog nadzora nad gradnjom gra\u0111evina kroz sve faze gradnje, temeljenih gra\u0111evinskom dozvolom, odnosno glavnim projektom.\"\r\n      >\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"as-row\"\r\n          role=\"tab\"\r\n          aria-selected=\"false\"\r\n        >\r\n\r\n          <span>\r\n            Nadzor izvedbe\r\n          <\/span>\r\n\r\n\r\n          <span class=\"as-row__icon\">\r\n\r\n            <svg\r\n              class=\"as-arrow\"\r\n              xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"1.7\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <path d=\"M7 7h10v10\"\/>\r\n              <path d=\"M7 17 17 7\"\/>\r\n            <\/svg>\r\n\r\n          <\/span>\r\n\r\n        <\/button>\r\n\r\n\r\n        <div class=\"as-panel\">\r\n\r\n          <div class=\"as-panel__inner\">\r\n\r\n            <div class=\"as-panel__shot\">\r\n\r\n              <img\r\n                src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ebd89968770b81c47f149.webp\"\r\n                alt=\"Nadzor izvedbe\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n\r\n            <\/div>\r\n\r\n\r\n            <p class=\"as-panel__text\">\r\n             Usluga stru\u010dnog i projektantskog nadzora nad gradnjom gra\u0111evina kroz sve faze gradnje, temeljenih gra\u0111evinskom dozvolom, odnosno glavnim projektom\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- 06 -->\r\n\r\n      <div\r\n        class=\"as-item as-anim\"\r\n        data-name=\"Energetska obnova i certifikati\"\r\n        data-text=\"Bavimo se energetskom obnovom zgrada i izradom energetskih certifikata, od analize postoje\u0107eg stanja do prijedloga mjera za pove\u0107anje energetske u\u010dinkovitosti.\"\r\n      >\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"as-row\"\r\n          role=\"tab\"\r\n          aria-selected=\"false\"\r\n        >\r\n\r\n          <span>\r\n            Energetska obnova i certifikati\r\n          <\/span>\r\n\r\n\r\n          <span class=\"as-row__icon\">\r\n\r\n            <svg\r\n              class=\"as-arrow\"\r\n              xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"1.7\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <path d=\"M7 7h10v10\"\/>\r\n              <path d=\"M7 17 17 7\"\/>\r\n            <\/svg>\r\n\r\n          <\/span>\r\n\r\n        <\/button>\r\n\r\n\r\n        <div class=\"as-panel\">\r\n\r\n          <div class=\"as-panel__inner\">\r\n\r\n            <div class=\"as-panel__shot\">\r\n\r\n              <img\r\n                src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6aa3cbc60d0746fdb15f52d2.webp\"\r\n                alt=\"Energetska obnova i izrada energetskih certifikata\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n\r\n            <\/div>\r\n\r\n\r\n            <p class=\"as-panel__text\">\r\n              Bavimo se energetskom obnovom zgrada i izradom energetskih certifikata, od analize postoje\u0107eg stanja do prijedloga mjera za pove\u0107anje energetske u\u010dinkovitosti.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- 07 -->\r\n\r\n      <div\r\n        class=\"as-item as-anim\"\r\n        data-name=\"Eta\u017eiranje prostora\"\r\n        data-text=\"Bavimo se eta\u017eiranjem stambenih, poslovnih i drugih prostora te izra\u0111ujemo potrebnu dokumentaciju za jasno utvr\u0111ivanje posebnih i zajedni\u010dkih dijelova nekretnine.\"\r\n      >\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"as-row\"\r\n          role=\"tab\"\r\n          aria-selected=\"false\"\r\n        >\r\n\r\n          <span>\r\n            Eta\u017eiranje prostora\r\n          <\/span>\r\n\r\n\r\n          <span class=\"as-row__icon\">\r\n\r\n            <svg\r\n              class=\"as-arrow\"\r\n              xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"1.7\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <path d=\"M7 7h10v10\"\/>\r\n              <path d=\"M7 17 17 7\"\/>\r\n            <\/svg>\r\n\r\n          <\/span>\r\n\r\n        <\/button>\r\n\r\n\r\n        <div class=\"as-panel\">\r\n\r\n          <div class=\"as-panel__inner\">\r\n\r\n            <div class=\"as-panel__shot\">\r\n\r\n              <img\r\n                src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6aa3cbc70d0746fdb15f5312.webp\"\r\n                alt=\"Eta\u017eiranje prostora\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n\r\n            <\/div>\r\n\r\n\r\n            <p class=\"as-panel__text\">\r\n              Bavimo se eta\u017eiranjem stambenih, poslovnih i drugih prostora te izra\u0111ujemo potrebnu dokumentaciju za jasno utvr\u0111ivanje posebnih i zajedni\u010dkih dijelova nekretnine.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ========================================================\r\n         RIGHT DESKTOP IMAGE\r\n         ======================================================== -->\r\n\r\n    <div\r\n      class=\"as-stage as-anim\"\r\n      style=\"--as-d:.26s\"\r\n    >\r\n\r\n\r\n      <div class=\"as-shot is-active\">\r\n\r\n        <img\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ea08f61d6b4accd44f576.png\"\r\n          alt=\"Arhitektonsko projektiranje\"\r\n          loading=\"eager\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"as-shot\">\r\n\r\n        <img\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ebd894793a2d512ac8e54.webp\"\r\n          alt=\"Interijeri\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"as-shot\">\r\n\r\n        <img\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ebd89968770b81c47f140.webp\"\r\n          alt=\"Urbanizam\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"as-shot\">\r\n\r\n        <img\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ebd89bcef8b5f2c253502.webp\"\r\n          alt=\"3D vizualizacije\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"as-shot\">\r\n\r\n        <img\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ebd89968770b81c47f149.webp\"\r\n          alt=\"Nadzor izvedbe\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"as-shot\">\r\n\r\n        <img\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6aa3cbc60d0746fdb15f52d2.webp\"\r\n          alt=\"Energetska obnova i izrada energetskih certifikata\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <div class=\"as-shot\">\r\n\r\n        <img\r\n          src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6aa3cbc70d0746fdb15f5312.webp\"\r\n          alt=\"Eta\u017eiranje prostora\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- CAPTION -->\r\n\r\n      <div class=\"as-caption\">\r\n\r\n        <span\r\n          class=\"as-caption__rule\"\r\n          aria-hidden=\"true\"\r\n        ><\/span>\r\n\r\n        <span class=\"as-caption__name\"><\/span>\r\n\r\n        <span class=\"as-caption__text\"><\/span>\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n(function () {\r\n  \"use strict\";\r\n\r\n\r\n  \/* ===========================================================\r\n     GHL BUILDER GUARD\r\n     =========================================================== *\/\r\n\r\n  if (\r\n    document.body &&\r\n    document.body.className.indexOf(\r\n      \"hl-builder\"\r\n    ) !== -1\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  var STAGGER = 90;\r\n  var BASE = 180;\r\n\r\n\r\n  var reduced =\r\n    window.matchMedia &&\r\n    window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n\r\n\r\n\r\n  function init(root) {\r\n\r\n    if (\r\n      !root ||\r\n      root.getAttribute(\r\n        \"data-as-init\"\r\n      ) === \"1\"\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    root.setAttribute(\r\n      \"data-as-init\",\r\n      \"1\"\r\n    );\r\n\r\n\r\n    var items =\r\n      root.querySelectorAll(\r\n        \".as-item\"\r\n      );\r\n\r\n\r\n    var rows =\r\n      root.querySelectorAll(\r\n        \".as-row\"\r\n      );\r\n\r\n\r\n    var shots =\r\n      root.querySelectorAll(\r\n        \".as-shot\"\r\n      );\r\n\r\n\r\n    var marker =\r\n      root.querySelector(\r\n        \".as-marker\"\r\n      );\r\n\r\n\r\n    var caption =\r\n      root.querySelector(\r\n        \".as-caption\"\r\n      );\r\n\r\n\r\n    var capName =\r\n      root.querySelector(\r\n        \".as-caption__name\"\r\n      );\r\n\r\n\r\n    var capText =\r\n      root.querySelector(\r\n        \".as-caption__text\"\r\n      );\r\n\r\n\r\n    var mobile =\r\n      window.matchMedia(\r\n        \"(max-width: 900px)\"\r\n      );\r\n\r\n\r\n    var current = 0;\r\n\r\n    var i;\r\n\r\n\r\n    if (!items.length) {\r\n      return;\r\n    }\r\n\r\n\r\n\r\n    function isMobile() {\r\n      return mobile.matches;\r\n    }\r\n\r\n\r\n\r\n    \/* =========================================================\r\n       ENTRANCE STAGGER\r\n       ========================================================= *\/\r\n\r\n    for (\r\n      i = 0;\r\n      i < items.length;\r\n      i++\r\n    ) {\r\n\r\n      items[i].style.setProperty(\r\n        \"--as-d\",\r\n        (\r\n          (\r\n            BASE +\r\n            i * STAGGER\r\n          ) \/\r\n          1000\r\n        ).toFixed(3) +\r\n        \"s\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =========================================================\r\n       MOVING MARKER\r\n       ========================================================= *\/\r\n\r\n    function placeMarker(\r\n      index,\r\n      animate\r\n    ) {\r\n\r\n      if (\r\n        !marker ||\r\n        isMobile()\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      var item =\r\n        items[index];\r\n\r\n\r\n      if (!animate) {\r\n\r\n        marker.style.transition =\r\n          \"none\";\r\n\r\n      }\r\n\r\n\r\n      marker.style.height =\r\n        item.offsetHeight +\r\n        \"px\";\r\n\r\n\r\n      marker.style.transform =\r\n        \"translate3d(0,\" +\r\n        item.offsetTop +\r\n        \"px,0)\";\r\n\r\n\r\n      marker.style.opacity =\r\n        \"1\";\r\n\r\n\r\n      if (!animate) {\r\n\r\n        void marker.offsetWidth;\r\n\r\n        marker.style.transition =\r\n          \"\";\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =========================================================\r\n       DESKTOP IMAGE SWITCH\r\n       ========================================================= *\/\r\n\r\n    function showShot(\r\n      index,\r\n      direction\r\n    ) {\r\n\r\n      if (!shots.length) {\r\n        return;\r\n      }\r\n\r\n\r\n      for (\r\n        var n = 0;\r\n        n < shots.length;\r\n        n++\r\n      ) {\r\n\r\n        shots[n]\r\n          .style\r\n          .setProperty(\r\n            \"--as-dir\",\r\n            direction\r\n          );\r\n\r\n\r\n        shots[n]\r\n          .classList\r\n          .toggle(\r\n            \"is-active\",\r\n            n === index\r\n          );\r\n\r\n      }\r\n\r\n\r\n\r\n      if (\r\n        caption &&\r\n        capName &&\r\n        capText\r\n      ) {\r\n\r\n        var data =\r\n          items[index];\r\n\r\n\r\n        caption\r\n          .classList\r\n          .remove(\r\n            \"is-in\"\r\n          );\r\n\r\n\r\n        void caption.offsetWidth;\r\n\r\n\r\n        capName.textContent =\r\n          data.getAttribute(\r\n            \"data-name\"\r\n          ) || \"\";\r\n\r\n\r\n        capText.textContent =\r\n          data.getAttribute(\r\n            \"data-text\"\r\n          ) || \"\";\r\n\r\n\r\n        caption\r\n          .classList\r\n          .add(\r\n            \"is-in\"\r\n          );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =========================================================\r\n       MOBILE ACCORDION\r\n       ========================================================= *\/\r\n\r\n    function closePanel(item) {\r\n\r\n      var panel =\r\n        item.querySelector(\r\n          \".as-panel\"\r\n        );\r\n\r\n\r\n      if (!panel) {\r\n        return;\r\n      }\r\n\r\n\r\n      panel.style.height =\r\n        panel.scrollHeight +\r\n        \"px\";\r\n\r\n\r\n      void panel.offsetWidth;\r\n\r\n\r\n      item.classList.remove(\r\n        \"is-open\"\r\n      );\r\n\r\n\r\n      panel.style.height =\r\n        \"0px\";\r\n    }\r\n\r\n\r\n\r\n    function openPanel(item) {\r\n\r\n      var panel =\r\n        item.querySelector(\r\n          \".as-panel\"\r\n        );\r\n\r\n\r\n      var inner =\r\n        item.querySelector(\r\n          \".as-panel__inner\"\r\n        );\r\n\r\n\r\n      if (\r\n        !panel ||\r\n        !inner\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      item.classList.add(\r\n        \"is-open\"\r\n      );\r\n\r\n\r\n      panel.style.height =\r\n        inner.offsetHeight +\r\n        \"px\";\r\n    }\r\n\r\n\r\n\r\n    \/* allow panel to settle to auto *\/\r\n\r\n    for (\r\n      i = 0;\r\n      i < items.length;\r\n      i++\r\n    ) {\r\n\r\n      (function (item) {\r\n\r\n        var panel =\r\n          item.querySelector(\r\n            \".as-panel\"\r\n          );\r\n\r\n\r\n        if (!panel) {\r\n          return;\r\n        }\r\n\r\n\r\n        panel.addEventListener(\r\n          \"transitionend\",\r\n          function (event) {\r\n\r\n            if (\r\n              event.propertyName !==\r\n              \"height\"\r\n            ) {\r\n              return;\r\n            }\r\n\r\n\r\n            if (\r\n              item.classList.contains(\r\n                \"is-open\"\r\n              )\r\n            ) {\r\n\r\n              panel.style.height =\r\n                \"auto\";\r\n\r\n            }\r\n\r\n          }\r\n        );\r\n\r\n      })(items[i]);\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =========================================================\r\n       MOBILE SCROLL ASSIST\r\n       ========================================================= *\/\r\n\r\n    function ease(item) {\r\n\r\n      if (reduced) {\r\n        return;\r\n      }\r\n\r\n\r\n      window.setTimeout(\r\n        function () {\r\n\r\n          var offset =\r\n            parseInt(\r\n              root.getAttribute(\r\n                \"data-scroll-offset\"\r\n              ),\r\n              10\r\n            );\r\n\r\n\r\n          if (\r\n            isNaN(offset)\r\n          ) {\r\n            offset = 24;\r\n          }\r\n\r\n\r\n          var top =\r\n            item\r\n              .getBoundingClientRect()\r\n              .top;\r\n\r\n\r\n          if (\r\n            top >=\r\n              offset - 4 &&\r\n            top <\r\n              window.innerHeight *\r\n              0.55\r\n          ) {\r\n            return;\r\n          }\r\n\r\n\r\n          var to =\r\n            window.pageYOffset +\r\n            top -\r\n            offset;\r\n\r\n\r\n          if (\r\n            \"scrollBehavior\"\r\n            in\r\n            document\r\n              .documentElement\r\n              .style\r\n          ) {\r\n\r\n            window.scrollTo({\r\n              top: to,\r\n              behavior: \"smooth\"\r\n            });\r\n\r\n          } else {\r\n\r\n            window.scrollTo(\r\n              0,\r\n              to\r\n            );\r\n\r\n          }\r\n\r\n        },\r\n        90\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =========================================================\r\n       SELECT SERVICE\r\n       ========================================================= *\/\r\n\r\n    function select(\r\n      index,\r\n      fromClick\r\n    ) {\r\n\r\n      var direction =\r\n        index > current\r\n          ? 1\r\n          : -1;\r\n\r\n\r\n      var n;\r\n\r\n\r\n\r\n      \/* MOBILE *\/\r\n\r\n      if (isMobile()) {\r\n\r\n        var item =\r\n          items[index];\r\n\r\n\r\n        var wasOpen =\r\n          item.classList.contains(\r\n            \"is-open\"\r\n          );\r\n\r\n\r\n        for (\r\n          n = 0;\r\n          n < items.length;\r\n          n++\r\n        ) {\r\n\r\n          items[n]\r\n            .classList\r\n            .toggle(\r\n              \"is-active\",\r\n              n === index &&\r\n              !wasOpen\r\n            );\r\n\r\n\r\n          if (\r\n            n !== index &&\r\n            items[n]\r\n              .classList\r\n              .contains(\r\n                \"is-open\"\r\n              )\r\n          ) {\r\n\r\n            closePanel(\r\n              items[n]\r\n            );\r\n\r\n          }\r\n\r\n        }\r\n\r\n\r\n        if (\r\n          wasOpen &&\r\n          fromClick\r\n        ) {\r\n\r\n          closePanel(\r\n            item\r\n          );\r\n\r\n        } else {\r\n\r\n          openPanel(\r\n            item\r\n          );\r\n\r\n\r\n          if (\r\n            fromClick\r\n          ) {\r\n\r\n            ease(\r\n              item\r\n            );\r\n\r\n          }\r\n\r\n        }\r\n\r\n\r\n        current =\r\n          index;\r\n\r\n\r\n        return;\r\n      }\r\n\r\n\r\n\r\n      \/* DESKTOP *\/\r\n\r\n      for (\r\n        n = 0;\r\n        n < items.length;\r\n        n++\r\n      ) {\r\n\r\n        items[n]\r\n          .classList\r\n          .toggle(\r\n            \"is-active\",\r\n            n === index\r\n          );\r\n\r\n\r\n        rows[n]\r\n          .setAttribute(\r\n            \"aria-selected\",\r\n            n === index\r\n              ? \"true\"\r\n              : \"false\"\r\n          );\r\n\r\n      }\r\n\r\n\r\n      placeMarker(\r\n        index,\r\n        true\r\n      );\r\n\r\n\r\n      showShot(\r\n        index,\r\n        direction\r\n      );\r\n\r\n\r\n      current =\r\n        index;\r\n    }\r\n\r\n\r\n\r\n    \/* =========================================================\r\n       CLICK \/ KEYBOARD\r\n       ========================================================= *\/\r\n\r\n    for (\r\n      i = 0;\r\n      i < rows.length;\r\n      i++\r\n    ) {\r\n\r\n      (function (index) {\r\n\r\n\r\n        rows[index]\r\n          .addEventListener(\r\n            \"click\",\r\n            function () {\r\n\r\n              select(\r\n                index,\r\n                true\r\n              );\r\n\r\n            }\r\n          );\r\n\r\n\r\n\r\n        rows[index]\r\n          .addEventListener(\r\n            \"keydown\",\r\n            function (event) {\r\n\r\n              var key =\r\n                event.key;\r\n\r\n\r\n              var next =\r\n                null;\r\n\r\n\r\n              if (\r\n                key ===\r\n                \"ArrowDown\"\r\n              ) {\r\n\r\n                next =\r\n                  index + 1;\r\n\r\n              }\r\n\r\n              else if (\r\n                key ===\r\n                \"ArrowUp\"\r\n              ) {\r\n\r\n                next =\r\n                  index - 1;\r\n\r\n              }\r\n\r\n              else if (\r\n                key ===\r\n                \"Home\"\r\n              ) {\r\n\r\n                next = 0;\r\n\r\n              }\r\n\r\n              else if (\r\n                key ===\r\n                \"End\"\r\n              ) {\r\n\r\n                next =\r\n                  rows.length - 1;\r\n\r\n              }\r\n\r\n\r\n              if (\r\n                next === null\r\n              ) {\r\n                return;\r\n              }\r\n\r\n\r\n              event.preventDefault();\r\n\r\n\r\n              next =\r\n                Math.max(\r\n                  0,\r\n                  Math.min(\r\n                    rows.length - 1,\r\n                    next\r\n                  )\r\n                );\r\n\r\n\r\n              select(\r\n                next,\r\n                true\r\n              );\r\n\r\n\r\n              rows[next]\r\n                .focus();\r\n\r\n            }\r\n          );\r\n\r\n\r\n      })(i);\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =========================================================\r\n       RESPONSIVE RESET\r\n       ========================================================= *\/\r\n\r\n    function reset() {\r\n\r\n      var n;\r\n\r\n\r\n      if (\r\n        isMobile()\r\n      ) {\r\n\r\n        if (marker) {\r\n\r\n          marker.style.opacity =\r\n            \"0\";\r\n\r\n        }\r\n\r\n\r\n        for (\r\n          n = 0;\r\n          n < items.length;\r\n          n++\r\n        ) {\r\n\r\n          if (\r\n            !items[n]\r\n              .classList\r\n              .contains(\r\n                \"is-open\"\r\n              )\r\n          ) {\r\n\r\n            var panel =\r\n              items[n]\r\n                .querySelector(\r\n                  \".as-panel\"\r\n                );\r\n\r\n\r\n            if (\r\n              panel\r\n            ) {\r\n\r\n              panel.style.height =\r\n                \"0px\";\r\n\r\n            }\r\n\r\n          }\r\n\r\n        }\r\n\r\n\r\n        if (\r\n          !root.querySelector(\r\n            \".as-item.is-open\"\r\n          )\r\n        ) {\r\n\r\n          openPanel(\r\n            items[0]\r\n          );\r\n\r\n\r\n          current =\r\n            0;\r\n\r\n        }\r\n\r\n      }\r\n\r\n      else {\r\n\r\n        for (\r\n          n = 0;\r\n          n < items.length;\r\n          n++\r\n        ) {\r\n\r\n          items[n]\r\n            .classList\r\n            .remove(\r\n              \"is-open\"\r\n            );\r\n\r\n\r\n          var p =\r\n            items[n]\r\n              .querySelector(\r\n                \".as-panel\"\r\n              );\r\n\r\n\r\n          if (p) {\r\n\r\n            p.style.height =\r\n              \"\";\r\n\r\n          }\r\n\r\n\r\n          items[n]\r\n            .classList\r\n            .toggle(\r\n              \"is-active\",\r\n              n === current\r\n            );\r\n\r\n        }\r\n\r\n\r\n        placeMarker(\r\n          current,\r\n          false\r\n        );\r\n\r\n\r\n        showShot(\r\n          current,\r\n          1\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n\r\n    var resizeTimer;\r\n\r\n\r\n    window.addEventListener(\r\n      \"resize\",\r\n      function () {\r\n\r\n        window.clearTimeout(\r\n          resizeTimer\r\n        );\r\n\r\n\r\n        resizeTimer =\r\n          window.setTimeout(\r\n            reset,\r\n            140\r\n          );\r\n\r\n      }\r\n    );\r\n\r\n\r\n\r\n    \/* =========================================================\r\n       REVEAL\r\n       ========================================================= *\/\r\n\r\n    function reveal() {\r\n\r\n      root.classList.add(\r\n        \"is-in\"\r\n      );\r\n\r\n\r\n      window.setTimeout(\r\n        function () {\r\n\r\n          placeMarker(\r\n            current,\r\n            false\r\n          );\r\n\r\n        },\r\n        60\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    if (\r\n      window.IntersectionObserver\r\n    ) {\r\n\r\n      var observer =\r\n        new window.IntersectionObserver(\r\n          function (entries) {\r\n\r\n            for (\r\n              var e = 0;\r\n              e < entries.length;\r\n              e++\r\n            ) {\r\n\r\n              if (\r\n                entries[e]\r\n                  .isIntersecting\r\n              ) {\r\n\r\n                reveal();\r\n\r\n\r\n                observer\r\n                  .disconnect();\r\n\r\n\r\n                break;\r\n              }\r\n\r\n            }\r\n\r\n          },\r\n          {\r\n            threshold:\r\n              0.15\r\n          }\r\n        );\r\n\r\n\r\n      observer.observe(\r\n        root\r\n      );\r\n\r\n    }\r\n\r\n    else {\r\n\r\n      reveal();\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =========================================================\r\n       INITIAL STATE\r\n       ========================================================= *\/\r\n\r\n    items[0]\r\n      .classList\r\n      .add(\r\n        \"is-active\"\r\n      );\r\n\r\n\r\n    if (\r\n      isMobile()\r\n    ) {\r\n\r\n      openPanel(\r\n        items[0]\r\n      );\r\n\r\n    }\r\n\r\n    else {\r\n\r\n      showShot(\r\n        0,\r\n        1\r\n      );\r\n\r\n\r\n      placeMarker(\r\n        0,\r\n        false\r\n      );\r\n\r\n    }\r\n\r\n\r\n\r\n    window.addEventListener(\r\n      \"load\",\r\n      function () {\r\n\r\n        placeMarker(\r\n          current,\r\n          false\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* ===========================================================\r\n     BOOT\r\n     =========================================================== *\/\r\n\r\n  function boot() {\r\n\r\n    var sections =\r\n      document.querySelectorAll(\r\n        \".aris-services\"\r\n      );\r\n\r\n\r\n    for (\r\n      var i = 0;\r\n      i < sections.length;\r\n      i++\r\n    ) {\r\n\r\n      init(\r\n        sections[i]\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  if (\r\n    document.readyState ===\r\n    \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      boot\r\n    );\r\n\r\n  }\r\n\r\n  else {\r\n\r\n    boot();\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\r\n\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-f35edeb\" id=\"projekti\" data-block-id=\"f35edeb\"><style>.stk-f35edeb {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-f35edeb-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-6d0dde9\" data-v=\"4\" data-block-id=\"6d0dde9\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-6d0dde9-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-6d0dde9-inner-blocks\"><style>\r\nbody:not(.hl-builder) .aris-projects {\r\n  \/* Changed background to white for the entrance *\/\r\n  --ap-bg: #ffffff;\r\n  --ap-ink: #0b0b0c;\r\n  --ap-ease: cubic-bezier(0.22, 1, 0.36, 1);\r\n  --ap-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\r\n\r\n  position: relative;\r\n  width: 100%;\r\n  background: var(--ap-bg);\r\n  color: var(--ap-ink);\r\n  \r\n  font-family: \"Helvetica Neue\", Helvetica, Arial, system-ui, sans-serif !important;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-projects *,\r\nbody:not(.hl-builder) .aris-projects *::before,\r\nbody:not(.hl-builder) .aris-projects *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ---------- Scroll Lock Track ---------- *\/\r\n\/* Creates a scroll budget so the section stays pinned while the intro animation plays *\/\r\nbody:not(.hl-builder) .ap-track {\r\n  position: relative;\r\n  height: 175vh;\r\n  height: 175svh;\r\n}\r\n\r\nbody:not(.hl-builder) .ap-pin {\r\n  position: -webkit-sticky;\r\n  position: sticky;\r\n  top: 0;\r\n  height: 100vh;\r\n  height: 100svh;\r\n  overflow: hidden;\r\n  background: var(--ap-bg); \/* Uses the white background now *\/\r\n}\r\n\r\n\/* ---------- Intro Animation Container ---------- *\/\r\nbody:not(.hl-builder) .ap-stage {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  \/* Default minimized state; updated by JS on scroll - strictly rectangular *\/\r\n  -webkit-clip-path: inset(19% 14% 19% 14%);\r\n  clip-path: inset(19% 14% 19% 14%);\r\n  will-change: clip-path;\r\n}\r\n\r\n@media (max-width: 700px) {\r\n  body:not(.hl-builder) .ap-stage {\r\n    -webkit-clip-path: inset(21% 7% 21% 7%);\r\n    clip-path: inset(21% 7% 21% 7%);\r\n  }\r\n}\r\n\r\n\/* ---------- Layers \/ Slides (Carousel Transitions) ---------- *\/\r\nbody:not(.hl-builder) .ap-layer {\r\n  position: absolute;\r\n  inset: 0;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  z-index: 1;\r\n  \r\n  \/* Quick Premium Animation: Fade + Subtle Scale *\/\r\n  transform: scale(1.04);\r\n  transition: opacity 0.8s ease, transform 1.2s var(--ap-ease-out);\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n}\r\n\r\nbody:not(.hl-builder) .ap-layer.is-active {\r\n  opacity: 1;\r\n  transform: scale(1);\r\n  pointer-events: auto;\r\n  z-index: 2;\r\n}\r\n\r\n\/* Media wrapper handles the scroll-driven intro scale and blur *\/\r\nbody:not(.hl-builder) .ap-layer__media {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: #111;\r\n  transform: scale(var(--intro-scale, 1.07));\r\n  filter: blur(var(--intro-blur, 24px));\r\n  will-change: transform, filter;\r\n}\r\n\r\nbody:not(.hl-builder) .ap-layer__media img {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  object-fit: cover;\r\n  object-position: center;\r\n}\r\n\r\n\/* Gradient overlay to ensure text legibility *\/\r\nbody:not(.hl-builder) .ap-layer__media::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  pointer-events: none;\r\n  background: linear-gradient(\r\n    to top,\r\n    rgba(0, 0, 0, 0.75) 0%,\r\n    rgba(0, 0, 0, 0.25) 35%,\r\n    rgba(0, 0, 0, 0) 100%\r\n  );\r\n}\r\n\r\n\/* ---------- Typography \/ Captions ---------- *\/\r\n\r\nbody:not(.hl-builder) .ap-caption {\r\n  position: absolute;\r\n  left: clamp(20px, 4vw, 60px);\r\n  bottom: clamp(30px, 6vh, 60px);\r\n  z-index: 3;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  color: #fff;\r\n  text-align: left;\r\n  \r\n  \/* Text fades in with a slight delay when sliding *\/\r\n  opacity: 0;\r\n  transform: translateY(15px);\r\n  transition: opacity 0.6s ease, transform 0.8s var(--ap-ease-out);\r\n}\r\n\r\nbody:not(.hl-builder) .ap-layer.is-active .ap-caption {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n  transition-delay: 0.15s;\r\n}\r\n\r\nbody:not(.hl-builder) .ap-caption__name {\r\n  display: block;\r\n  width: 100%;\r\n  margin-left: 0 !important;\r\n  padding-left: 0 !important;\r\n  text-indent: 0 !important;\r\n  font-size: clamp(38px, 5.6vw, 82px) !important;\r\n  font-weight: 400 !important;\r\n  letter-spacing: -0.035em !important;\r\n  line-height: 1 !important;\r\n  text-transform: none !important;\r\n}\r\n\r\nbody:not(.hl-builder) .ap-caption__meta {\r\n  display: block;\r\n  width: 100%;\r\n  margin-top: clamp(8px, 1.2vw, 16px);\r\n  margin-left: 0 !important;\r\n  padding-left: 5px !important;\r\n  text-indent: 0 !important;\r\n  font-size: clamp(14px, 1vw, 20px);\r\n  font-weight: 200;\r\n  letter-spacing: 0.05em;\r\n  opacity: 0.85;\r\n}\r\n\r\n\/* ---------- UI Elements (Arrows, Counter, Dots) ---------- *\/\r\n\/* Fade in completely only once the scroll intro finishes *\/\r\nbody:not(.hl-builder) .ap-ui {\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* Top Right Counter *\/\r\nbody:not(.hl-builder) .ap-counter {\r\n  position: absolute;\r\n  top: clamp(20px, 4vw, 40px);\r\n  right: clamp(20px, 4vw, 60px);\r\n  z-index: 5;\r\n  \r\n  padding: 8px 16px;\r\n  border-radius: 0;\r\n  background: rgba(255, 255, 255, 0.15);\r\n  -webkit-backdrop-filter: blur(12px);\r\n  backdrop-filter: blur(12px);\r\n  color: #fff;\r\n  \r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.05em;\r\n}\r\n\r\n\/* Bottom Center Dots *\/\r\nbody:not(.hl-builder) .ap-nav {\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: clamp(30px, 6vh, 60px);\r\n  z-index: 5;\r\n  transform: translateX(-50%);\r\n  \r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  \r\n  padding: 8px 12px;\r\n  border-radius: 0;\r\n  background: rgba(0, 0, 0, 0.2);\r\n  -webkit-backdrop-filter: blur(12px);\r\n  backdrop-filter: blur(12px);\r\n}\r\n\r\nbody:not(.hl-builder) .ap-dot {\r\n  display: block;\r\n  width: 24px;\r\n  height: 4px;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  background: rgba(255, 255, 255, 0.3);\r\n  cursor: pointer;\r\n  transition: background 0.3s ease, width 0.4s var(--ap-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ap-dot:hover {\r\n  background: rgba(255, 255, 255, 0.6);\r\n}\r\n\r\nbody:not(.hl-builder) .ap-dot.is-active {\r\n  width: 40px;\r\n  background: #ffffff;\r\n}\r\n\r\n\/* Bottom Right Arrows *\/\r\nbody:not(.hl-builder) .ap-arrows {\r\n  position: absolute;\r\n  right: clamp(20px, 4vw, 60px);\r\n  bottom: clamp(30px, 6vh, 60px);\r\n  z-index: 5;\r\n  \r\n  display: flex;\r\n  gap: 12px;\r\n}\r\n\r\nbody:not(.hl-builder) .ap-arrow {\r\n  display: grid;\r\n  place-items: center;\r\n  width: clamp(44px, 4vw, 54px);\r\n  height: clamp(44px, 4vw, 54px);\r\n  padding: 0;\r\n  \r\n  border-radius: 0;\r\n  border: 1px solid rgba(255, 255, 255, 0.3);\r\n  background: rgba(0, 0, 0, 0.1);\r\n  -webkit-backdrop-filter: blur(8px);\r\n  backdrop-filter: blur(8px);\r\n  color: #fff;\r\n  \r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\nbody:not(.hl-builder) .ap-arrow svg {\r\n  width: 20px;\r\n  height: 20px;\r\n  stroke-width: 1.5;\r\n}\r\n\r\nbody:not(.hl-builder) .ap-arrow:hover,\r\nbody:not(.hl-builder) .ap-arrow:focus-visible {\r\n  background: #ffffff;\r\n  color: #000000;\r\n  border-color: #ffffff;\r\n  transform: scale(1.05);\r\n}\r\n\r\n\/* ---------- Responsive Adjustments ---------- *\/\r\n@media (max-width: 768px) {\r\n  body:not(.hl-builder) .ap-nav {\r\n    display: none; \r\n  }\r\n  body:not(.hl-builder) .ap-arrows {\r\n    bottom: 24px;\r\n    right: 20px;\r\n  }\r\n  body:not(.hl-builder) .ap-caption {\r\n    bottom: 96px; \r\n    left: 20px;\r\n  }\r\n}\r\n\r\n\/* ---------- Reduced motion ---------- *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  body:not(.hl-builder) .ap-layer { transition: opacity 0.5s ease; transform: none !important; }\r\n  body:not(.hl-builder) .ap-stage { clip-path: inset(0) !important; }\r\n  body:not(.hl-builder) .ap-layer__media { filter: none !important; transform: none !important; }\r\n  body:not(.hl-builder) .ap-ui { opacity: 1 !important; pointer-events: auto !important; }\r\n  body:not(.hl-builder) .ap-track { height: auto; }\r\n  body:not(.hl-builder) .ap-pin { position: relative; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"aris-projects\" data-autoplay=\"7000\" aria-label=\"Odabrani projekti\">\r\n  \r\n  <!-- The Track enables scrolling down to reveal the image -->\r\n  <div class=\"ap-track\">\r\n    <div class=\"ap-pin\">\r\n      \r\n      <!-- Top Right Counter -->\r\n      <div class=\"ap-counter ap-ui\">01 \/ 05<\/div>\r\n\r\n      <!-- Expanding Slides Stage -->\r\n      <div class=\"ap-stage\">\r\n        \r\n        <div class=\"ap-layer is-active\">\r\n          <div class=\"ap-layer__media\">\r\n            <img src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e95b34793a2d512a998e1.webp\" alt=\"Dje\u010dji vrti\u0107 To\u010dkica\" loading=\"eager\" decoding=\"async\" \/>\r\n          <\/div>\r\n          <figcaption class=\"ap-caption\">\r\n            <span class=\"ap-caption__name\">Dje\u010dji vrti\u0107 To\u010dkica<\/span>\r\n            <span class=\"ap-caption__meta\">Trnovec Bartolove\u010dki \u00b7 2026.<\/span>\r\n          <\/figcaption>\r\n        <\/div>\r\n\r\n        <div class=\"ap-layer\">\r\n          <div class=\"ap-layer__media\">\r\n            <img src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e94edbcef8b5f2c22388b.jpg\" alt=\"Dje\u010dji vrti\u0107 Bubamara\" loading=\"lazy\" decoding=\"async\" \/>\r\n          <\/div>\r\n          <figcaption class=\"ap-caption\">\r\n            <span class=\"ap-caption__name\">Dje\u010dji vrti\u0107 Bubamara<\/span>\r\n            <span class=\"ap-caption__meta\">Gornji Kneginec \u00b7 2017.<\/span>\r\n          <\/figcaption>\r\n        <\/div>\r\n\r\n        <div class=\"ap-layer\">\r\n          <div class=\"ap-layer__media\">\r\n            <img src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9fc76fe62f080b4786ac74.webp\" alt=\"Dje\u010dji vrti\u0107 Petrijanec\" loading=\"lazy\" decoding=\"async\" \/>\r\n          <\/div>\r\n          <figcaption class=\"ap-caption\">\r\n            <span class=\"ap-caption__name\">Dje\u010dji vrti\u0107 Petrijanec<\/span>\r\n            <span class=\"ap-caption__meta\">Petrijanec \u00b7 2025.<\/span>\r\n          <\/figcaption>\r\n        <\/div>\r\n\r\n        <div class=\"ap-layer\">\r\n          <div class=\"ap-layer__media\">\r\n            <img src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9fc998ae9ba666e42efc0d.webp\" alt=\"Dje\u010dji vrti\u0107 Vara\u017edinske Toplice\" loading=\"lazy\" decoding=\"async\" \/>\r\n          <\/div>\r\n          <figcaption class=\"ap-caption\">\r\n            <span class=\"ap-caption__name\">Dje\u010dji vrti\u0107 Vara\u017edinske Toplice<\/span>\r\n            <span class=\"ap-caption__meta\">Vara\u017edinske Toplice \u00b7 2025.<\/span>\r\n          <\/figcaption>\r\n        <\/div>\r\n\r\n        <div class=\"ap-layer\">\r\n          <div class=\"ap-layer__media\">\r\n            <img src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9fdb0716ed327815a210f0.webp\" alt=\"Energetska obnova Policijske postaje Petrinja\" loading=\"lazy\" decoding=\"async\" \/>\r\n          <\/div>\r\n          <figcaption class=\"ap-caption\">\r\n            <span class=\"ap-caption__name\">Energetska obnova PP Petrinja<\/span>\r\n            <span class=\"ap-caption__meta\">Petrinja \u00b7 2020.<\/span>\r\n          <\/figcaption>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- Bottom Center Dots -->\r\n      <div class=\"ap-nav ap-ui\" role=\"tablist\" aria-label=\"Odaberite projekt\">\r\n        <button type=\"button\" class=\"ap-dot is-active\" aria-label=\"Projekt 1\" role=\"tab\"><\/button>\r\n        <button type=\"button\" class=\"ap-dot\" aria-label=\"Projekt 2\" role=\"tab\"><\/button>\r\n        <button type=\"button\" class=\"ap-dot\" aria-label=\"Projekt 3\" role=\"tab\"><\/button>\r\n        <button type=\"button\" class=\"ap-dot\" aria-label=\"Projekt 4\" role=\"tab\"><\/button>\r\n        <button type=\"button\" class=\"ap-dot\" aria-label=\"Projekt 5\" role=\"tab\"><\/button>\r\n      <\/div>\r\n\r\n      <!-- Bottom Right Arrows -->\r\n      <div class=\"ap-arrows ap-ui\">\r\n        <button type=\"button\" class=\"ap-arrow ap-arrow--prev\" aria-label=\"Prethodni projekt\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" \/>\r\n          <\/svg>\r\n        <\/button>\r\n        <button type=\"button\" class=\"ap-arrow ap-arrow--next\" aria-label=\"Sljede\u0107i projekt\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" \/>\r\n          <\/svg>\r\n        <\/button>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  \"use strict\";\r\n\r\n  if (document.body && document.body.className.indexOf(\"hl-builder\") !== -1) {\r\n    return;\r\n  }\r\n\r\n  function initSection(root) {\r\n    var track = root.querySelector(\".ap-track\");\r\n    var stage = root.querySelector(\".ap-stage\");\r\n    var uis = root.querySelectorAll(\".ap-ui\");\r\n    \r\n    var layers = root.querySelectorAll(\".ap-layer\");\r\n    var dots = root.querySelectorAll(\".ap-dot\");\r\n    var prevBtn = root.querySelector(\".ap-arrow--prev\");\r\n    var nextBtn = root.querySelector(\".ap-arrow--next\");\r\n    var counterText = root.querySelector(\".ap-counter\");\r\n    \r\n    var reduced = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n    \/\/ --- 1. SCROLL SCRUB INTRO ENGINE ---\r\n    \/\/ This expands the image smoothly as the user scrolls into the section.\r\n    \r\n    var currentP = 0;\r\n    var targetP = 0;\r\n    var isRunning = true;\r\n    \r\n    \/\/ Starting dimensions matching original look\r\n    var startTop = window.innerWidth < 700 ? 21 : 19;\r\n    var startSide = window.innerWidth < 700 ? 7 : 14;\r\n    var startBlur = window.innerWidth < 700 ? 14 : 24;\r\n\r\n    function renderScroll() {\r\n      if (reduced) return;\r\n      \r\n      var rect = track.getBoundingClientRect();\r\n      var travel = track.offsetHeight - window.innerHeight;\r\n      \r\n      if (travel > 0) {\r\n        \/\/ Calculate scroll progress exclusively inside the track\r\n        targetP = Math.max(0, Math.min(1, -rect.top \/ travel));\r\n      } else {\r\n        targetP = 1;\r\n      }\r\n      \r\n      \/\/ Smooth interpolation for the luxurious feel\r\n      currentP += (targetP - currentP) * 0.08;\r\n      \r\n      if (Math.abs(targetP - currentP) < 0.001) {\r\n        currentP = targetP;\r\n      }\r\n      \r\n      \/\/ Apply ease-out-cubic to the progress to make the snap at the end smooth\r\n      var e = 1 - Math.pow(1 - currentP, 3);\r\n      \r\n      \/\/ Calculate dynamic dimensions shrinking down to 0\r\n      var top = startTop * (1 - e);\r\n      var side = startSide * (1 - e);\r\n      \r\n      \/\/ Update DOM for the opening window - entirely sharp and rectangular\r\n      var clip = \"inset(\" + top + \"% \" + side + \"% \" + top + \"% \" + side + \"%)\";\r\n      stage.style.webkitClipPath = clip;\r\n      stage.style.clipPath = clip;\r\n      \r\n      \/\/ Update CSS vars for the internal image scale and blur\r\n      root.style.setProperty('--intro-blur', (startBlur * (1 - e)) + 'px');\r\n      root.style.setProperty('--intro-scale', 1 + 0.07 * (1 - e));\r\n      \r\n      \/\/ Fade in UI elements (Arrows, Dots, Text) at the very end of the scroll intro\r\n      var uiOp = Math.max(0, Math.min(1, (e - 0.7) \/ 0.3));\r\n      uis.forEach(function(ui) {\r\n        ui.style.opacity = uiOp;\r\n        ui.style.pointerEvents = uiOp > 0.5 ? 'auto' : 'none';\r\n      });\r\n\r\n      \/\/ Keep slide 1 visible throughout the intro. Autoplay begins only\r\n      \/\/ when the visitor has reached the fully revealed project section.\r\n      if (!autoplayStarted && currentP >= 0.98) {\r\n        beginAutoplay();\r\n      }\r\n      \r\n      if (isRunning) {\r\n        requestAnimationFrame(renderScroll);\r\n      }\r\n    }\r\n    \r\n    \/\/ Start scrub engine\r\n    requestAnimationFrame(renderScroll);\r\n\r\n\r\n    \/\/ --- 2. CAROUSEL ENGINE ---\r\n\r\n    var current = 0;\r\n    var total = layers.length;\r\n    var playMs = parseInt(root.getAttribute(\"data-autoplay\"), 10) || 7000;\r\n    var timer;\r\n    var autoplayStarted = false;\r\n\r\n    if (!total) return;\r\n\r\n    function formatNum(num) {\r\n      return num < 10 ? \"0\" + num : num;\r\n    }\r\n\r\n    function goToSlide(index) {\r\n      \/\/ Remove active states\r\n      layers[current].classList.remove(\"is-active\");\r\n      if (dots[current]) dots[current].classList.remove(\"is-active\");\r\n\r\n      \/\/ Update index\r\n      current = index;\r\n\r\n      \/\/ Add active states\r\n      layers[current].classList.add(\"is-active\");\r\n      if (dots[current]) dots[current].classList.add(\"is-active\");\r\n\r\n      \/\/ Update fraction counter\r\n      if (counterText) {\r\n        counterText.innerText = formatNum(current + 1) + \" \/ \" + formatNum(total);\r\n      }\r\n    }\r\n\r\n    function nextSlide() {\r\n      goToSlide((current + 1) % total);\r\n    }\r\n\r\n    function prevSlide() {\r\n      goToSlide((current - 1 + total) % total);\r\n    }\r\n\r\n    function startAutoplay() {\r\n      autoplayStarted = true;\r\n      clearInterval(timer);\r\n      if (playMs > 0) {\r\n        timer = setInterval(nextSlide, playMs);\r\n      }\r\n    }\r\n\r\n    function beginAutoplay() {\r\n      if (autoplayStarted) return;\r\n      goToSlide(0);\r\n      startAutoplay();\r\n    }\r\n\r\n    \/\/ Attach Event Listeners\r\n    if (prevBtn) {\r\n      prevBtn.addEventListener(\"click\", function () {\r\n        prevSlide();\r\n        startAutoplay(); \/\/ Reset timer on manual interaction\r\n      });\r\n    }\r\n\r\n    if (nextBtn) {\r\n      nextBtn.addEventListener(\"click\", function () {\r\n        nextSlide();\r\n        startAutoplay(); \/\/ Reset timer on manual interaction\r\n      });\r\n    }\r\n\r\n    dots.forEach(function (dot, index) {\r\n      dot.addEventListener(\"click\", function () {\r\n        goToSlide(index);\r\n        startAutoplay(); \/\/ Reset timer\r\n      });\r\n    });\r\n\r\n    \/\/ Initialize slide 1, but do not start the timer while the section\r\n    \/\/ is still off-screen or while its intro animation is playing.\r\n    goToSlide(0);\r\n\r\n    \/\/ Reduced-motion mode has no scroll intro, so begin when the section\r\n    \/\/ itself becomes visible.\r\n    if (reduced) {\r\n      if (window.IntersectionObserver) {\r\n        var autoplayObserver = new window.IntersectionObserver(function (entries) {\r\n          if (entries[0] && entries[0].isIntersecting) {\r\n            beginAutoplay();\r\n            autoplayObserver.disconnect();\r\n          }\r\n        }, { threshold: 0.35 });\r\n\r\n        autoplayObserver.observe(stage || root);\r\n      } else {\r\n        beginAutoplay();\r\n      }\r\n    }\r\n  }\r\n\r\n  \/\/ Boot up sequence\r\n  function boot() {\r\n    var sections = document.querySelectorAll(\".aris-projects\");\r\n    sections.forEach(initSection);\r\n  }\r\n\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\"DOMContentLoaded\", boot);\r\n  } else {\r\n    boot();\r\n  }\r\n})();\r\n<\/script>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-9d24efb\" id=\"o-nama\" data-block-id=\"9d24efb\"><style>.stk-9d24efb {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-9d24efb-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-38af053\" data-v=\"4\" data-block-id=\"38af053\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-38af053-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-38af053-inner-blocks\"><style>\r\nbody:not(.hl-builder) .aris-about {\r\n  --ab-bg: #ffffff;\r\n  --ab-ink: #0a0a0b;\r\n  --ab-muted: #888886;\r\n  --ab-line: rgba(10, 10, 11, 0.10);\r\n  --ab-red: #e1211b;\r\n  --ab-ease: cubic-bezier(0.22, 1, 0.36, 1);\r\n  --ab-curtain-ease: cubic-bezier(0.77, 0, 0.175, 1);\r\n  --ab-pad: clamp(20px, 5vw, 82px);\r\n  --ab-top: clamp(24px, 8vh, 88px);\r\n\r\n  position: relative;\r\n  padding: clamp(58px, 7vw, 110px) var(--ab-pad) clamp(80px, 10vw, 150px);\r\n  overflow: visible;\r\n  background: var(--ab-bg) !important;\r\n  color: var(--ab-ink) !important;\r\n  -webkit-text-fill-color: var(--ab-ink);\r\n  font-family: \"Helvetica Neue\", Helvetica, Arial, system-ui, sans-serif !important;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-about *,\r\nbody:not(.hl-builder) .aris-about *::before,\r\nbody:not(.hl-builder) .aris-about *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-about :focus-visible {\r\n  outline: 2px solid var(--ab-red);\r\n  outline-offset: 4px;\r\n}\r\n\r\n\/* ============================================================\r\n   SHARED CURTAIN REVEAL MECHANICS\r\n   ============================================================ *\/\r\n\r\nbody:not(.hl-builder) .ab-reveal {\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  border-radius: 0 !important; \/* STRICTLY RECTANGULAR *\/\r\n  background: #e8e8e5;\r\n  isolation: isolate;\r\n}\r\n\r\nbody:not(.hl-builder) .ab-reveal__media {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  overflow: hidden;\r\n}\r\n\r\nbody:not(.hl-builder) .ab-reveal__media img {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  opacity: 0;\r\n\r\n  \/* Start slightly to the right so it pans cohesively with the right-to-left curtain *\/\r\n  transform: translate3d(2.8%, 0, 0) scale(1.085);\r\n  transform-origin: center;\r\n  transition: opacity 0.35s ease, transform 1.9s var(--ab-ease);\r\n  will-change: transform, opacity;\r\n}\r\n\r\n\/* Images reveal individually when their specific wrapper gets the class *\/\r\nbody:not(.hl-builder) .ab-reveal.is-ready .ab-reveal__media img {\r\n  opacity: 1;\r\n}\r\n\r\nbody:not(.hl-builder) .ab-reveal.is-in .ab-reveal__media img {\r\n  transform: translate3d(0, 0, 0) scale(1);\r\n}\r\n\r\nbody:not(.hl-builder) .ab-curtain {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 5;\r\n  background: var(--ab-bg);\r\n  transform: translate3d(0, 0, 0);\r\n  transition: transform 1.65s var(--ab-curtain-ease);\r\n  will-change: transform;\r\n}\r\n\r\n\/* Curtain animates individually - sliding to the left (-100.2%) to reveal from the right *\/\r\nbody:not(.hl-builder) .ab-reveal.is-in .ab-curtain {\r\n  transform: translate3d(-100.2%, 0, 0);\r\n}\r\n\r\n\/* ============================================================\r\n   TOP HERO IMAGE\r\n   ============================================================ *\/\r\nbody:not(.hl-builder) .ab-reveal--top {\r\n  aspect-ratio: 21 \/ 9;\r\n}\r\n\r\n\/* ============================================================\r\n   MAIN BODY\r\n   ============================================================ *\/\r\n\r\nbody:not(.hl-builder) .ab-body {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);\r\n  gap: clamp(42px, 6vw, 104px);\r\n  align-items: start;\r\n  margin-top: clamp(64px, 8vw, 120px);\r\n}\r\n\r\n\/* ============================================================\r\n   LEFT \/ STICKY INTRO\r\n   ============================================================ *\/\r\n\r\nbody:not(.hl-builder) .ab-intro {\r\n  position: sticky;\r\n  top: var(--ab-top);\r\n  height: auto;\r\n  color: var(--ab-ink) !important;\r\n}\r\n\r\n\/* ============================================================\r\n   ABOUT TITLE\r\n   ============================================================ *\/\r\n\r\nbody:not(.hl-builder) .aris-about .ab-title {\r\n  margin: 0 0 clamp(16px, 1.7vw, 24px);\r\n  color: var(--ab-ink) !important;\r\n  -webkit-text-fill-color: var(--ab-ink) !important;\r\n  font-family: inherit !important;\r\n  font-size: clamp(38px, 5.6vw, 82px) !important;\r\n  font-weight: 500 !important;\r\n  line-height: 1 !important;\r\n  letter-spacing: -0.035em !important;\r\n  text-transform: none !important;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-about h2.ab-title {\r\n  color: var(--ab-ink) !important;\r\n  -webkit-text-fill-color: var(--ab-ink) !important;\r\n}\r\n\r\n\/* ============================================================\r\n   INTRO TEXT\r\n   ============================================================ *\/\r\n\r\nbody:not(.hl-builder) .aris-about .ab-text {\r\n  max-width: 48ch;\r\n  margin: 0;\r\n  color: rgba(10, 10, 11, 0.67) !important;\r\n  -webkit-text-fill-color: rgba(10, 10, 11, 0.67) !important;\r\n  font-family: inherit !important;\r\n  font-size: clamp(14px, 1vw, 20px) !important;\r\n  font-weight: 400 !important;\r\n  line-height: 1.65 !important;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-about .ab-text strong {\r\n  font-weight: 700 !important;\r\n  color: inherit !important;\r\n  -webkit-text-fill-color: inherit !important;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-about .ab-text + .ab-text {\r\n  margin-top: 14px;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-about .ab-intro p.ab-text {\r\n  color: rgba(10, 10, 11, 0.67) !important;\r\n  -webkit-text-fill-color: rgba(10, 10, 11, 0.67) !important;\r\n}\r\n\r\n\/* ============================================================\r\n   META\r\n   ============================================================ *\/\r\n\r\nbody:not(.hl-builder) .aris-about .ab-meta {\r\n  display: block;\r\n  margin-top: clamp(19px, 2vw, 28px);\r\n  padding-top: clamp(15px, 1.5vw, 20px);\r\n  border-top: 1px solid var(--ab-line);\r\n  color: var(--ab-muted) !important;\r\n  -webkit-text-fill-color: var(--ab-muted) !important;\r\n  font-family: inherit !important;\r\n  font-size: clamp(10px, 0.82vw, 12px) !important;\r\n  font-weight: 600 !important;\r\n  line-height: 1.6 !important;\r\n  letter-spacing: 0.14em !important;\r\n  text-transform: uppercase;\r\n}\r\n\r\n\/* ============================================================\r\n   RIGHT COLUMN (IMAGE)\r\n   ============================================================ *\/\r\nbody:not(.hl-builder) .ab-reveal--side {\r\n  aspect-ratio: 4 \/ 5;\r\n  width: 100%;\r\n}\r\n\r\n\/* ============================================================\r\n   TEXT ENTRANCE\r\n   ============================================================ *\/\r\n\r\nbody:not(.hl-builder) .ab-anim {\r\n  opacity: 0;\r\n  transform: translate3d(0, 20px, 0);\r\n  transition: opacity 0.8s var(--ab-ease) var(--ab-d, 0s), transform 1s var(--ab-ease) var(--ab-d, 0s);\r\n}\r\n\r\nbody:not(.hl-builder) .aris-about.is-in .ab-anim {\r\n  opacity: 1;\r\n  transform: none;\r\n}\r\n\r\n\/* ============================================================\r\n   MOBILE\r\n   ============================================================ *\/\r\n\r\n@media (max-width: 900px) {\r\n  body:not(.hl-builder) .aris-about {\r\n    --ab-top: 16px;\r\n    padding-top: 42px;\r\n  }\r\n\r\n  body:not(.hl-builder) .ab-reveal--top {\r\n    aspect-ratio: 4 \/ 3;\r\n  }\r\n  \r\n  body:not(.hl-builder) .ab-reveal--side {\r\n    aspect-ratio: 4 \/ 3; \/* Shorter aspect ratio on mobile for side image *\/\r\n  }\r\n\r\n  body:not(.hl-builder) .ab-body {\r\n    grid-template-columns: minmax(0, 1fr);\r\n    gap: clamp(38px, 8vw, 56px);\r\n    margin-top: 58px;\r\n  }\r\n\r\n  body:not(.hl-builder) .ab-intro {\r\n    position: static;\r\n    height: auto;\r\n    display: block;\r\n  }\r\n\r\n  body:not(.hl-builder) .aris-about .ab-text {\r\n    color: rgba(10, 10, 11, 0.67) !important;\r\n    -webkit-text-fill-color: rgba(10, 10, 11, 0.67) !important;\r\n  }\r\n}\r\n\r\n\/* ============================================================\r\n   REDUCED MOTION\r\n   ============================================================ *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  body:not(.hl-builder) .aris-about *,\r\n  body:not(.hl-builder) .aris-about *::before,\r\n  body:not(.hl-builder) .aris-about *::after {\r\n    transition-duration: 0.001ms !important;\r\n    transition-delay: 0ms !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"aris-about\" aria-label=\"O nama\">\r\n\r\n  <!-- ========================================================\r\n       TOP CURTAIN IMAGE\r\n       ======================================================== -->\r\n  <div class=\"ab-reveal ab-reveal--top\">\r\n    <div class=\"ab-reveal__media\">\r\n      <img\r\n        class=\"ab-reveal__image\"\r\n        src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e9e3a4793a2d512aa88b0.png\"\r\n        alt=\"Aris projektiranje\"\r\n        loading=\"eager\"\r\n        fetchpriority=\"high\"\r\n        decoding=\"async\"\r\n      >\r\n    <\/div>\r\n    <span class=\"ab-curtain\" aria-hidden=\"true\"><\/span>\r\n  <\/div>\r\n\r\n  <!-- ========================================================\r\n       CONTENT\r\n       ======================================================== -->\r\n  <div class=\"ab-body\">\r\n\r\n    <!-- ======================================================\r\n         LEFT\r\n         ====================================================== -->\r\n    <div class=\"ab-intro\">\r\n\r\n      <h2 class=\"ab-title ab-anim\" style=\"--ab-d:.16s\">\r\n        Svaki kvalitetan projekt po\u010dinje pravim partnerom.\r\n      <\/h2>\r\n\r\n      <p class=\"ab-text ab-anim\" style=\"--ab-d:.22s\">\r\n        <strong>Aris<\/strong> je projektantski ured usmjeren na projektiranje stambenih, poslovnih i proizvodnih gra\u0111evina.\r\n      <\/p>\r\n      \r\n      <p class=\"ab-text ab-anim\" style=\"--ab-d:.26s\">\r\n        Projekte razvijamo kroz sve faze \u2013 od ideje i projektiranja do isho\u0111enja dokumentacije i stru\u010dnog nadzora.\r\n      <\/p>\r\n      \r\n      <p class=\"ab-text ab-anim\" style=\"--ab-d:.30s\">\r\n        Radimo individualno i posve\u0107eno, uz fokus na kvalitetu, funkcionalnost i promi\u0161ljena arhitektonska rje\u0161enja.\r\n      <\/p>\r\n\r\n    \r\n\r\n    <\/div>\r\n\r\n    <!-- ======================================================\r\n         RIGHT IMAGE\r\n         ====================================================== -->\r\n    <div class=\"ab-side-image\">\r\n      <div class=\"ab-reveal ab-reveal--side\">\r\n        <div class=\"ab-reveal__media\">\r\n          <img\r\n            class=\"ab-reveal__image\"\r\n            src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6aa3c1d7d1b3cd745baf1722.webp\"\r\n            alt=\"Aris projekt\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          >\r\n        <\/div>\r\n        <!-- This curtain reveals exactly like the top one -->\r\n        <span class=\"ab-curtain\" style=\"transition-delay: 0.15s;\" aria-hidden=\"true\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  \"use strict\";\r\n\r\n  \/* GHL builder guard *\/\r\n  if (document.body && document.body.className.indexOf(\"hl-builder\") !== -1) { return; }\r\n\r\n  function init(root) {\r\n    if (!root || root.getAttribute(\"data-ab-init\") === \"1\") { return; }\r\n    root.setAttribute(\"data-ab-init\", \"1\");\r\n\r\n    var reveals = root.querySelectorAll(\".ab-reveal\");\r\n    var intro = root.querySelector(\".ab-intro\");\r\n\r\n    \/* ========================================================\r\n       TEXT REVEAL\r\n       ======================================================== *\/\r\n    if (window.IntersectionObserver) {\r\n      var textObserver = new window.IntersectionObserver(function (entries) {\r\n        if (entries[0].isIntersecting) {\r\n          root.classList.add(\"is-in\");\r\n          textObserver.disconnect();\r\n        }\r\n      }, { threshold: 0.15 });\r\n      textObserver.observe(intro || root);\r\n    } else {\r\n      root.classList.add(\"is-in\");\r\n    }\r\n\r\n    \/* ========================================================\r\n       INDIVIDUAL IMAGE REVEALS\r\n       ======================================================== *\/\r\n    reveals.forEach(function(revealEl) {\r\n      var img = revealEl.querySelector(\".ab-reveal__image\");\r\n      var revealed = false;\r\n\r\n      function triggerReveal() {\r\n        if (revealed) return;\r\n        revealed = true;\r\n        \r\n        revealEl.classList.add(\"is-ready\");\r\n        window.requestAnimationFrame(function () {\r\n          window.requestAnimationFrame(function () {\r\n            revealEl.classList.add(\"is-in\");\r\n          });\r\n        });\r\n      }\r\n\r\n      function checkIntersection() {\r\n        if (window.IntersectionObserver) {\r\n          var obs = new window.IntersectionObserver(function (entries) {\r\n            if (entries[0].isIntersecting) {\r\n              triggerReveal();\r\n              obs.disconnect();\r\n            }\r\n          }, { threshold: 0.15 });\r\n          obs.observe(revealEl);\r\n        } else {\r\n          triggerReveal();\r\n        }\r\n      }\r\n\r\n      function imageReady() {\r\n        checkIntersection();\r\n      }\r\n\r\n      if (img) {\r\n        if (img.complete && img.naturalWidth) {\r\n          if (img.decode) { img.decode().then(imageReady)[\"catch\"](imageReady); }\r\n          else { imageReady(); }\r\n        } else {\r\n          img.addEventListener(\"load\", function(e) {\r\n            if (e.target.decode) { e.target.decode().then(imageReady)[\"catch\"](imageReady); }\r\n            else { imageReady(); }\r\n          }, { once: true });\r\n          img.addEventListener(\"error\", imageReady, { once: true });\r\n        }\r\n      } else {\r\n        imageReady();\r\n      }\r\n    });\r\n  }\r\n\r\n  function boot() {\r\n    var sections = document.querySelectorAll(\".aris-about\");\r\n    for (var i = 0; i < sections.length; i++) { init(sections[i]); }\r\n  }\r\n\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\"DOMContentLoaded\", boot);\r\n  } else {\r\n    boot();\r\n  }\r\n})();\r\n<\/script>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-611ee7d\" id=\"kontakt\" data-block-id=\"611ee7d\"><style>.stk-611ee7d {padding-top:0px !important;padding-bottom:80px !important;margin-bottom:0px !important;}@media screen and (max-width:999px){.stk-611ee7d {padding-top:5px !important;}}@media screen and (max-width:689px){.stk-611ee7d {padding-top:0px !important;padding-right:var(--stk--preset--spacing--none, 0px) !important;padding-bottom:80px !important;padding-left:var(--stk--preset--spacing--none, 0px) !important;}}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-611ee7d-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-794c901\" data-v=\"4\" data-block-id=\"794c901\"><style>.stk-794c901 {align-self:center !important;}@media screen and (max-width:689px){.stk-794c901 {padding-top:var(--stk--preset--spacing--none, 0px) !important;padding-right:var(--stk--preset--spacing--none, 0px) !important;padding-bottom:var(--stk--preset--spacing--none, 0px) !important;padding-left:var(--stk--preset--spacing--none, 0px) !important;}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-794c901-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-794c901-inner-blocks\">\n<style>\n.aris-form-head {\n  --aris-ink: #0b0b0c;\n  --aris-muted: #8e8e8c;\n  --aris-red: #e1211b;\n\n  width: 100%;\n  max-width: 760px;\n  margin: 0 auto;\n  padding: 0 clamp(20px, 3vw, 40px);\n\n  color: var(--aris-ink) !important;\n\n  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    system-ui,\n    sans-serif !important;\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  box-sizing: border-box;\n}\n\n.aris-form-head *,\n.aris-form-head *::before,\n.aris-form-head *::after {\n  box-sizing: border-box;\n}\n\n\/* ============================================================\n   EYEBROW\n   ============================================================ *\/\n\n.aris-form-eyebrow {\n  display: flex !important;\n  align-items: center;\n  gap: 9px;\n\n  margin: 0 0 14px;\n\n  color: var(--aris-muted) !important;\n  -webkit-text-fill-color: var(--aris-muted) !important;\n\n  font-family: inherit !important;\n  font-size: 11px !important;\n  font-weight: 600 !important;\n  line-height: 1.2 !important;\n  letter-spacing: 0.2em !important;\n  text-transform: uppercase !important;\n}\n\n.aris-form-eyebrow::before {\n  content: \"\";\n\n  width: 6px;\n  height: 6px;\n  flex: 0 0 6px;\n\n  background: var(--aris-red);\n}\n\n\/* ============================================================\n   HEADLINE\n   Same typography as the O nama headline\n   ============================================================ *\/\n\n.aris-form-title {\n  margin: 0 0 clamp(16px, 1.7vw, 24px) !important;\n\n  color: var(--aris-ink) !important;\n  -webkit-text-fill-color: var(--aris-ink) !important;\n\n  font-family: inherit !important;\n  font-size: clamp(38px, 5.6vw, 82px) !important;\n  font-weight: 500 !important;\n  line-height: 1 !important;\n  letter-spacing: -0.035em !important;\n  text-transform: none !important;\n}\n\n\/* ============================================================\n   SUBHEADLINE\n   Same typography as the O nama description\n   ============================================================ *\/\n\n.aris-form-copy {\n  max-width: 48ch;\n  margin: 0 !important;\n\n  color: rgba(11, 11, 12, 0.68) !important;\n  -webkit-text-fill-color: rgba(11, 11, 12, 0.68) !important;\n\n  font-family: inherit !important;\n  font-size: clamp(14px, 1.02vw, 20px) !important;\n  font-weight: 400 !important;\n  line-height: 1.65 !important;\n  letter-spacing: normal !important;\n  text-transform: none !important;\n}\n\n\/* ============================================================\n   FORMINATOR\n   ============================================================ *\/\n\n#forminator-module-687 {\n  --ff-ink: #0b0b0c;\n  --ff-muted: #8e8e8c;\n  --ff-line: rgba(11, 11, 12, 0.13);\n  --ff-line-strong: rgba(11, 11, 12, 0.3);\n  --ff-red: #e1211b;\n  --ff-button: #242426;\n  --ff-button-hover: #0b0b0c;\n  --ff-ease: cubic-bezier(0.22, 1, 0.36, 1);\n\n  width: 100% !important;\n  max-width: 760px !important;\n  margin: 32px auto 0 !important;\n  padding: 0 clamp(20px, 3vw, 40px) !important;\n\n  box-sizing: border-box;\n  visibility: visible !important;\n  opacity: 1 !important;\n  overflow: visible !important;\n\n  color: var(--ff-ink) !important;\n\n  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    system-ui,\n    sans-serif !important;\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n#forminator-module-687 *,\n#forminator-module-687 *::before,\n#forminator-module-687 *::after {\n  box-sizing: border-box;\n}\n\n#forminator-module-687 form,\n#forminator-module-687 .forminator-ui,\n#forminator-module-687 .forminator-custom-form,\n#forminator-module-687 .forminator-row,\n#forminator-module-687 .forminator-col,\n#forminator-module-687 .forminator-field {\n  visibility: visible !important;\n  opacity: 1 !important;\n  height: auto !important;\n  overflow: visible !important;\n}\n\n#forminator-module-687 .forminator-row {\n  width: 100% !important;\n  margin-bottom: 18px !important;\n}\n\n\/* ============================================================\n   LABELS\n   ============================================================ *\/\n\n#forminator-module-687 .forminator-label {\n  display: block !important;\n  margin-bottom: 8px !important;\n\n  color: var(--ff-muted) !important;\n  -webkit-text-fill-color: var(--ff-muted) !important;\n\n  font-family: inherit !important;\n  font-size: 10px !important;\n  font-weight: 600 !important;\n  line-height: 1.4 !important;\n  letter-spacing: 0.18em !important;\n  text-transform: uppercase !important;\n}\n\n#forminator-module-687 .forminator-required {\n  color: var(--ff-red) !important;\n  -webkit-text-fill-color: var(--ff-red) !important;\n}\n\n\/* ============================================================\n   INPUTS\n   ============================================================ *\/\n\n#forminator-module-687 input[type=\"text\"],\n#forminator-module-687 input[type=\"email\"],\n#forminator-module-687 input[type=\"tel\"],\n#forminator-module-687 input[type=\"url\"],\n#forminator-module-687 input[type=\"number\"],\n#forminator-module-687 .forminator-input,\n#forminator-module-687 textarea,\n#forminator-module-687 .forminator-textarea,\n#forminator-module-687 select {\n  display: block !important;\n\n  width: 100% !important;\n  min-height: 54px !important;\n  padding: 15px 17px !important;\n\n  border: 1px solid var(--ff-line) !important;\n  border-radius: 0 !important;\n\n  background: #ffffff !important;\n\n  color: var(--ff-ink) !important;\n  -webkit-text-fill-color: var(--ff-ink) !important;\n\n  font-family: inherit !important;\n  font-size: 16px !important;\n  font-weight: 400 !important;\n  line-height: 1.4 !important;\n\n  outline: none !important;\n  box-shadow: none !important;\n\n  visibility: visible !important;\n  opacity: 1 !important;\n\n  transition:\n    border-color 0.4s var(--ff-ease),\n    box-shadow 0.4s var(--ff-ease) !important;\n}\n\n#forminator-module-687 textarea,\n#forminator-module-687 .forminator-textarea {\n  min-height: 150px !important;\n  resize: vertical !important;\n}\n\n#forminator-module-687 input:focus,\n#forminator-module-687 textarea:focus,\n#forminator-module-687 select:focus {\n  border-color: var(--ff-ink) !important;\n  box-shadow: 0 0 0 3px rgba(11, 11, 12, 0.07) !important;\n}\n\n#forminator-module-687 ::placeholder {\n  color: var(--ff-muted) !important;\n  -webkit-text-fill-color: var(--ff-muted) !important;\n  opacity: 1 !important;\n}\n\n\/* ============================================================\n   CHECKBOXES AND RADIO BUTTONS\n   ============================================================ *\/\n\n#forminator-module-687 input[type=\"checkbox\"],\n#forminator-module-687 input[type=\"radio\"] {\n  accent-color: var(--ff-red);\n}\n\n#forminator-module-687 .forminator-checkbox,\n#forminator-module-687 .forminator-radio {\n  color: rgba(11, 11, 12, 0.72) !important;\n  -webkit-text-fill-color: rgba(11, 11, 12, 0.72) !important;\n\n  font-family: inherit !important;\n  font-size: 13px !important;\n  font-weight: 400 !important;\n  line-height: 1.55 !important;\n}\n\n\/* ============================================================\n   SUBMIT BUTTON\n   ============================================================ *\/\n\n#forminator-module-687 .forminator-button-submit,\n#forminator-module-687 button[type=\"submit\"] {\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n\n  min-height: 58px !important;\n  padding: 0 34px !important;\n\n  border: 0 !important;\n  border-radius: 0 !important;\n\n  \/* Slightly lighter black *\/\n  background: var(--ff-button) !important;\n\n  color: #ffffff !important;\n  -webkit-text-fill-color: #ffffff !important;\n\n  font-family: inherit !important;\n  font-size: 15px !important;\n  font-weight: 600 !important;\n  line-height: 1 !important;\n\n  cursor: pointer !important;\n  visibility: visible !important;\n  opacity: 1 !important;\n\n  box-shadow: none !important;\n\n  transition:\n    transform 0.45s var(--ff-ease),\n    background-color 0.45s var(--ff-ease),\n    box-shadow 0.45s var(--ff-ease) !important;\n}\n\n#forminator-module-687 .forminator-button-submit:hover,\n#forminator-module-687 button[type=\"submit\"]:hover {\n  \/* Dark black on hover *\/\n  background: var(--ff-button-hover) !important;\n  transform: translateY(-2px);\n  box-shadow: 0 10px 28px rgba(11, 11, 12, 0.16) !important;\n}\n\n#forminator-module-687 .forminator-button-submit:active,\n#forminator-module-687 button[type=\"submit\"]:active {\n  transform: translateY(0);\n}\n\n#forminator-module-687 .forminator-button-submit:focus-visible,\n#forminator-module-687 button[type=\"submit\"]:focus-visible {\n  background: var(--ff-button-hover) !important;\n  outline: 2px solid var(--ff-ink) !important;\n  outline-offset: 3px !important;\n}\n\n\/* ============================================================\n   MOBILE\n   ============================================================ *\/\n\n@media (max-width: 600px) {\n  .aris-form-head,\n  #forminator-module-687 {\n    max-width: 100% !important;\n    padding-right: 16px !important;\n    padding-left: 16px !important;\n  }\n\n  .aris-form-title {\n    font-size: 38px !important;\n  }\n\n  .aris-form-copy {\n    font-size: 15px !important;\n  }\n\n  #forminator-module-687 .forminator-button-submit,\n  #forminator-module-687 button[type=\"submit\"] {\n    width: 100% !important;\n  }\n}\n\n\/* ============================================================\n   REDUCED MOTION\n   ============================================================ *\/\n\n@media (prefers-reduced-motion: reduce) {\n  #forminator-module-687 input,\n  #forminator-module-687 textarea,\n  #forminator-module-687 select,\n  #forminator-module-687 button {\n    transition-duration: 0.001ms !important;\n  }\n}\n<\/style>\n\n<div class=\"aris-form-head\">\n  \n\n  <h2 class=\"aris-form-title\">\n    Javite nam se\n  <\/h2>\n\n  <p class=\"aris-form-copy\">\n    Imate projekt, ideju ili trebate stru\u010dno mi\u0161ljenje? Po\u0161aljite nam osnovne informacije, a mi \u0107emo vam se javiti s jasnim sljede\u0107im koracima.\n  <\/p>\n<\/div>\n\n\n<p><div class=\"forminator-ui forminator-custom-form forminator-custom-form-687   forminator_ajax\" data-forminator-render=\"0\" data-form=\"forminator-module-687\" data-uid=\"6aad05362da73\"><br\/><\/div><form\n\t\t\t\tid=\"forminator-module-687\"\n\t\t\t\tclass=\"forminator-ui forminator-custom-form forminator-custom-form-687   forminator_ajax\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tdata-forminator-render=\"0\"\n\t\t\t\tdata-form-id=\"687\"\n\t\t\t\t data-color-option=\"theme\" data-design=\"none\" data-grid=\"open\" style=\"display: none;\"\n\t\t\t\tdata-uid=\"6aad05362da73\"\n\t\t\t><div role=\"alert\" aria-live=\"polite\" class=\"forminator-response-message forminator-error\" aria-hidden=\"true\"><\/div><div class=\"forminator-row\"><div id=\"name-1\" class=\"forminator-field-name forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-name-1_6aad05362da73\" id=\"forminator-field-name-1_6aad05362da73-label\" class=\"forminator-label\">Ime i prezime <span class=\"forminator-required\">*<\/span><\/label><input type=\"text\" name=\"name-1\" value=\"\" placeholder=\"Unesite ime i prezime\" id=\"forminator-field-name-1_6aad05362da73\" class=\"forminator-input forminator-name--field\" aria-required=\"true\" autocomplete=\"name\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"email-1\" class=\"forminator-field-email forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-email-1_6aad05362da73\" id=\"forminator-field-email-1_6aad05362da73-label\" class=\"forminator-label\">Email <span class=\"forminator-required\">*<\/span><\/label><input type=\"email\" name=\"email-1\" value=\"\" placeholder=\"Unesite email adresu\" id=\"forminator-field-email-1_6aad05362da73\" class=\"forminator-input forminator-email--field\" data-required=\"true\" aria-required=\"true\" autocomplete=\"email\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"phone-1\" class=\"forminator-field-phone forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-phone-1_6aad05362da73\" id=\"forminator-field-phone-1_6aad05362da73-label\" class=\"forminator-label\">Broj telefona<\/label><input type=\"text\" name=\"phone-1\" value=\"\" placeholder=\"Unesite broj telefona\" id=\"forminator-field-phone-1_6aad05362da73\" class=\"forminator-input forminator-field--phone\" data-required=\"\" aria-required=\"false\" autocomplete=\"off\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"text-1\" class=\"forminator-field-text forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-text-1_6aad05362da73\" id=\"forminator-field-text-1_6aad05362da73-label\" class=\"forminator-label\">Ime tvrtke<\/label><input type=\"text\" name=\"text-1\" value=\"\" placeholder=\"Unesite ime tvrtke\" id=\"forminator-field-text-1_6aad05362da73\" class=\"forminator-input forminator-name--field\" data-required=\"\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"textarea-1\" class=\"forminator-field-textarea forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-textarea-1_6aad05362da73\" id=\"forminator-field-textarea-1_6aad05362da73-label\" class=\"forminator-label\">Poruka<\/label><div><span id=\"forminator-field-textarea-1_6aad05362da73-description\" class=\"forminator-description\"><span data-limit=\"180\" data-type=\"characters\" data-editor=\"\">0 \/ 180<\/span><\/span><\/div><textarea name=\"textarea-1\" placeholder=\"Recite nam kako Vam mo\u017eemo pomo\u0107i!\" id=\"forminator-field-textarea-1_6aad05362da73\" class=\"forminator-textarea\" style=\"--forminator-textarea-min-height:140px;\" maxlength=\"180\" ><\/textarea><\/div><\/div><\/div><input type=\"hidden\" name=\"referer_url\" value=\"\" \/><div class=\"forminator-row forminator-row-last\"><div class=\"forminator-col\"><div class=\"forminator-field\"><button class=\"forminator-button forminator-button-submit\">Po&scaron;aljite upit<\/button><\/div><\/div><\/div><input type=\"hidden\" id=\"forminator_nonce\" name=\"forminator_nonce\" value=\"d1e10feb4e\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F640\" \/><input type=\"hidden\" name=\"form_id\" value=\"687\"><input type=\"hidden\" name=\"page_id\" value=\"640\"><input type=\"hidden\" name=\"form_type\" value=\"default\"><input type=\"hidden\" name=\"current_url\" value=\"https:\/\/aris.hr\/\"><input type=\"hidden\" name=\"render_id\" value=\"0\"><input type=\"hidden\" name=\"action\" value=\"forminator_submit_form_custom-forms\"><\/form><\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-c5b0618\" data-v=\"4\" data-block-id=\"c5b0618\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-c5b0618-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-c5b0618-inner-blocks\"><style>\r\n\r\nbody:not(.hl-builder) .aris-contact {\r\n  --ac-ink: #0b0b0c;\r\n  --ac-muted: #8e8e8c;\r\n  --ac-line: rgba(11, 11, 12, 0.11);\r\n  --ac-fill: #f4f4f2;\r\n  --ac-red: #e1211b;\r\n  --ac-open: #17a34a;\r\n  --ac-ease: cubic-bezier(0.22, 1, 0.36, 1);\r\n\r\n  \/* The gutter every other section on the site uses. The panel applies it to\r\n     itself so its right edge lines up with the hero, services, projects and\r\n     about sections above \u2014 set the ROW's own side padding to 0, or this will\r\n     be added on top of it. To hand the spacing back to the row instead, set\r\n     --ac-gutter: 0px. *\/\r\n  --ac-gutter: clamp(20px, 5vw, 82px);\r\n\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: clamp(14px, 1.4vw, 20px);\r\n  width: 100%;\r\n  height: 100%;\r\n  padding-right: var(--ac-gutter);\r\n  color: var(--ac-ink);\r\n  font-family: \"Helvetica Neue\", Helvetica, Arial, system-ui, sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-contact *,\r\nbody:not(.hl-builder) .aris-contact *::before,\r\nbody:not(.hl-builder) .aris-contact *::after { box-sizing: border-box; }\r\n\r\nbody:not(.hl-builder) .aris-contact :focus-visible {\r\n  outline: 2px solid var(--ac-ink);\r\n  outline-offset: 3px;\r\n}\r\n\r\n\/* ---------- The building ---------- *\/\r\n\r\nbody:not(.hl-builder) .ac-photo {\r\n  position: relative;\r\n  flex: 0 0 auto;\r\n  overflow: hidden;\r\n  aspect-ratio: 16 \/ 10;\r\n  margin: 0;\r\n  background: #ececeb;\r\n}\r\n\r\nbody:not(.hl-builder) .ac-photo img {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  object-fit: cover;\r\n  transform: scale(1.06);\r\n  \/* Added grayscale filter to make the image black and white by default *\/\r\n  filter: grayscale(1);\r\n  transition: transform 1.6s var(--ac-ease), filter 1.6s var(--ac-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .aris-contact.is-in .ac-photo img { transform: scale(1); }\r\n\/* On hover, return to full color and scale up slightly *\/\r\nbody:not(.hl-builder) .ac-photo:hover img { transform: scale(1.035); filter: grayscale(0); }\r\n\r\nbody:not(.hl-builder) .ac-photo::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: auto 0 0 0;\r\n  height: 52%;\r\n  pointer-events: none;\r\n  background: linear-gradient(180deg, rgba(6, 8, 11, 0) 0%, rgba(6, 8, 11, 0.52) 100%);\r\n}\r\n\r\n\/* address chip sitting on the photograph *\/\r\nbody:not(.hl-builder) .ac-chip {\r\n  position: absolute;\r\n  left: clamp(12px, 1.2vw, 18px);\r\n  right: clamp(12px, 1.2vw, 18px);\r\n  bottom: clamp(12px, 1.2vw, 18px);\r\n  z-index: 2;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 14px;\r\n  padding: clamp(13px, 1.2vw, 17px) clamp(15px, 1.4vw, 20px);\r\n  border: 1px solid rgba(255, 255, 255, 0.18);\r\n  background: rgba(11, 12, 14, 0.4);\r\n  -webkit-backdrop-filter: blur(18px) saturate(140%);\r\n  backdrop-filter: blur(18px) saturate(140%);\r\n  color: #fff;\r\n  text-decoration: none;\r\n  transition: background 0.5s var(--ac-ease), border-color 0.5s var(--ac-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ac-chip:hover {\r\n  background: rgba(11, 12, 14, 0.58);\r\n  border-color: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\nbody:not(.hl-builder) .ac-chip__label {\r\n  display: block;\r\n  margin-bottom: 5px;\r\n  color: rgba(255, 255, 255, 0.7);\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n}\r\n\r\nbody:not(.hl-builder) .ac-chip__value {\r\n  display: block;\r\n  font-size: clamp(14px, 1.15vw, 17px);\r\n  font-weight: 600;\r\n  letter-spacing: -0.015em;\r\n}\r\n\r\n\/* ---------- Shared rectangular action icon ---------- *\/\r\n\r\nbody:not(.hl-builder) .ac-go {\r\n  flex: 0 0 auto;\r\n  display: grid;\r\n  place-items: center;\r\n  width: clamp(38px, 3vw, 44px);\r\n  height: clamp(38px, 3vw, 44px);\r\n  transition: background 0.55s var(--ac-ease), color 0.55s var(--ac-ease),\r\n              transform 0.6s var(--ac-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ac-go svg {\r\n  width: 17px;\r\n  height: 17px;\r\n  transition: transform 0.6s var(--ac-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ac-chip .ac-go { background: #fff; color: var(--ac-ink); }\r\nbody:not(.hl-builder) .ac-chip:hover .ac-go { background: var(--ac-red); color: #fff; }\r\nbody:not(.hl-builder) .ac-chip:hover .ac-go svg { transform: translate(2px, -2px); }\r\n\r\n\/* ---------- Contact rows ---------- *\/\r\n\r\nbody:not(.hl-builder) .ac-rows {\r\n  flex: 0 0 auto;\r\n  overflow: hidden;\r\n  border: 1px solid var(--ac-line);\r\n  background: #fff;\r\n}\r\n\r\nbody:not(.hl-builder) .ac-row {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 16px;\r\n  width: 100%;\r\n  padding: clamp(17px, 1.7vw, 24px) clamp(18px, 1.8vw, 26px);\r\n  border-bottom: 1px solid var(--ac-line);\r\n  color: inherit;\r\n  font-family: inherit;\r\n  text-align: left;\r\n  text-decoration: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n  transition: background 0.55s var(--ac-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ac-row:last-child { border-bottom: 0; }\r\n\r\n\/* a hairline of brand red grows down the edge of the row being used *\/\r\nbody:not(.hl-builder) .ac-row::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0;\r\n  top: 10px;\r\n  bottom: 10px;\r\n  width: 2px;\r\n  background: var(--ac-red);\r\n  transform: scaleY(0);\r\n  transform-origin: 50% 0;\r\n  transition: transform 0.6s var(--ac-ease);\r\n}\r\n\r\nbody:not(.hl-builder) a.ac-row:hover,\r\nbody:not(.hl-builder) a.ac-row:focus-visible { background: var(--ac-fill); }\r\n\r\nbody:not(.hl-builder) a.ac-row:hover::before,\r\nbody:not(.hl-builder) a.ac-row:focus-visible::before { transform: scaleY(1); }\r\n\r\nbody:not(.hl-builder) .ac-row__text {\r\n  min-width: 0;\r\n  transition: transform 0.6s var(--ac-ease);\r\n}\r\n\r\nbody:not(.hl-builder) a.ac-row:hover .ac-row__text { transform: translateX(4px); }\r\n\r\nbody:not(.hl-builder) .ac-row__label {\r\n  display: block;\r\n  margin-bottom: 7px;\r\n  color: var(--ac-muted);\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n}\r\n\r\nbody:not(.hl-builder) .ac-row__value {\r\n  display: block;\r\n  font-size: clamp(16px, 1.35vw, 20px);\r\n  font-weight: 400;\r\n  letter-spacing: -0.025em;\r\n  line-height: 1.3;\r\n}\r\n\r\nbody:not(.hl-builder) .ac-row__value small {\r\n  display: block;\r\n  margin-top: 5px;\r\n  color: var(--ac-muted);\r\n  font-size: 13px;\r\n  letter-spacing: 0;\r\n}\r\n\r\n\/* the arrow sits quiet, then fills in as the row is used *\/\r\nbody:not(.hl-builder) .ac-row .ac-go {\r\n  background: var(--ac-fill);\r\n  color: var(--ac-muted);\r\n  transform: scale(0.9);\r\n}\r\n\r\nbody:not(.hl-builder) a.ac-row:hover .ac-go,\r\nbody:not(.hl-builder) a.ac-row:focus-visible .ac-go {\r\n  background: var(--ac-ink);\r\n  color: #fff;\r\n  transform: scale(1);\r\n}\r\n\r\nbody:not(.hl-builder) a.ac-row:hover .ac-go svg { transform: translate(2px, -2px); }\r\n\r\n\/* ---------- Open \/ closed ---------- *\/\r\n\r\nbody:not(.hl-builder) .ac-status {\r\n  flex: 0 0 auto;\r\n  display: none;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 7px 13px 7px 11px;\r\n  background: var(--ac-fill);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.1em;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n}\r\n\r\nbody:not(.hl-builder) .ac-status.is-shown { display: inline-flex; }\r\n\r\nbody:not(.hl-builder) .ac-status__dot {\r\n  width: 7px;\r\n  height: 7px;\r\n  background: var(--ac-muted);\r\n}\r\n\r\nbody:not(.hl-builder) .ac-status.is-open .ac-status__dot { background: var(--ac-open); }\r\n\r\n\/* ---------- Map ---------- *\/\r\n\/* Takes any height left over, so this panel can match a taller form beside it. *\/\r\n\r\nbody:not(.hl-builder) .ac-map {\r\n  position: relative;\r\n  flex: 1 1 auto;\r\n  min-height: clamp(200px, 26vh, 300px);\r\n  overflow: hidden;\r\n  border: 1px solid var(--ac-line);\r\n  background: var(--ac-fill);\r\n}\r\n\r\n\/* Absolutely positioned, not height:100%. An iframe is a replaced element:\r\n   when a percentage height has no definite parent height to resolve against\r\n   \u2014 which is the case inside a flex item that sizes itself \u2014 it silently\r\n   falls back to the iframe default of 150px, leaving the rest of the panel\r\n   empty. Pinning it to the box removes the dependency entirely. *\/\r\nbody:not(.hl-builder) .ac-map iframe {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  border: 0;\r\n  \/* desaturated to sit with the photography; colour returns on hover *\/\r\n  filter: grayscale(1) contrast(1.04);\r\n  transition: filter 1.1s var(--ac-ease);\r\n}\r\n\r\nbody:not(.hl-builder) .ac-map:hover iframe { filter: grayscale(0) contrast(1); }\r\n\r\nbody:not(.hl-builder) .ac-map__frame {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 2;\r\n  box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.06);\r\n  pointer-events: none;\r\n}\r\n\r\n\/* ---------- Legal line ---------- *\/\r\n\r\nbody:not(.hl-builder) .ac-meta {\r\n  flex: 0 0 auto;\r\n  color: var(--ac-muted);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.16em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n\/* ---------- Entrance ---------- *\/\r\n\r\nbody:not(.hl-builder) .ac-anim {\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: opacity 0.85s var(--ac-ease) var(--ac-d, 0s),\r\n              transform 1s var(--ac-ease) var(--ac-d, 0s);\r\n  will-change: opacity, transform;\r\n}\r\n\r\nbody:not(.hl-builder) .aris-contact.is-in .ac-anim { opacity: 1; transform: none; }\r\n\r\n\/* ---------- Mobile ---------- *\/\r\n\r\n\/* once the two columns stack, the panel needs the gutter on both sides *\/\r\n@media (max-width: 900px) {\r\n  body:not(.hl-builder) .aris-contact { padding-left: var(--ac-gutter); }\r\n}\r\n\r\n@media (max-width: 700px) {\r\n  body:not(.hl-builder) .ac-photo { aspect-ratio: 4 \/ 3; }\r\n  body:not(.hl-builder) .ac-map { min-height: 240px; }\r\n  body:not(.hl-builder) .ac-row { padding: 17px 18px; }\r\n  \/* no hover on a phone, so the arrow reads as tappable from the start *\/\r\n  body:not(.hl-builder) .ac-row .ac-go { background: var(--ac-ink); color: #fff; transform: scale(1); }\r\n  body:not(.hl-builder) .ac-status { padding: 6px 11px 6px 9px; font-size: 10px; }\r\n}\r\n\r\n\/* ---------- Reduced motion ---------- *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  body:not(.hl-builder) .aris-contact *,\r\n  body:not(.hl-builder) .aris-contact *::before,\r\n  body:not(.hl-builder) .aris-contact *::after {\r\n    transition-duration: 0.001ms !important;\r\n    transition-delay: 0ms !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n  <div class=\"aris-contact\">\r\n\r\n    <!-- The building. Swap the src for the real photograph of the office. -->\r\n    <figure class=\"ac-photo ac-anim\">\r\n      <img src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e9c3f4793a2d512aa51d1.png\" alt=\"Ured Aris d.o.o., Mavra Schlengera 6, Gornji Kneginec\" loading=\"lazy\" decoding=\"async\" \/>\r\n      <a class=\"ac-chip\" href=\"https:\/\/maps.app.goo.gl\/H89DUF7KUwGZCrBo8\" target=\"_blank\" rel=\"noopener\">\r\n        <span>\r\n          <span class=\"ac-chip__label\">Ured<\/span>\r\n          <span class=\"ac-chip__value\">Mavra Schlengera 6, Gornji Kneginec<\/span>\r\n        <\/span>\r\n        <span class=\"ac-go\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M7 7h10v10\"\/><path d=\"M7 17 17 7\"\/><\/svg><\/span>\r\n      <\/a>\r\n    <\/figure>\r\n\r\n    <!-- Tapping these opens the dialler and the mail app. REPLACE both. -->\r\n    <div class=\"ac-rows ac-anim\">\r\n\r\n      <a class=\"ac-row\" href=\"tel:+38542207620\">\r\n        <span class=\"ac-row__text\">\r\n          <span class=\"ac-row__label\">Telefon<\/span>\r\n          <span class=\"ac-row__value\">+385 42 207 620<\/span>\r\n        <\/span>\r\n        <span class=\"ac-go\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M7 7h10v10\"\/><path d=\"M7 17 17 7\"\/><\/svg><\/span>\r\n      <\/a>\r\n\r\n      <a class=\"ac-row\" href=\"mailto:info@aris.hr\">\r\n        <span class=\"ac-row__text\">\r\n          <span class=\"ac-row__label\">E-po\u0161ta<\/span>\r\n          <span class=\"ac-row__value\">info@aris.hr<\/span>\r\n        <\/span>\r\n        <span class=\"ac-go\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M7 7h10v10\"\/><path d=\"M7 17 17 7\"\/><\/svg><\/span>\r\n      <\/a>\r\n\r\n      <div class=\"ac-row\">\r\n        <span class=\"ac-row__text\">\r\n          <span class=\"ac-row__label\">Radno vrijeme<\/span>\r\n          <span class=\"ac-row__value\">Ponedjeljak - petak, 07:00 - 16:00<\/span>\r\n        <\/span>\r\n        <!-- filled in from the current time in Zagreb -->\r\n        <span class=\"ac-status\" data-status>\r\n          <span class=\"ac-status__dot\" aria-hidden=\"true\"><\/span>\r\n          <span class=\"ac-status__text\"><\/span>\r\n        <\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"ac-map ac-anim\">\r\n      <iframe\r\n        src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3667.0160709162037!2d16.36158471249225!3d46.26328467964786!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476601d6e782f62b%3A0xd9198e0c1d4cfa17!2sMavra%20Schlengera%206%2C%2042204%2C%20Gornji%20Kneginec!5e1!3m2!1sen!2shr!4v1788779646981!5m2!1sen!2shr\"\r\n        title=\"Karta \u2014 Mavra Schlengera 6, Gornji Kneginec\"\r\n        loading=\"lazy\"\r\n        referrerpolicy=\"strict-origin-when-cross-origin\"\r\n        allowfullscreen><\/iframe>\r\n      <span class=\"ac-map__frame\" aria-hidden=\"true\"><\/span>\r\n    <\/div>\r\n\r\n    <span class=\"ac-meta ac-anim\">Aris d.o.o. \u00b7 Projektiranje \u00b7 Nadzor \u00b7 Konzalting<\/span>\r\n\r\n  <\/div>\r\n\r\n<script>\r\n\/* =============================================================\r\n   ARIS d.o.o. \u2014 Kontakt, right-hand panel\r\n   ES5 IIFE, no dependencies, builder-guarded.\r\n\r\n   The rows are plain tel: and mailto: links, so the phone and the mail\r\n   app do the work. The only script here reveals the panel on entry and\r\n   marks the office open or closed against the clock in Zagreb \u2014 not the\r\n   reader's own clock, which would be wrong for anyone abroad.\r\n   ============================================================= *\/\r\n(function () {\r\n  \"use strict\";\r\n\r\n  \/* Never run inside the GHL builder canvas. *\/\r\n  if (document.body && document.body.className.indexOf(\"hl-builder\") !== -1) { return; }\r\n\r\n  var OPEN_FROM = 7 * 60;     \/\/ 07:00\r\n  var OPEN_UNTIL = 16 * 60;   \/\/ 16:00\r\n\r\n  function zagrebNow() {\r\n    \/* returns null where the time zone database is unavailable *\/\r\n    try {\r\n      return new Date(new Date().toLocaleString(\"en-US\", { timeZone: \"Europe\/Zagreb\" }));\r\n    } catch (e) {\r\n      return null;\r\n    }\r\n  }\r\n\r\n  function markStatus(root) {\r\n    var badge = root.querySelector(\"[data-status]\");\r\n    if (!badge) { return; }\r\n\r\n    var now = zagrebNow();\r\n    if (!now || isNaN(now.getTime())) { return; }\r\n\r\n    var day = now.getDay();\r\n    var minutes = now.getHours() * 60 + now.getMinutes();\r\n    var open = day >= 1 && day <= 5 && minutes >= OPEN_FROM && minutes < OPEN_UNTIL;\r\n\r\n    badge.querySelector(\".ac-status__text\").textContent = open ? \"Otvoreno\" : \"Zatvoreno\";\r\n    badge.classList.toggle(\"is-open\", open);\r\n    badge.classList.add(\"is-shown\");\r\n  }\r\n\r\n  function init(root) {\r\n    if (!root || root.getAttribute(\"data-ac-init\") === \"1\") { return; }\r\n    root.setAttribute(\"data-ac-init\", \"1\");\r\n\r\n    var steps = root.querySelectorAll(\".ac-anim\");\r\n    var i;\r\n\r\n    for (i = 0; i < steps.length; i++) {\r\n      steps[i].style.setProperty(\"--ac-d\", (0.08 * i).toFixed(2) + \"s\");\r\n    }\r\n\r\n    markStatus(root);\r\n    \/* keep it honest if the page is left open across opening time *\/\r\n    window.setInterval(function () { markStatus(root); }, 60000);\r\n\r\n    function reveal() { root.classList.add(\"is-in\"); }\r\n\r\n    if (window.IntersectionObserver) {\r\n      var observer = new window.IntersectionObserver(function (entries) {\r\n        for (var e = 0; e < entries.length; e++) {\r\n          if (entries[e].isIntersecting) { reveal(); observer.disconnect(); }\r\n        }\r\n      }, { threshold: 0.15 });\r\n      observer.observe(root);\r\n    } else { reveal(); }\r\n  }\r\n\r\n  function boot() {\r\n    var panels = document.querySelectorAll(\".aris-contact\");\r\n    for (var i = 0; i < panels.length; i++) { init(panels[i]); }\r\n  }\r\n\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\"DOMContentLoaded\", boot);\r\n  } else { boot(); }\r\n})();\r\n<\/script>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-797d9d0\" data-block-id=\"797d9d0\"><style>.stk-797d9d0 {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-797d9d0-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-9e1ee72\" data-v=\"4\" data-block-id=\"9e1ee72\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-9e1ee72-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-9e1ee72-inner-blocks\"><style>\r\n\r\nbody:not(.hl-builder) .aris-footer {\r\n  --af-bg: #0a0a0b;\r\n  --af-ink: #ffffff;\r\n  --af-muted: rgba(255,255,255,.46);\r\n  --af-line: rgba(255,255,255,.12);\r\n  --af-red: #e1211b;\r\n\r\n  --af-ease: cubic-bezier(.22,1,.36,1);\r\n\r\n  --af-pad: clamp(20px,5vw,80px);\r\n\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  display: block !important;\r\n\r\n  width: 100% !important;\r\n  max-width: none !important;\r\n\r\n  visibility: visible !important;\r\n  opacity: 1 !important;\r\n\r\n  overflow: hidden;\r\n\r\n  margin: 0 !important;\r\n\r\n  padding:\r\n    clamp(56px,8vw,110px)\r\n    var(--af-pad)\r\n    0;\r\n\r\n  background: var(--af-bg) !important;\r\n  color: var(--af-ink) !important;\r\n\r\n  font-family:\r\n    \"Helvetica Neue\",\r\n    Helvetica,\r\n    Arial,\r\n    system-ui,\r\n    sans-serif !important;\r\n\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n\r\nbody:not(.hl-builder) .aris-footer *,\r\nbody:not(.hl-builder) .aris-footer *::before,\r\nbody:not(.hl-builder) .aris-footer *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer :focus-visible {\r\n  outline: 2px solid #ffffff;\r\n  outline-offset: 3px;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   POINTER REVEAL & GRAYSCALE EFFECT\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-reveal {\r\n  position: absolute;\r\n  inset: 0;\r\n\r\n  z-index: 0;\r\n\r\n  display: block;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  pointer-events: none;\r\n\r\n  -webkit-filter: grayscale(1);\r\n  filter: grayscale(1);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   INNER\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-inner {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   FIRST ROW: CENTERED LOGO\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-top-logo {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  width: 100%;\r\n\r\n  margin-bottom: clamp(40px, 6vw, 80px);\r\n}\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-logo {\r\n  display: block;\r\n\r\n  width: clamp(200px, 20vw, 320px);\r\n  max-width: 100%;\r\n\r\n  height: auto;\r\n\r\n  margin: 0;\r\n\r\n  object-fit: contain;\r\n  object-position: center;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   SECOND ROW: 3 COLUMNS GRID\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-grid {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    1.5fr\r\n    1fr\r\n    1fr;\r\n\r\n  gap: clamp(36px,5vw,80px);\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-col {\r\n  min-width: 0;\r\n\r\n  color: #ffffff !important;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   EYEBROW\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-eyebrow {\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  margin-bottom:\r\n    clamp(20px,2.4vw,34px);\r\n\r\n  color:\r\n    rgba(255,255,255,.46) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    rgba(255,255,255,.46) !important;\r\n\r\n  font-family: inherit !important;\r\n\r\n  font-size:\r\n    clamp(10px,.85vw,12px) !important;\r\n\r\n  font-weight: 600 !important;\r\n\r\n  line-height: 1.2 !important;\r\n\r\n  letter-spacing: .2em !important;\r\n\r\n  text-transform: uppercase !important;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   ADDRESS, EMAIL, PHONE (SHARED IDENTICAL TYPOGRAPHY)\r\n   Force white by default, transition to gray on hover\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-address,\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-small {\r\n  display: block;\r\n\r\n  max-width: 16ch;\r\n\r\n  margin: 0 0 clamp(14px, 1.8vw, 24px);\r\n\r\n  color: #ffffff !important;\r\n\r\n  -webkit-text-fill-color: #ffffff !important;\r\n\r\n  font-family: inherit !important;\r\n\r\n  font-size: clamp(24px, 2.7vw, 42px) !important;\r\n\r\n  font-weight: 500 !important;\r\n\r\n  line-height: 1.16 !important;\r\n\r\n  letter-spacing: -.03em !important;\r\n\r\n  text-transform: none !important;\r\n\r\n  text-decoration: none !important;\r\n\r\n  opacity: 1;\r\n\r\n  transition:\r\n    color 0.4s var(--af-ease),\r\n    -webkit-text-fill-color 0.4s var(--af-ease),\r\n    transform 0.4s var(--af-ease);\r\n}\r\n\r\n\/* Hover effect for text: White to Gray *\/\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-address:hover,\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-small:hover {\r\n  color: #888886 !important;\r\n\r\n  -webkit-text-fill-color: #888886 !important;\r\n\r\n  transform: translateX(4px);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   LINKS\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-links {\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  align-items: flex-start;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-link {\r\n  position: relative;\r\n\r\n  display: inline-block;\r\n\r\n  padding:\r\n    clamp(2px,.3vw,5px)\r\n    0;\r\n\r\n  color: #ffffff !important;\r\n\r\n  -webkit-text-fill-color:\r\n    #ffffff !important;\r\n\r\n  font-family: inherit !important;\r\n\r\n  font-size:\r\n    clamp(22px,2.3vw,36px) !important;\r\n\r\n  font-weight: 500 !important;\r\n\r\n  line-height: 1.24 !important;\r\n\r\n  letter-spacing:\r\n    -.028em !important;\r\n\r\n  text-decoration: none !important;\r\n\r\n  transition:\r\n    transform .6s var(--af-ease),\r\n    opacity .5s var(--af-ease);\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-links:hover\r\n.af-link {\r\n  opacity: .42;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-links\r\n.af-link:hover {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateX(8px);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   BOTTOM\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-bottom {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content:\r\n    space-between;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 18px;\r\n\r\n  margin-top:\r\n    clamp(48px,7vw,96px);\r\n\r\n  padding-top:\r\n    clamp(18px,2vw,26px);\r\n\r\n  border-top:\r\n    1px solid var(--af-line);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   FACEBOOK\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-social {\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 9px;\r\n\r\n  color: #ffffff !important;\r\n\r\n  -webkit-text-fill-color:\r\n    #ffffff !important;\r\n\r\n  font-family: inherit !important;\r\n\r\n  font-size:\r\n    clamp(11px,.95vw,13px) !important;\r\n\r\n  font-weight: 600 !important;\r\n\r\n  line-height: 1.2 !important;\r\n\r\n  letter-spacing: .12em !important;\r\n\r\n  text-transform: uppercase !important;\r\n\r\n  text-decoration: none !important;\r\n\r\n  opacity: .78;\r\n\r\n  transition:\r\n    opacity .4s var(--af-ease);\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-social svg {\r\n  width: 15px;\r\n  height: 15px;\r\n\r\n  fill: currentColor !important;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-social--inline {\r\n  display: none;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-social:hover {\r\n  color: #ffffff !important;\r\n\r\n  -webkit-text-fill-color: #ffffff !important;\r\n\r\n  opacity: 1;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   COPYRIGHT\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-copy {\r\n  color:\r\n    rgba(255,255,255,.46) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    rgba(255,255,255,.46) !important;\r\n\r\n  font-family: inherit !important;\r\n\r\n  font-size:\r\n    clamp(11px,.95vw,13px) !important;\r\n\r\n  font-weight: 400 !important;\r\n\r\n  line-height: 1.4 !important;\r\n\r\n  letter-spacing: .02em !important;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   TWC SIGNATURE\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-sign {\r\n  opacity: .78;\r\n\r\n  transition:\r\n    opacity .4s var(--af-ease);\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-sign:hover {\r\n  opacity: 1;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-sign span {\r\n  color: #ffffff !important;\r\n\r\n  -webkit-text-fill-color:\r\n    #ffffff !important;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   GIANT ARIS WORDMARK\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-wordmark {\r\n  display: block;\r\n\r\n  margin:\r\n    clamp(28px,5vw,70px)\r\n    0\r\n    0;\r\n\r\n  color:\r\n    rgba(255,255,255,.055) !important;\r\n\r\n  -webkit-text-fill-color:\r\n    rgba(255,255,255,.055) !important;\r\n\r\n  font-family: inherit !important;\r\n\r\n  font-size:\r\n    clamp(88px,22.5vw,340px) !important;\r\n\r\n  font-weight: 700 !important;\r\n\r\n  line-height: .76 !important;\r\n\r\n  letter-spacing:\r\n    -.045em !important;\r\n\r\n  text-align: center;\r\n\r\n  text-transform: uppercase;\r\n\r\n  user-select: none;\r\n\r\n  transform:\r\n    translateY(14%);\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   ENTRANCE\r\n   ============================================================= *\/\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer\r\n.af-anim {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(20px);\r\n\r\n  transition:\r\n    opacity\r\n    .85s\r\n    var(--af-ease)\r\n    var(--af-d,0s),\r\n\r\n    transform\r\n    1s\r\n    var(--af-ease)\r\n    var(--af-d,0s);\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer.is-in\r\n.af-anim {\r\n  opacity: 1;\r\n\r\n  transform: none;\r\n}\r\n\r\n\r\nbody:not(.hl-builder)\r\n.aris-footer.is-in\r\n.af-wordmark {\r\n  opacity: 1;\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   TABLET\r\n   ============================================================= *\/\r\n\r\n@media\r\n(max-width:1050px)\r\nand\r\n(min-width:861px) {\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-grid {\r\n    grid-template-columns:\r\n      1.35fr\r\n      1fr\r\n      1fr;\r\n\r\n    gap:\r\n      clamp(26px,4vw,50px);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   MOBILE\r\n   ============================================================= *\/\r\n\r\n@media\r\n(max-width:860px) {\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer {\r\n    --af-mobile-contact-size: clamp(26px,8vw,38px);\r\n\r\n    padding-bottom:\r\n      clamp(22px,6vw,34px);\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-grid {\r\n    grid-template-columns:\r\n      1fr;\r\n\r\n    gap:\r\n      clamp(30px,8vw,44px);\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-top-logo {\r\n    margin-bottom: 24px;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-logo {\r\n    width:\r\n      clamp(190px,55vw,255px);\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-address,\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-small {\r\n    max-width: none;\r\n\r\n    font-size:\r\n      var(--af-mobile-contact-size) !important;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-link {\r\n    font-size:\r\n      clamp(22px,6.4vw,32px) !important;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-inner {\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-grid {\r\n    order: 1;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-wordmark {\r\n    order: 2;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-bottom {\r\n    order: 3;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-wordmark {\r\n    margin:\r\n      clamp(30px,9vw,52px)\r\n      0\r\n      clamp(4px,1.5vw,10px);\r\n\r\n    font-size:\r\n      clamp(64px,25vw,190px) !important;\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-social--inline {\r\n    display: grid;\r\n    place-items: center;\r\n\r\n    width: clamp(58px,17vw,72px);\r\n    height: clamp(48px,14vw,60px);\r\n\r\n    margin-top: 12px;\r\n    padding: 0;\r\n\r\n    gap: 0;\r\n\r\n    border: 1px solid var(--af-line);\r\n    border-radius: 3px;\r\n\r\n    background: rgba(255,255,255,.06);\r\n    color: #ffffff !important;\r\n    -webkit-text-fill-color: #ffffff !important;\r\n\r\n    line-height: 0 !important;\r\n    opacity: 1;\r\n  }\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  a.af-social.af-social--inline svg {\r\n    display: block !important;\r\n\r\n    width: var(--af-mobile-contact-size) !important;\r\n    min-width: var(--af-mobile-contact-size) !important;\r\n    max-width: var(--af-mobile-contact-size) !important;\r\n\r\n    height: var(--af-mobile-contact-size) !important;\r\n    min-height: var(--af-mobile-contact-size) !important;\r\n    max-height: var(--af-mobile-contact-size) !important;\r\n\r\n    flex: 0 0 var(--af-mobile-contact-size) !important;\r\n    transform: none !important;\r\n  }\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-social--inline:hover,\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-social--inline:focus-visible {\r\n    background: rgba(255,255,255,.11);\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-bottom >\r\n  .af-social {\r\n    display: none;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-bottom {\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 12px;\r\n\r\n    margin-top:\r\n      clamp(18px,5vw,28px);\r\n\r\n    text-align: center;\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-copy {\r\n    font-size:\r\n      11px !important;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   SMALL MOBILE\r\n   ============================================================= *\/\r\n\r\n@media\r\n(max-width:400px) {\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-logo {\r\n    width:\r\n      min(220px,70vw);\r\n  }\r\n\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer\r\n  .af-copy {\r\n    font-size:\r\n      10px !important;\r\n\r\n    letter-spacing:\r\n      0 !important;\r\n  }\r\n\r\n\r\n}\r\n\r\n\r\n\/* =============================================================\r\n   REDUCED MOTION\r\n   ============================================================= *\/\r\n\r\n@media\r\n(prefers-reduced-motion:reduce) {\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer *,\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer *::before,\r\n\r\n  body:not(.hl-builder)\r\n  .aris-footer *::after {\r\n    transition-duration:\r\n      .001ms !important;\r\n\r\n    transition-delay:\r\n      0ms !important;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<div\r\n  class=\"aris-footer\"\r\n  role=\"contentinfo\"\r\n  aria-label=\"Podno\u017eje\"\r\n>\r\n\r\n  <svg\r\n    class=\"af-reveal\"\r\n    preserveAspectRatio=\"none\"\r\n    aria-hidden=\"true\"\r\n    focusable=\"false\"\r\n  >\r\n\r\n\r\n    <defs>\r\n\r\n\r\n      <filter\r\n        id=\"afSoft\"\r\n        x=\"-40%\"\r\n        y=\"-40%\"\r\n        width=\"180%\"\r\n        height=\"180%\"\r\n      >\r\n\r\n        <feGaussianBlur\r\n          stdDeviation=\"2.4\"\r\n        \/>\r\n\r\n      <\/filter>\r\n\r\n\r\n\r\n      <mask\r\n        id=\"afMask\"\r\n        maskUnits=\"userSpaceOnUse\"\r\n      >\r\n\r\n\r\n        <rect\r\n          x=\"0\"\r\n          y=\"0\"\r\n          width=\"100%\"\r\n          height=\"100%\"\r\n          fill=\"#000\"\r\n        \/>\r\n\r\n\r\n        <g\r\n          fill=\"#fff\"\r\n          filter=\"url(#afSoft)\"\r\n        >\r\n\r\n\r\n          <!-- TRAIL -->\r\n\r\n          <path\r\n            class=\"af-blob--trail\"\r\n            d=\"M104.1 0.0 L103.1 5.0 L98.9 9.6 L93.9 13.7 L88.9 17.4 L84.7 20.9 L80.1 23.9 L75.4 26.5 L74.9 30.5 L75.4 35.1 L76.0 39.9 L76.1 44.7 L75.1 49.2 L75.5 54.9 L76.6 61.5 L76.7 67.9 L75.4 73.6 L72.6 78.1 L68.8 81.6 L65.2 85.3 L62.0 89.8 L58.3 93.9 L53.9 96.9 L48.9 98.9 L43.5 100.0 L37.9 100.0 L32.4 99.8 L27.2 100.1 L22.3 100.7 L17.2 100.7 L12.2 100.2 L7.3 100.0 L2.5 101.8 L-2.5 103.6 L-7.5 103.6 L-12.3 101.6 L-16.8 98.2 L-21.1 95.3 L-25.3 93.0 L-29.7 91.6 L-33.8 89.1 L-36.4 83.5 L-38.2 77.2 L-39.9 71.7 L-42.4 68.3 L-46.1 66.7 L-51.2 67.0 L-55.7 66.0 L-59.1 63.6 L-62.5 61.0 L-67.1 59.5 L-72.5 58.2 L-77.8 56.5 L-81.6 53.5 L-84.4 49.6 L-88.3 46.4 L-93.5 43.5 L-97.6 39.8 L-99.1 34.9 L-99.5 29.7 L-101.0 24.9 L-103.1 20.2 L-104.1 15.2 L-103.7 10.1 L-102.8 5.0 L-100.8 0.0 L-98.7 -4.8 L-97.6 -9.5 L-98.7 -14.4 L-101.6 -19.9 L-104.1 -25.7 L-106.5 -31.8 L-106.7 -37.5 L-105.3 -42.9 L-103.0 -47.9 L-100.0 -52.5 L-95.9 -56.4 L-90.3 -59.2 L-84.3 -61.2 L-77.3 -62.1 L-70.3 -62.3 L-64.9 -63.4 L-61.5 -66.1 L-59.3 -70.3 L-56.9 -74.5 L-52.9 -76.7 L-47.8 -77.0 L-43.3 -77.8 L-39.9 -80.7 L-36.9 -84.8 L-33.8 -89.0 L-29.9 -92.1 L-25.6 -93.9 L-21.2 -95.7 L-16.6 -97.2 L-11.8 -97.6 L-7.1 -98.1 L-2.4 -99.5 L2.4 -100.5 L7.2 -99.7 L11.9 -97.7 L16.5 -96.5 L21.4 -96.7 L26.4 -96.9 L31.1 -95.7 L35.6 -93.9 L40.1 -92.1 L45.5 -91.9 L50.9 -91.6 L57.5 -92.5 L63.3 -91.8 L68.4 -89.5 L71.8 -85.1 L75.0 -80.6 L78.3 -76.5 L81.5 -72.2 L83.8 -67.3 L85.1 -61.8 L85.5 -56.0 L85.8 -50.5 L86.5 -45.4 L87.6 -40.7 L89.0 -36.2 L90.9 -32.0 L93.1 -27.8 L94.8 -23.4 L95.3 -18.7 L95.8 -14.0 L98.0 -9.5 L101.7 -4.9 Z\"\r\n            transform=\"scale(0)\"\r\n          \/>\r\n\r\n\r\n          <!-- MAIN -->\r\n\r\n          <path\r\n            class=\"af-blob--main\"\r\n            d=\"M106.6 0.0 L107.2 4.5 L107.1 9.0 L106.2 13.4 L104.7 17.7 L102.4 21.8 L99.9 25.6 L97.4 29.4 L94.9 33.0 L92.3 36.5 L89.9 40.0 L88.6 44.0 L87.9 48.3 L86.6 52.4 L84.3 56.0 L82.6 60.0 L81.7 64.8 L80.2 69.3 L77.4 72.7 L73.8 75.4 L69.9 77.7 L65.8 79.5 L61.2 80.7 L56.2 80.9 L51.1 80.6 L46.8 81.0 L43.1 82.4 L39.3 83.5 L35.3 83.9 L31.3 84.1 L27.4 84.5 L23.5 84.3 L19.6 83.7 L15.9 83.3 L12.5 84.4 L9.2 87.3 L5.7 90.7 L2.0 93.3 L-2.0 95.2 L-6.0 95.7 L-10.1 96.0 L-14.2 96.3 L-18.9 98.8 L-23.5 100.0 L-28.0 100.1 L-32.2 99.3 L-36.7 98.7 L-41.0 97.5 L-44.8 95.1 L-48.2 92.1 L-51.3 88.9 L-54.5 85.8 L-57.8 83.2 L-61.3 80.8 L-64.5 78.0 L-67.9 75.4 L-72.0 73.6 L-77.1 72.4 L-82.2 70.9 L-86.3 68.4 L-89.6 65.1 L-92.3 61.3 L-93.7 56.7 L-94.6 52.0 L-95.1 47.2 L-95.3 42.4 L-95.2 37.7 L-96.5 33.6 L-96.0 29.0 L-94.8 24.3 L-94.4 20.1 L-95.6 16.2 L-96.1 12.1 L-95.7 8.0 L-91.6 3.8 L-87.0 0.0 L-83.4 -3.5 L-84.5 -7.1 L-85.9 -10.9 L-87.4 -14.8 L-87.0 -18.5 L-87.1 -22.4 L-88.0 -26.6 L-88.5 -30.8 L-88.1 -34.9 L-87.3 -38.9 L-86.8 -43.1 L-85.4 -46.9 L-81.8 -49.5 L-78.6 -52.2 L-76.2 -55.4 L-73.8 -58.5 L-72.3 -62.4 L-69.6 -65.3 L-66.4 -67.8 L-64.2 -71.3 L-62.3 -75.3 L-60.6 -79.8 L-57.7 -83.0 L-53.8 -84.7 L-50.1 -86.7 L-47.1 -90.2 L-44.5 -94.6 L-41.6 -98.9 L-37.9 -101.9 L-33.6 -103.4 L-29.2 -104.7 L-25.0 -106.6 L-20.8 -109.0 L-16.4 -110.9 L-11.7 -111.5 L-6.9 -110.2 L-2.3 -107.8 L2.2 -105.1 L6.4 -102.3 L10.6 -100.4 L14.7 -99.8 L19.0 -99.4 L22.9 -97.8 L26.5 -95.0 L29.8 -91.6 L33.0 -88.7 L36.5 -86.8 L40.1 -85.1 L42.8 -81.9 L45.4 -78.7 L48.2 -76.0 L50.9 -73.2 L53.0 -69.8 L55.8 -67.5 L58.6 -65.0 L61.0 -62.3 L63.6 -59.7 L66.3 -57.2 L68.5 -54.3 L70.5 -51.2 L72.6 -48.2 L71.9 -43.6 L71.7 -39.4 L72.6 -36.0 L78.1 -34.8 L84.3 -33.4 L91.4 -31.8 L95.5 -28.8 L97.4 -25.0 L98.2 -20.9 L99.2 -16.8 L101.1 -12.8 L103.5 -8.7 L105.4 -4.4 Z\"\r\n            transform=\"scale(0)\"\r\n          \/>\r\n\r\n\r\n        <\/g>\r\n\r\n      <\/mask>\r\n\r\n    <\/defs>\r\n\r\n\r\n\r\n    <image\r\n      href=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e94edbcef8b5f2c22388b.jpg\"\r\n      xlink:href=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9e94edbcef8b5f2c22388b.jpg\"\r\n      x=\"0\"\r\n      y=\"0\"\r\n      width=\"100%\"\r\n      height=\"100%\"\r\n      preserveAspectRatio=\"xMidYMid slice\"\r\n      mask=\"url(#afMask)\"\r\n    \/>\r\n\r\n\r\n    <rect\r\n      class=\"af-shade\"\r\n      x=\"0\"\r\n      y=\"0\"\r\n      width=\"100%\"\r\n      height=\"100%\"\r\n      fill=\"#0a0a0b\"\r\n      opacity=\".4\"\r\n      mask=\"url(#afMask)\"\r\n    \/>\r\n\r\n\r\n  <\/svg>\r\n\r\n\r\n\r\n  <!-- ==========================================================\r\n        CONTENT\r\n        ========================================================== -->\r\n\r\n  <div class=\"af-inner\">\r\n\r\n    <!-- FIRST ROW: CENTERED LOGO -->\r\n    <div class=\"af-top-logo af-anim\">\r\n      <img\r\n        class=\"af-logo\"\r\n        src=\"https:\/\/assets.cdn.filesafe.space\/CjdWtimuEjVqMDWFbh58\/media\/6a9ec5f4a2de8f8e8fbb6e16.webp\"\r\n        alt=\"Aris d.o.o. \u2014 Projektiranje, nadzor i konzalting\"\r\n        loading=\"lazy\"\r\n        decoding=\"async\"\r\n      >\r\n    <\/div>\r\n\r\n\r\n    <!-- SECOND ROW: 3 COLUMNS -->\r\n    <div class=\"af-grid\">\r\n\r\n\r\n      <!-- ======================================================\r\n            CONTACT\r\n            ====================================================== -->\r\n\r\n      <div class=\"af-col af-anim\">\r\n\r\n        <span class=\"af-eyebrow\">\r\n          Kontakt\r\n        <\/span>\r\n\r\n\r\n        <a\r\n          class=\"af-address\"\r\n          href=\"https:\/\/maps.app.goo.gl\/RkFzbjfMSZqKszLq8\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n        >\r\n          Mavra Schlengera 6, Gornji Kneginec\r\n        <\/a>\r\n\r\n\r\n        <a\r\n          class=\"af-small\"\r\n          href=\"mailto:info@aris.hr\"\r\n        >\r\n          info@aris.hr\r\n        <\/a>\r\n\r\n\r\n        <a\r\n          class=\"af-small\"\r\n          href=\"tel:+38542207620\"\r\n        >\r\n          +385 42 207 620\r\n        <\/a>\r\n\r\n\r\n        <!-- MOBILE FACEBOOK -->\r\n\r\n        <a\r\n          class=\"af-social af-social--inline\"\r\n          href=\"https:\/\/www.facebook.com\/arisvarazdin\"\r\n          target=\"_blank\"\r\n          rel=\"noopener\"\r\n          aria-label=\"Facebook\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><\/g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/g><g id=\"SVGRepo_iconCarrier\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6ZM6 4C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H12V13H11C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11H12V9.5C12 7.567 13.567 6 15.5 6H16.1C16.6523 6 17.1 6.44772 17.1 7C17.1 7.55228 16.6523 8 16.1 8H15.5C14.6716 8 14 8.67157 14 9.5V11H16.1C16.6523 11 17.1 11.4477 17.1 12C17.1 12.5523 16.6523 13 16.1 13H14V20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6Z\" fill=\"currentColor\"><\/path> <\/g><\/svg>\r\n\r\n        <\/a>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- ======================================================\r\n            MENU\r\n            ====================================================== -->\r\n\r\n      <nav\r\n        class=\"af-col af-anim\"\r\n        aria-label=\"Izbornik podno\u017eja\"\r\n      >\r\n\r\n\r\n        <span class=\"af-eyebrow\">\r\n          Izbornik\r\n        <\/span>\r\n\r\n\r\n        <div class=\"af-links\">\r\n\r\n          <a\r\n            class=\"af-link\"\r\n            href=\"#\"\r\n          >\r\n            Naslovnica\r\n          <\/a>\r\n\r\n          <a\r\n            class=\"af-link\"\r\n            href=\"#usluge\"\r\n          >\r\n            Usluge\r\n          <\/a>\r\n\r\n          <a\r\n            class=\"af-link\"\r\n            href=\"#projekti\"\r\n          >\r\n            Projekti\r\n          <\/a>\r\n\r\n          <a\r\n            class=\"af-link\"\r\n            href=\"#o-nama\"\r\n          >\r\n            O nama\r\n          <\/a>\r\n\r\n          <a\r\n            class=\"af-link\"\r\n            href=\"#kontakt\"\r\n          >\r\n            Kontakt\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/nav>\r\n\r\n\r\n\r\n      <!-- ======================================================\r\n            LEGAL\r\n            ====================================================== -->\r\n\r\n      <div class=\"af-col af-anim\">\r\n\r\n\r\n        <span class=\"af-eyebrow\">\r\n          Pravni kutak\r\n        <\/span>\r\n\r\n\r\n        <div class=\"af-links\">\r\n\r\n          <a\r\n            class=\"af-link\"\r\n            href=\"#\"\r\n          >\r\n            Politika privatnosti\r\n          <\/a>\r\n\r\n          <a\r\n            class=\"af-link\"\r\n            href=\"#\"\r\n          >\r\n            Uvjeti kori\u0161tenja\r\n          <\/a>\r\n\r\n          <a\r\n            class=\"af-link\"\r\n            href=\"#\"\r\n          >\r\n            Impressum\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ========================================================\r\n          BOTTOM BAR\r\n          ======================================================== -->\r\n\r\n    <div class=\"af-bottom af-anim\">\r\n\r\n\r\n      <a\r\n        class=\"af-social\"\r\n        href=\"https:\/\/www.facebook.com\/arisvarazdin\"\r\n        target=\"_blank\"\r\n        rel=\"noopener\"\r\n      >\r\n\r\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><\/g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/g><g id=\"SVGRepo_iconCarrier\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6ZM6 4C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20H12V13H11C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11H12V9.5C12 7.567 13.567 6 15.5 6H16.1C16.6523 6 17.1 6.44772 17.1 7C17.1 7.55228 16.6523 8 16.1 8H15.5C14.6716 8 14 8.67157 14 9.5V11H16.1C16.6523 11 17.1 11.4477 17.1 12C17.1 12.5523 16.6523 13 16.1 13H14V20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6Z\" fill=\"currentColor\"><\/path> <\/g><\/svg>\r\n\r\n        <span>\r\n          Facebook\r\n        <\/span>\r\n\r\n      <\/a>\r\n\r\n\r\n\r\n      <span class=\"af-copy\">\r\n        \u00a9 2026 Aris d.o.o. Sva prava pridr\u017eana.\r\n      <\/span>\r\n\r\n\r\n\r\n      <a\r\n        class=\"af-sign\"\r\n        href=\"https:\/\/thewhitecloud.eu\/\"\r\n        target=\"_blank\"\r\n        rel=\"noopener\"\r\n        style=\"\r\n          display:flex;\r\n          align-items:center;\r\n          gap:6px;\r\n          text-decoration:none;\r\n          font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n        \"\r\n      >\r\n\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/storage.googleapis.com\/msgsndr\/CjdWtimuEjVqMDWFbh58\/media\/691de84df05eaf3b0720b0f0.png\"\r\n          alt=\"TWC Logo\"\r\n          style=\"\r\n            width:21px;\r\n            height:13px;\r\n            object-fit:contain;\r\n          \"\r\n        >\r\n\r\n        <span\r\n          style=\"\r\n            font-size:12px;\r\n            font-weight:600;\r\n            color:#ffffff;\r\n          \"\r\n        >\r\n          Created by TWC\r\n        <\/span>\r\n\r\n      <\/a>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ========================================================\r\n          LARGE WORDMARK\r\n          ======================================================== -->\r\n\r\n    <span\r\n      class=\"af-wordmark\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      Aris\r\n    <\/span>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<!-- ============================================================\r\n      ORIGINAL ANIMATION SCRIPT\r\n      ============================================================ -->\r\n\r\n<script>\r\n\/* =============================================================\r\n   ARIS d.o.o. \u2014 Footer\r\n   ES5 IIFE, no dependencies, builder-guarded.\r\n\r\n   The photograph sits behind the footer, masked by two torn-edged shapes\r\n   that chase the pointer with different amounts of lag. The trailing shape\r\n   is what makes a moving cursor tear a wider, living hole rather than drag\r\n   a rigid circle. On touch, the same shapes follow the finger and close\r\n   again a moment after it lifts.\r\n   ============================================================= *\/\r\n\r\n(function () {\r\n  \"use strict\";\r\n\r\n  \/* Never run inside the GHL builder canvas. *\/\r\n  if (\r\n    document.body &&\r\n    document.body.className.indexOf(\"hl-builder\") !== -1\r\n  ) {\r\n    return;\r\n  }\r\n\r\n  var FOLLOW = 0.055;\r\n  var TRAIL = 0.028;\r\n  var GROW = 0.042;\r\n  var SPIN = 0.0014;\r\n  var TOUCH_HOLD = 1100;\r\n\r\n  var reduced =\r\n    window.matchMedia &&\r\n    window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n\r\n\r\n  function init(root) {\r\n\r\n    if (\r\n      !root ||\r\n      root.getAttribute(\"data-af-init\") === \"1\"\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    root.setAttribute(\r\n      \"data-af-init\",\r\n      \"1\"\r\n    );\r\n\r\n\r\n    var svg =\r\n      root.querySelector(\".af-reveal\");\r\n\r\n    var image =\r\n      root.querySelector(\".af-reveal image\");\r\n\r\n    var shade =\r\n      root.querySelector(\".af-reveal .af-shade\");\r\n\r\n    var main =\r\n      root.querySelector(\".af-blob--main\");\r\n\r\n    var trail =\r\n      root.querySelector(\".af-blob--trail\");\r\n\r\n    var steps =\r\n      root.querySelectorAll(\".af-anim\");\r\n\r\n    var i;\r\n\r\n\r\n    for (\r\n      i = 0;\r\n      i < steps.length;\r\n      i++\r\n    ) {\r\n\r\n      steps[i].style.setProperty(\r\n        \"--af-d\",\r\n        (0.07 * i).toFixed(2) + \"s\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (\r\n      window.IntersectionObserver\r\n    ) {\r\n\r\n      var once =\r\n        new window.IntersectionObserver(\r\n          function (entries) {\r\n\r\n            for (\r\n              var e = 0;\r\n              e < entries.length;\r\n              e++\r\n            ) {\r\n\r\n              if (\r\n                entries[e].isIntersecting\r\n              ) {\r\n\r\n                root.classList.add(\r\n                  \"is-in\"\r\n                );\r\n\r\n                once.disconnect();\r\n\r\n              }\r\n\r\n            }\r\n\r\n          },\r\n          {\r\n            threshold: 0.1\r\n          }\r\n        );\r\n\r\n      once.observe(root);\r\n\r\n    } else {\r\n\r\n      root.classList.add(\r\n        \"is-in\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    if (\r\n      !svg ||\r\n      !main ||\r\n      !trail ||\r\n      reduced\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    var w = 0;\r\n    var h = 0;\r\n    var radius = 0;\r\n\r\n    var tx = 0;\r\n    var ty = 0;\r\n\r\n    var mx = 0;\r\n    var my = 0;\r\n\r\n    var sx = 0;\r\n    var sy = 0;\r\n\r\n    var open = 0;\r\n    var want = 0;\r\n\r\n    var spin = 0;\r\n\r\n    var running = false;\r\n\r\n    var visible = false;\r\n\r\n    var release;\r\n\r\n\r\n    function measure() {\r\n\r\n      var rect =\r\n        root.getBoundingClientRect();\r\n\r\n      w =\r\n        Math.round(\r\n          rect.width\r\n        );\r\n\r\n      h =\r\n        Math.round(\r\n          rect.height\r\n        );\r\n\r\n      if (\r\n        !w ||\r\n        !h\r\n      ) {\r\n        return;\r\n      }\r\n\r\n\r\n      svg.setAttribute(\r\n        \"viewBox\",\r\n        \"0 0 \" + w + \" \" + h\r\n      );\r\n\r\n\r\n      if (image) {\r\n\r\n        image.setAttribute(\r\n          \"width\",\r\n          w\r\n        );\r\n\r\n        image.setAttribute(\r\n          \"height\",\r\n          h\r\n        );\r\n\r\n      }\r\n\r\n\r\n      if (shade) {\r\n\r\n        shade.setAttribute(\r\n          \"width\",\r\n          w\r\n        );\r\n\r\n        shade.setAttribute(\r\n          \"height\",\r\n          h\r\n        );\r\n\r\n      }\r\n\r\n\r\n      radius =\r\n        Math.max(\r\n          120,\r\n          Math.min(\r\n            w * 0.105,\r\n            215\r\n          )\r\n        ) \/ 100;\r\n\r\n\r\n      if (\r\n        window.innerWidth < 700\r\n      ) {\r\n\r\n        radius =\r\n          Math.max(\r\n            96,\r\n            w * 0.27\r\n          ) \/ 100;\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    function frame() {\r\n\r\n      mx +=\r\n        (tx - mx) *\r\n        FOLLOW;\r\n\r\n      my +=\r\n        (ty - my) *\r\n        FOLLOW;\r\n\r\n      sx +=\r\n        (tx - sx) *\r\n        TRAIL;\r\n\r\n      sy +=\r\n        (ty - sy) *\r\n        TRAIL;\r\n\r\n      open +=\r\n        (want - open) *\r\n        GROW;\r\n\r\n      spin +=\r\n        SPIN;\r\n\r\n\r\n      if (\r\n        open < 0.002 &&\r\n        want === 0\r\n      ) {\r\n\r\n        open = 0;\r\n\r\n        running = false;\r\n\r\n        svg.style.opacity =\r\n          \"0\";\r\n\r\n      } else {\r\n\r\n        svg.style.opacity =\r\n          \"1\";\r\n\r\n      }\r\n\r\n\r\n      main.setAttribute(\r\n        \"transform\",\r\n\r\n        \"translate(\" +\r\n        mx.toFixed(1) +\r\n        \" \" +\r\n        my.toFixed(1) +\r\n        \") \" +\r\n\r\n        \"rotate(\" +\r\n        (spin * 12).toFixed(2) +\r\n        \") \" +\r\n\r\n        \"scale(\" +\r\n        (radius * open).toFixed(4) +\r\n        \")\"\r\n      );\r\n\r\n\r\n      trail.setAttribute(\r\n        \"transform\",\r\n\r\n        \"translate(\" +\r\n        sx.toFixed(1) +\r\n        \" \" +\r\n        sy.toFixed(1) +\r\n        \") \" +\r\n\r\n        \"rotate(\" +\r\n        (-spin * 19).toFixed(2) +\r\n        \") \" +\r\n\r\n        \"scale(\" +\r\n        (radius * open * 0.72).toFixed(4) +\r\n        \")\"\r\n      );\r\n\r\n\r\n      if (running) {\r\n\r\n        window.requestAnimationFrame(\r\n          frame\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    function play() {\r\n\r\n      if (running) {\r\n        return;\r\n      }\r\n\r\n      running =\r\n        true;\r\n\r\n      window.requestAnimationFrame(\r\n        frame\r\n      );\r\n\r\n    }\r\n\r\n\r\n    function at(\r\n      clientX,\r\n      clientY,\r\n      jump\r\n    ) {\r\n\r\n      var rect =\r\n        root.getBoundingClientRect();\r\n\r\n      tx =\r\n        clientX -\r\n        rect.left;\r\n\r\n      ty =\r\n        clientY -\r\n        rect.top;\r\n\r\n\r\n      if (jump) {\r\n\r\n        mx = tx;\r\n        my = ty;\r\n\r\n        sx = tx;\r\n        sy = ty;\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* pointer *\/\r\n\r\n    root.addEventListener(\r\n      \"mouseenter\",\r\n      function (event) {\r\n\r\n        if (!visible) {\r\n          return;\r\n        }\r\n\r\n        at(\r\n          event.clientX,\r\n          event.clientY,\r\n          true\r\n        );\r\n\r\n        want = 1;\r\n\r\n        play();\r\n\r\n      }\r\n    );\r\n\r\n\r\n    root.addEventListener(\r\n      \"mousemove\",\r\n      function (event) {\r\n\r\n        if (!visible) {\r\n          return;\r\n        }\r\n\r\n        at(\r\n          event.clientX,\r\n          event.clientY,\r\n          false\r\n        );\r\n\r\n        want = 1;\r\n\r\n        play();\r\n\r\n      }\r\n    );\r\n\r\n\r\n    root.addEventListener(\r\n      \"mouseleave\",\r\n      function () {\r\n\r\n        want = 0;\r\n\r\n        play();\r\n\r\n      }\r\n    );\r\n\r\n\r\n    \/* touch *\/\r\n\r\n    function touch(event) {\r\n\r\n      var point =\r\n        event.touches &&\r\n        event.touches[0];\r\n\r\n      if (!point) {\r\n        return;\r\n      }\r\n\r\n\r\n      window.clearTimeout(\r\n        release\r\n      );\r\n\r\n\r\n      at(\r\n        point.clientX,\r\n        point.clientY,\r\n        want === 0\r\n      );\r\n\r\n\r\n      want = 1;\r\n\r\n      play();\r\n\r\n    }\r\n\r\n\r\n    root.addEventListener(\r\n      \"touchstart\",\r\n      touch,\r\n      {\r\n        passive: true\r\n      }\r\n    );\r\n\r\n\r\n    root.addEventListener(\r\n      \"touchmove\",\r\n      touch,\r\n      {\r\n        passive: true\r\n      }\r\n    );\r\n\r\n\r\n    root.addEventListener(\r\n      \"touchend\",\r\n      function () {\r\n\r\n        window.clearTimeout(\r\n          release\r\n        );\r\n\r\n        release =\r\n          window.setTimeout(\r\n            function () {\r\n\r\n              want = 0;\r\n\r\n              play();\r\n\r\n            },\r\n            TOUCH_HOLD\r\n          );\r\n\r\n      },\r\n      {\r\n        passive: true\r\n      }\r\n    );\r\n\r\n\r\n    \/* viewport *\/\r\n\r\n    if (\r\n      window.IntersectionObserver\r\n    ) {\r\n\r\n      var live =\r\n        new window.IntersectionObserver(\r\n          function (entries) {\r\n\r\n            for (\r\n              var e = 0;\r\n              e < entries.length;\r\n              e++\r\n            ) {\r\n\r\n              visible =\r\n                entries[e].isIntersecting;\r\n\r\n            }\r\n\r\n\r\n            if (!visible) {\r\n\r\n              want = 0;\r\n\r\n              play();\r\n\r\n            }\r\n\r\n          },\r\n          {\r\n            rootMargin:\r\n              \"10% 0px 10% 0px\"\r\n          }\r\n        );\r\n\r\n\r\n      live.observe(root);\r\n\r\n    } else {\r\n\r\n      visible =\r\n        true;\r\n\r\n    }\r\n\r\n\r\n    var resizeTimer;\r\n\r\n\r\n    window.addEventListener(\r\n      \"resize\",\r\n      function () {\r\n\r\n        window.clearTimeout(\r\n          resizeTimer\r\n        );\r\n\r\n        resizeTimer =\r\n          window.setTimeout(\r\n            measure,\r\n            140\r\n          );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    measure();\r\n\r\n    svg.style.opacity =\r\n      \"0\";\r\n\r\n  }\r\n\r\n\r\n  function boot() {\r\n\r\n    var footers =\r\n      document.querySelectorAll(\r\n        \".aris-footer\"\r\n      );\r\n\r\n\r\n    for (\r\n      var i = 0;\r\n      i < footers.length;\r\n      i++\r\n    ) {\r\n\r\n      init(\r\n        footers[i]\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  if (\r\n    document.readyState ===\r\n    \"loading\"\r\n  ) {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      boot\r\n    );\r\n\r\n  } else {\r\n\r\n    boot();\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-b843ca4\" data-block-id=\"b843ca4\"><style>.stk-b843ca4 {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-b843ca4-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-9e73a36\" data-v=\"4\" data-block-id=\"9e73a36\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-9e73a36-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-9e73a36-inner-blocks\">\n<!-- PREMIUM SMOOTH SCROLL \u2014 LENIS -->\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/lenis@1.3.26\/dist\/lenis.css\">\n\n<script src=\"https:\/\/unpkg.com\/lenis@1.3.26\/dist\/lenis.min.js\"><\/script>\n\n<script>\n(function () {\n  function initializePremiumScroll() {\n    \/* Prevent duplicate initialization *\/\n    if (window.blagusLenis || typeof Lenis === \"undefined\") return;\n\n    window.blagusLenis = new Lenis({\n      autoRaf: true,\n      autoToggle: true,\n\n      \/* Premium but still responsive *\/\n      duration: 1.25,\n\n      easing: function (t) {\n        return Math.min(1, 1.001 - Math.pow(2, -10 * t));\n      },\n\n      smoothWheel: true,\n      wheelMultiplier: 0.9,\n\n      \/* Keep natural mobile scrolling *\/\n    syncTouch: true,\ntouchMultiplier: 0.8,\nsyncTouchLerp: 0.075,\ntouchInertiaExponent: 1.7,\n\n      \/* Supports menus, popups and scrollable elements *\/\n      allowNestedScroll: true,\n\n      \/* Smooth navigation to section anchors *\/\n      anchors: true,\n\n      \/* Stops leftover movement after opening another page *\/\n      stopInertiaOnNavigate: true,\n\n      \/* Accessibility *\/\n      respectReducedMotion: true\n    });\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initializePremiumScroll\n    );\n  } else {\n    initializePremiumScroll();\n  }\n})();\n<\/script>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Javite nam se Imate projekt, ideju ili trebate stru\u010dno mi\u0161ljenje? Po\u0161aljite nam osnovne informacije, a mi \u0107emo vam se javiti s jasnim sljede\u0107im koracima.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-640","page","type-page","status-publish","hentry"],"blocksy_meta":{"page_title_panel":"","has_hero_section":"disabled","4c99f9e3e087d19663bd649ab6780b1c":"","hero_section":"type-1","hero_elements":[{"id":"custom_title","enabled":true,"heading_tag":"h1","title":"Home"},{"id":"custom_description","enabled":true,"description_visibility":{"desktop":true,"tablet":true,"mobile":false}},{"id":"custom_meta","enabled":false,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"updated_date","enabled":false,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":false,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true}},{"id":"breadcrumbs","enabled":false}],"df58fd8e1d1cbd5818f029fb418db3dd":"","hero_alignment1":"CT_CSS_SKIP_RULE","hero_margin":40,"hero_alignment2":"center","hero_vertical_alignment":"center","4f7465e4064dc7aa0beefa56d6e2c076":"","hero_structure":"narrow","767489143f2631bd3e3fa3bc1d63e533":"","page_title_bg_type":"featured_image","custom_hero_background":{"attachment_id":null},"page_title_image_size":"full","parallax":{"desktop":false,"tablet":false,"mobile":false},"642790cc9d0af3668d8083baf82f7995":"","hero_height":"250px","pageTitleFont":{"family":"Default","variation":"Default","size":"30px","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageTitleFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageMetaFont":{"family":"Default","variation":"n6","size":"12px","line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_font_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_background_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"breadcrumbsFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"breadcrumbsFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"initial":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"pageTitleBackground":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--theme-palette-color-6)"}}},"pageTitlePadding":{"top":"50px","bottom":"50px","left":"auto","right":"auto","linked":true},"3b8bca013b84ae5f1a376ecc38b20887":"","page_structure_type":"default","cf59e697dd47e76f37f8cbe80dd70c60":"","content_style_source":"inherit","content_style":"wide","vertical_spacing_source":"custom","content_area_spacing":"none","background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"content_background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--theme-palette-color-8)"}}},"content_boxed_shadow":{"inherit":false,"blur":18,"spread":-6,"v_offset":12,"h_offset":0,"inset":false,"enable":true,"color":{"color":"rgba(34, 56, 101, 0.04)"}},"content_boxed_border":{"width":1,"style":"none","color":{"color":"rgba(44,62,80,0.2)"}},"content_boxed_radius":{"top":"3px","bottom":"3px","left":"3px","right":"3px","linked":true},"boxed_content_spacing":{"desktop":{"top":"40px","bottom":"40px","left":"40px","right":"40px","linked":true},"tablet":{"top":"35px","bottom":"35px","left":"35px","right":"35px","linked":true},"mobile":{"top":"20px","bottom":"20px","left":"20px","right":"20px","linked":true}},"93639a98137cf3da4a3377b3f873e5c3":"","disable_featured_image":"no","disable_share_box":"no","disable_header":"no","disable_footer":"no","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"_links":{"self":[{"href":"https:\/\/aris.hr\/index.php?rest_route=\/wp\/v2\/pages\/640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aris.hr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aris.hr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aris.hr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aris.hr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=640"}],"version-history":[{"count":39,"href":"https:\/\/aris.hr\/index.php?rest_route=\/wp\/v2\/pages\/640\/revisions"}],"predecessor-version":[{"id":726,"href":"https:\/\/aris.hr\/index.php?rest_route=\/wp\/v2\/pages\/640\/revisions\/726"}],"wp:attachment":[{"href":"https:\/\/aris.hr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}