{"id":17,"date":"2026-02-19T17:39:23","date_gmt":"2026-02-19T17:39:23","guid":{"rendered":"https:\/\/weblab-studio.com\/home\/"},"modified":"2026-10-02T12:32:23","modified_gmt":"2026-10-02T12:32:23","slug":"home","status":"publish","type":"page","link":"https:\/\/weblab-studio.com\/hr\/","title":{"rendered":"Po\u010detna"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"17\" class=\"elementor elementor-17\">\n\t\t\t\t<div class=\"elementor-element elementor-element-740aa77 e-flex e-con-boxed e-con e-parent\" data-id=\"740aa77\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-69050ae e-con-full e-flex e-con e-child\" data-id=\"69050ae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ecf782 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"5ecf782\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;slideInLeft&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Launch Your <span style=\"color:#ff771e\">Digital<\/span> Success<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8932080 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"8932080\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;slideInLeft&quot;,&quot;_animation_delay&quot;:0}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Websites \u2022 Mobile Apps \u2022 eCommerce \u2022 Booking Systems<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-177dca5 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"177dca5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;,&quot;animation_delay&quot;:700}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b879cef e-transform elementor-widget elementor-widget-button\" data-id=\"b879cef\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_scale_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.1,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#quotehome\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"far fa-arrow-alt-circle-right\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">GET FREE QUOTE<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div data-eael_duration=\"{&quot;transitionDuration&quot;:1000}\" data-eael_easing=\"{&quot;transitionEasing&quot;:&quot;ease&quot;}\" data-eael_scale_hover_effect=\"{&quot;scale_x&quot;:1.1,&quot;scale_y&quot;:1.1}\" data-eael_hover_duration=\"{&quot;transitionDuration&quot;:1000}\" data-eael_hover_easing=\"{&quot;transitionEasing&quot;:&quot;ease&quot;}\" class=\"eael_hover_effect elementor-element elementor-element-b989faf e-transform e-transform elementor-widget elementor-widget-button\" data-id=\"b989faf\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;,&quot;_animation_delay&quot;:50,&quot;eael_hover_effect_transform_hover_popover&quot;:&quot;yes&quot;,&quot;_transform_scale_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.1,&quot;sizes&quot;:[]},&quot;eael_hover_effect_general_settings_easing&quot;:&quot;ease&quot;,&quot;eael_hover_effect_general_settings_hover_easing&quot;:&quot;ease&quot;,&quot;_transform_scale_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#homesolutions\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-desktop\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">VIEW SOLUTIONS<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-58854ce e-con-full e-flex e-con e-parent\" data-id=\"58854ce\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c7df88 elementor-widget__width-inherit elementor-widget-mobile__width-inherit elementor-widget elementor-widget-html\" data-id=\"8c7df88\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"floating-icons-section\">\n  <div class=\"floating-icons-track\">\n\n    <div class=\"floating-icons-loop\">\n\n      <!-- ORIGINAL SET -->\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/shopify.svg\" alt=\"Shopify\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/wordpress.svg\" alt=\"Wordpress\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/googleplay.svg\" alt=\"Googleplay\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/apple.svg\" alt=\"Apple\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/pwa.svg\" alt=\"Pwa\" title=\"Home\">\n\n      <!-- CLONE (ZA INFINITE LOOP) -->\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/shopify.svg\" alt=\"Shopify\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/wordpress.svg\" alt=\"Wordpress\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/googleplay.svg\" alt=\"Googleplay\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/apple.svg\" alt=\"Apple\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/pwa.svg\" alt=\"Pwa\" title=\"Home\">\n         <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/shopify.svg\" alt=\"Shopify\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/wordpress.svg\" alt=\"Wordpress\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/googleplay.svg\" alt=\"Googleplay\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/apple.svg\" alt=\"Apple\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/pwa.svg\" alt=\"Pwa\" title=\"Home\">\n         <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/shopify.svg\" alt=\"Shopify\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/wordpress.svg\" alt=\"Wordpress\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/googleplay.svg\" alt=\"Googleplay\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/apple.svg\" alt=\"Apple\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/pwa.svg\" alt=\"Pwa\" title=\"Home\">\n         <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/shopify.svg\" alt=\"Shopify\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/wordpress.svg\" alt=\"Wordpress\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/googleplay.svg\" alt=\"Googleplay\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/apple.svg\" alt=\"Apple\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/pwa.svg\" alt=\"Pwa\" title=\"Home\">\n         <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/shopify.svg\" alt=\"Shopify\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/wordpress.svg\" alt=\"Wordpress\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/googleplay.svg\" alt=\"Googleplay\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/apple.svg\" alt=\"Apple\" title=\"Home\">\n      <img decoding=\"async\" class=\"icon\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/simple-icons@v10\/icons\/pwa.svg\" alt=\"Pwa\" title=\"Home\">\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n\n\/* SECTION *\/\n.floating-icons-section{\n  width:100%;\n  padding:50px 0;\n  background:transparent;\n  overflow:hidden;\n}\n\n\/* TRACK *\/\n.floating-icons-track{\n  overflow:hidden;\n}\n\n\/* LOOP \u2014 KLJU\u010cNA STVAR *\/\n.floating-icons-loop{\n  display:flex;\n  width:max-content;          \/* \u2190 FIX *\/\n  gap:170px;                   \/* razmaknutije *\/\n  animation: infiniteScroll 150s linear infinite; \/* sporije *\/\n}\n\n\/* ICON *\/\n.icon{\n  width:34px;\n  height:34px;\n  flex-shrink:1;\n  filter:invert(1);\n  opacity:.9;\n  transition:.3s ease;\n}\n\n.icon:hover{\n  transform:scale(1.15);\n  opacity:1;\n}\n\n\/* PERFECT LOOP *\/\n@keyframes infiniteScroll{\n  from { transform:translateX(0); }\n  to   { transform:translateX(calc(-50%)); }\n}\n\n\/* MOBILE *\/\n@media(max-width:600px){\n  .floating-icons-loop{ gap:55px; }\n  .icon{ width:26px; height:26px; }\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d314097 e-flex e-con-boxed e-con e-parent\" data-id=\"d314097\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4589b4f elementor-widget elementor-widget-html\" data-id=\"4589b4f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================================\r\n     WebLab Studio \u2014 Centered 3D Carousel (Minimalist Orange Nav & Close)\r\n     ========================================================================= -->\r\n\r\n<div id=\"weblab-3d-wrapper\">\r\n  <section class=\"weblab-hero-section\">\r\n    <!-- Pozadinski sjaj u sredini -->\r\n    <div class=\"weblab-ambient-glow\"><\/div>\r\n\r\n    <!-- SREDINA: 3D ROTIRAJU\u0106I STAGE -->\r\n    <div id=\"weblab-stage\" role=\"region\" aria-label=\"3D Portfolio Carousel\">\r\n      <div id=\"weblab-world\">\r\n        <div id=\"weblab-orb\">\r\n          <!-- Portfolio kartice se dinami\u010dki generiraju putem JS-a -->\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- UPUTA ZADR\u017dANA ISPOD -->\r\n    <div class=\"weblab-hint\">\r\n      <span class=\"weblab-hint-dot\"><\/span>\r\n      <span>Drag or swipe to rotate 3D portfolio<\/span>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- CAROUSEL MODAL -->\r\n  <div id=\"weblab-carousel-modal\" class=\"weblab-modal-backdrop\" onclick=\"weblabCloseGallery()\">\r\n    <!-- SUPTILNI \"X\" BEZ POZADINE, S MINIMALNOM SIVOM SJENOM NA IKONI -->\r\n    <button class=\"weblab-modal-close\" onclick=\"weblabCloseGallery()\" aria-label=\"Close\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line>\r\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line>\r\n      <\/svg>\r\n    <\/button>\r\n\r\n    <div class=\"weblab-modal-box\" onclick=\"event.stopPropagation()\">\r\n      <div class=\"weblab-modal-viewer\">\r\n        <img id=\"weblab-modal-main-img\" src=\"\" alt=\"Project Photo\" decoding=\"async\" \/>\r\n        \r\n        <!-- SUPTILNE CHEVRON STRELICE BEZ POZADINE, S MINIMALNOM SIVOM SJENOM NA IKONI -->\r\n        <button class=\"weblab-nav-arrow weblab-arrow-left\" onclick=\"weblabPrevPhoto()\" aria-label=\"Previous\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n          <\/svg>\r\n        <\/button>\r\n        <button class=\"weblab-nav-arrow weblab-arrow-right\" onclick=\"weblabNextPhoto()\" aria-label=\"Next\">\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n          <\/svg>\r\n        <\/button>\r\n\r\n        <div class=\"weblab-photo-counter\" id=\"weblab-counter\">1 \/ 5<\/div>\r\n      <\/div>\r\n      <div class=\"weblab-thumbs-bar\" id=\"weblab-thumbs\"><\/div>\r\n      <div class=\"weblab-modal-bottom\">\r\n        <div>\r\n          <div class=\"weblab-project-sub\" id=\"weblab-proj-sub\">Category<\/div>\r\n          <h2 class=\"weblab-project-title\" id=\"weblab-proj-title\">Project Title<\/h2>\r\n        <\/div>\r\n        <div class=\"weblab-modal-actions\">\r\n          <a id=\"weblab-proj-link\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"weblab-btn weblab-btn-visit\">\r\n            <span id=\"weblab-proj-link-text\">Visit Website<\/span>\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width:14px;height:14px;margin-left:6px;\">\r\n              <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3\"\/>\r\n            <\/svg>\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- =========================================================================\r\n     STILOVI (CSS)\r\n     ========================================================================= -->\r\n<style>\r\n  #weblab-3d-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 550px;\r\n    background: #07090e;\r\n    color: #f4f2ef;\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n    overflow: hidden;\r\n    box-sizing: border-box;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n  #weblab-3d-wrapper * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .weblab-hero-section {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 550px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 40px 20px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .weblab-ambient-glow {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 500px;\r\n    height: 500px;\r\n    background: radial-gradient(circle, rgba(67,83,179,0.25) 0%, rgba(255,107,0,0.15) 45%, transparent 70%);\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    filter: blur(60px);\r\n  }\r\n\r\n  \/* 3D STAGE *\/\r\n  #weblab-stage {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 1000px;\r\n    height: 480px;\r\n    z-index: 10;\r\n    overflow: hidden;\r\n    perspective: 1100px;\r\n    perspective-origin: 50% 50%;\r\n    pointer-events: auto;\r\n    cursor: grab;\r\n    touch-action: pan-y;\r\n  }\r\n  #weblab-stage:active {\r\n    cursor: grabbing;\r\n  }\r\n\r\n  #weblab-world {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 0;\r\n    height: 0;\r\n    transform-style: preserve-3d;\r\n    will-change: transform;\r\n  }\r\n\r\n  #weblab-orb {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 0;\r\n    height: 0;\r\n    transform-style: preserve-3d;\r\n  }\r\n\r\n  .weblab-card {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    transform-style: preserve-3d;\r\n    cursor: pointer;\r\n    will-change: transform, opacity;\r\n  }\r\n\r\n  .weblab-card figure {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    background: #0d121d;\r\n    border: 1px solid rgba(255,255,255,0.14);\r\n    box-shadow: 0 16px 40px rgba(0,0,0,0.8);\r\n    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;\r\n  }\r\n\r\n  .weblab-card:hover figure {\r\n    transform: scale(1.05);\r\n    border-color: #ff6b00;\r\n    box-shadow: 0 20px 60px rgba(0,0,0,0.95), 0 0 30px rgba(255,107,0,0.4);\r\n  }\r\n\r\n  .weblab-card figure img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    user-select: none;\r\n    -webkit-user-drag: none;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .weblab-card figure::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: rgba(7,9,14, var(--d, 0));\r\n    border-radius: 16px;\r\n    pointer-events: none;\r\n    transition: background 0.2s linear;\r\n  }\r\n\r\n  \/* UPUTA *\/\r\n  .weblab-hint {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    margin-top: 16px;\r\n    font-size: 13px;\r\n    color: rgba(255,255,255,0.55);\r\n    z-index: 20;\r\n    letter-spacing: 0.3px;\r\n  }\r\n  .weblab-hint-dot {\r\n    width: 7px;\r\n    height: 7px;\r\n    border-radius: 50%;\r\n    background: #4cc9f0;\r\n    box-shadow: 0 0 8px #4cc9f0;\r\n  }\r\n\r\n  \/* MODAL *\/\r\n  .weblab-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    height: 44px;\r\n    padding: 0 22px;\r\n    border-radius: 999px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    cursor: pointer;\r\n    border: none;\r\n    outline: none;\r\n    transition: all 0.3s cubic-bezier(0.2,0.8,0.2,1);\r\n    text-decoration: none;\r\n    white-space: nowrap;\r\n    font-family: inherit;\r\n  }\r\n  .weblab-btn-visit {\r\n    background: #ff6b00;\r\n    color: #ffffff;\r\n  }\r\n  .weblab-btn-visit:hover {\r\n    background: #ff7d1f;\r\n    transform: translateY(-2px);\r\n  }\r\n\r\n  .weblab-modal-backdrop {\r\n    display: none;\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 99999;\r\n    background: rgba(0,0,0,0.92);\r\n    backdrop-filter: blur(14px);\r\n    overflow-y: auto;\r\n    padding: 20px;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  \/* SUPTILAN \"X\" BEZ POZADINE \u2014 S MINIMALNOM SIVOM SJENOM NA SAMOJ IKONI *\/\r\n  .weblab-modal-close {\r\n    position: fixed;\r\n    top: 24px;\r\n    right: 24px;\r\n    z-index: 100000;\r\n    width: 40px;\r\n    height: 40px;\r\n    background: none !important;\r\n    border: none !important;\r\n    box-shadow: none !important;\r\n    color: #ff6b00;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    padding: 0;\r\n    transition: transform 0.25s ease;\r\n  }\r\n  .weblab-modal-close svg {\r\n    width: 30px;\r\n    height: 30px;\r\n    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));\r\n  }\r\n  .weblab-modal-close:hover {\r\n    color: #ff6b00;\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .weblab-modal-box {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 900px;\r\n    margin: auto;\r\n    background: #0a0e17;\r\n    border: 1px solid rgba(255,255,255,0.15);\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    box-shadow: 0 30px 90px rgba(0,0,0,0.95);\r\n  }\r\n\r\n  .weblab-modal-viewer {\r\n    position: relative;\r\n    width: 100%;\r\n    aspect-ratio: 16 \/ 9.5;\r\n    background: #04060a;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .weblab-modal-viewer img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n  }\r\n\r\n  \/* SUPTILNE CHEVRON STRELICE BEZ POZADINE \u2014 S MINIMALNOM SIVOM SJENOM NA IKONI *\/\r\n  .weblab-nav-arrow {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    width: 48px;\r\n    height: 48px;\r\n    background: none !important;\r\n    border: none !important;\r\n    box-shadow: none !important;\r\n    color: #ff6b00;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    padding: 0;\r\n    transition: transform 0.25s ease;\r\n  }\r\n  .weblab-nav-arrow svg {\r\n    width: 36px;\r\n    height: 36px;\r\n    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));\r\n  }\r\n  .weblab-arrow-left { \r\n    left: 12px; \r\n  }\r\n  .weblab-arrow-left:hover {\r\n    color: #ff6b00;\r\n    transform: translateY(-50%) scale(1.1);\r\n  }\r\n  .weblab-arrow-right { \r\n    right: 12px; \r\n  }\r\n  .weblab-arrow-right:hover {\r\n    color: #ff6b00;\r\n    transform: translateY(-50%) scale(1.1);\r\n  }\r\n\r\n  .weblab-photo-counter {\r\n    position: absolute;\r\n    top: 16px;\r\n    left: 16px;\r\n    padding: 6px 14px;\r\n    border-radius: 999px;\r\n    background: rgba(0,0,0,0.7);\r\n    border: 1px solid rgba(255,255,255,0.15);\r\n    font-size: 12px;\r\n    font-family: monospace;\r\n    color: #fff;\r\n  }\r\n\r\n  .weblab-thumbs-bar {\r\n    display: flex;\r\n    gap: 10px;\r\n    padding: 10px 16px;\r\n    background: #060910;\r\n    border-top: 1px solid rgba(255,255,255,0.08);\r\n    border-bottom: 1px solid rgba(255,255,255,0.08);\r\n    overflow-x: auto;\r\n  }\r\n  .weblab-thumb-item {\r\n    flex-shrink: 0;\r\n    width: 65px;\r\n    height: 42px;\r\n    border-radius: 6px;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(255,255,255,0.15);\r\n    cursor: pointer;\r\n    opacity: 0.5;\r\n    transition: 0.2s;\r\n  }\r\n  \/* TANAK NARAN\u010cASTI OBRUB NA ODABRANOJ SLICI *\/\r\n  .weblab-thumb-item.active {\r\n    border: 1px solid #ff6b00;\r\n    opacity: 1;\r\n    transform: scale(1.05);\r\n  }\r\n  .weblab-thumb-item img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n  }\r\n\r\n  .weblab-modal-bottom {\r\n    padding: 20px 24px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n  }\r\n  .weblab-project-sub {\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    color: #4cc9f0;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    margin-bottom: 2px;\r\n  }\r\n  .weblab-project-title {\r\n    font-size: clamp(20px, 2.5vw, 28px);\r\n    font-weight: 800;\r\n    color: #ffffff;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* RESPONSIVE DESIGN *\/\r\n  @media (max-width: 1023px) {\r\n    #weblab-3d-wrapper, .weblab-hero-section {\r\n      min-height: 460px;\r\n    }\r\n    .weblab-hero-section {\r\n      padding: 30px 10px;\r\n    }\r\n    #weblab-stage {\r\n      height: 380px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    #weblab-3d-wrapper, .weblab-hero-section {\r\n      min-height: 380px;\r\n    }\r\n    .weblab-hero-section {\r\n      padding: 20px 5px;\r\n    }\r\n    #weblab-stage {\r\n      height: 300px;\r\n    }\r\n    .weblab-ambient-glow {\r\n      width: 320px;\r\n      height: 320px;\r\n    }\r\n    .weblab-modal-bottom {\r\n      flex-direction: column;\r\n      align-items: flex-start;\r\n    }\r\n    .weblab-modal-actions, .weblab-btn-visit {\r\n      width: 100%;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- =========================================================================\r\n     JAVASCRIPT LOGIKA\r\n     ========================================================================= -->\r\n<script>\r\n(function() {\r\n  var projectsData = [\r\n    {\r\n      id: 'villa',\r\n      title: 'Villa Piedra',\r\n      subtitle: 'Luxury Villa \u2022 Holiday Rental',\r\n      websiteUrl: 'https:\/\/www.villapiedra.eu',\r\n      websiteBtnText: 'Visit Website',\r\n      floatingImage: '\/wp-content\/uploads\/2026\/04\/VillaPiedra.png',\r\n      gallery: [\r\n        '\/wp-content\/uploads\/2026\/04\/VillaPiedra.png',\r\n        '\/wp-content\/uploads\/2026\/04\/VillaPiedra2.png',\r\n        '\/wp-content\/uploads\/2026\/04\/VillaPiedra3.png',\r\n        '\/wp-content\/uploads\/2026\/04\/VillaPiedra4.png',\r\n        '\/wp-content\/uploads\/2026\/04\/VillaPiedra5.png'\r\n      ]\r\n    },\r\n    {\r\n      id: 'julie',\r\n      title: 'Juli\u00e9 Jewellery Store',\r\n      subtitle: 'E-Commerce \u2022 Jewelry Store',\r\n      websiteUrl: 'https:\/\/www.juliejewellery.store\/',\r\n      websiteBtnText: 'Visit Web Shop',\r\n      floatingImage: 'https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-02-14.11.24.png',\r\n      gallery: [\r\n        'https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-02-14.11.24.png',\r\n        '\/wp-content\/uploads\/2026\/04\/Julie2.png',\r\n        '\/wp-content\/uploads\/2026\/04\/Julie3.png',\r\n        '\/wp-content\/uploads\/2026\/04\/Julie4.png',\r\n        '\/wp-content\/uploads\/2026\/04\/Julie5.png',\r\n        '\/wp-content\/uploads\/2026\/04\/Julie6.png'\r\n      ]\r\n    },\r\n    {\r\n      id: 'honua',\r\n      title: 'Honua Jewellery',\r\n      subtitle: 'E-Commerce \u2022 Jewelry Store',\r\n      websiteUrl: 'https:\/\/honuajewellerycroatia.com\/',\r\n      websiteBtnText: 'Visit Web Shop',\r\n      floatingImage: 'https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-02-14.11.50.png',\r\n      gallery: [\r\n        'https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-02-14.11.50.png',\r\n        'https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-02-14.12.04.png',\r\n        'https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-02-14.12.11.png',\r\n        'https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-02-14.12.44.png'\r\n      ]\r\n    },\r\n    {\r\n      id: 'leart',\r\n      title: \"Le'art ceramic\",\r\n      subtitle: 'E-Commerce \u2022 Handmade Ceramic',\r\n      websiteUrl: 'https:\/\/www.leartceramic.com',\r\n      websiteBtnText: 'Visit Website',\r\n      floatingImage: '\/wp-content\/uploads\/2026\/06\/Snimka-zaslona-2026-06-11-172954.png',\r\n      gallery: [\r\n        '\/wp-content\/uploads\/2026\/06\/Snimka-zaslona-2026-06-11-172954.png',\r\n        '\/wp-content\/uploads\/2026\/06\/Snimka-zaslona-2026-06-11-173014.png',\r\n        '\/wp-content\/uploads\/2026\/06\/Snimka-zaslona-2026-06-11-173033.png',\r\n        '\/wp-content\/uploads\/2026\/06\/Snimka-zaslona-2026-06-11-173048.png'\r\n      ]\r\n    },\r\n    {\r\n      id: 'ink',\r\n      title: 'Ink & Needle',\r\n      subtitle: 'Tattoo Studio \u2022 Portfolio',\r\n      websiteUrl: 'https:\/\/ink-and-needle.netlify.app\/',\r\n      websiteBtnText: 'Visit Website',\r\n      floatingImage: '\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.00.05.png',\r\n      gallery: [\r\n        '\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.00.05.png',\r\n        '\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.00.27.png',\r\n        '\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.00.39.png',\r\n        '\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.01.02.png',\r\n        '\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.00.17.png'\r\n      ]\r\n    }\r\n  ];\r\n\r\n  var stage = document.getElementById('weblab-stage');\r\n  var world = document.getElementById('weblab-world');\r\n  var orb = document.getElementById('weblab-orb');\r\n\r\n  var cardElements = [];\r\n  var stepAngle = 360 \/ projectsData.length;\r\n  var cardAngles = projectsData.map(function(_, i) { return i * stepAngle; });\r\n\r\n  var state = {\r\n    spin: 0,\r\n    tilt: -6,\r\n    dragX: 0,\r\n    dragY: 0,\r\n    velX: 0,\r\n    velY: 0,\r\n    isDragging: false,\r\n    lastX: 0,\r\n    lastY: 0,\r\n    downX: 0,\r\n    downY: 0,\r\n    downTargetIdx: -1,\r\n    radius: 300,\r\n    cardW: 320,\r\n    isHovered: false\r\n  };\r\n\r\n  orb.innerHTML = '';\r\n  projectsData.forEach(function(proj, idx) {\r\n    var card = document.createElement('div');\r\n    card.className = 'weblab-card weblab-card-' + idx;\r\n    card.setAttribute('data-idx', idx);\r\n    card.innerHTML = \r\n      '<figure class=\"weblab-card-figure\">' +\r\n        '<img src=\"' + proj.floatingImage + '\" alt=\"' + proj.title + '\" loading=\"eager\" decoding=\"async\" \/>' +\r\n      '<\/figure>';\r\n    orb.appendChild(card);\r\n    cardElements.push(card);\r\n  });\r\n\r\n  function updateLayout() {\r\n    var width = window.innerWidth;\r\n    var R = 320;\r\n    var cw = 300;\r\n\r\n    if (width <= 480) {\r\n      R = 160;\r\n      cw = 175;\r\n    } else if (width <= 768) {\r\n      R = 210;\r\n      cw = 220;\r\n    } else if (width <= 1023) {\r\n      R = 270;\r\n      cw = 260;\r\n    } else {\r\n      R = 320;\r\n      cw = 300;\r\n    }\r\n\r\n    state.radius = R;\r\n    state.cardW = cw;\r\n\r\n    var cardH = Math.round(cw * 0.625);\r\n    var marginL = -cw \/ 2;\r\n    var marginT = -cardH \/ 2;\r\n\r\n    cardElements.forEach(function(cardEl, i) {\r\n      var angle = cardAngles[i];\r\n      cardEl.style.width = cw + 'px';\r\n      cardEl.style.height = cardH + 'px';\r\n      cardEl.style.marginLeft = marginL + 'px';\r\n      cardEl.style.marginTop = marginT + 'px';\r\n\r\n      var rad = (angle * Math.PI) \/ 180;\r\n      var px = Math.sin(rad) * R;\r\n      var pz = Math.cos(rad) * R;\r\n\r\n      cardEl.style.transform = 'translate3d(' + px + 'px, 0px, ' + pz + 'px) rotateY(' + angle + 'deg)';\r\n    });\r\n  }\r\n\r\n  updateLayout();\r\n  window.addEventListener('resize', updateLayout);\r\n\r\n  function tick() {\r\n    if (!state.isDragging) {\r\n      var speed = state.isHovered ? 0.08 : 0.32;\r\n      state.spin += speed;\r\n\r\n      state.dragX += state.velX;\r\n      state.dragY += state.velY;\r\n      state.velX *= 0.94;\r\n      state.velY *= 0.94;\r\n\r\n      if (Math.abs(state.velX) < 0.002) state.velX = 0;\r\n      if (Math.abs(state.velY) < 0.002) state.velY = 0;\r\n\r\n      if (state.tilt + state.dragY > 20) { state.dragY = 20 - state.tilt; state.velY = 0; }\r\n      if (state.tilt + state.dragY < -20) { state.dragY = -20 - state.tilt; state.velY = 0; }\r\n    }\r\n\r\n    var sx = state.tilt + state.dragY;\r\n    var sy = state.spin + state.dragX;\r\n\r\n    world.style.transform = 'rotateY(' + sy + 'deg) rotateX(' + sx + 'deg)';\r\n\r\n    cardElements.forEach(function(cardEl, i) {\r\n      var totalAngle = (cardAngles[i] + sy) % 360;\r\n      var rad = (totalAngle * Math.PI) \/ 180;\r\n      var zf = Math.cos(rad);\r\n      var depthNorm = (zf + 1) \/ 2;\r\n\r\n      var dim = (1 - depthNorm) * 0.58;\r\n      var opacity = 0.45 + 0.55 * depthNorm;\r\n      var zIndex = Math.round(10 + depthNorm * 20);\r\n\r\n      cardEl.style.setProperty('--d', dim.toFixed(3));\r\n      cardEl.style.opacity = opacity.toFixed(3);\r\n      cardEl.style.zIndex = zIndex;\r\n    });\r\n\r\n    requestAnimationFrame(tick);\r\n  }\r\n  requestAnimationFrame(tick);\r\n\r\n  stage.addEventListener('pointerdown', function(e) {\r\n    state.isDragging = true;\r\n    state.lastX = e.clientX;\r\n    state.lastY = e.clientY;\r\n    state.downX = e.clientX;\r\n    state.downY = e.clientY;\r\n    state.velX = 0;\r\n    state.velY = 0;\r\n\r\n    var card = e.target.closest('.weblab-card');\r\n    state.downTargetIdx = card ? parseInt(card.getAttribute('data-idx'), 10) : -1;\r\n  });\r\n\r\n  window.addEventListener('pointermove', function(e) {\r\n    if (!state.isDragging) return;\r\n    var dx = e.clientX - state.lastX;\r\n    var dy = e.clientY - state.lastY;\r\n\r\n    var dSpin = dx * 0.18;\r\n    var dTilt = dy * 0.07;\r\n\r\n    state.dragX += dSpin;\r\n    state.dragY += dTilt;\r\n    state.velX = dSpin;\r\n    state.velY = dTilt;\r\n\r\n    if (state.tilt + state.dragY > 20) state.dragY = 20 - state.tilt;\r\n    if (state.tilt + state.dragY < -20) state.dragY = -20 - state.tilt;\r\n\r\n    state.lastX = e.clientX;\r\n    state.lastY = e.clientY;\r\n  });\r\n\r\n  window.addEventListener('pointerup', function(e) {\r\n    if (!state.isDragging) return;\r\n    state.isDragging = false;\r\n\r\n    var dist = Math.hypot(e.clientX - state.downX, e.clientY - state.downY);\r\n    if (dist < 10 && state.downTargetIdx >= 0) {\r\n      weblabOpenGalleryByIdx(state.downTargetIdx);\r\n    }\r\n  });\r\n\r\n  stage.addEventListener('mouseenter', function() { state.isHovered = true; });\r\n  stage.addEventListener('mouseleave', function() { state.isHovered = false; });\r\n\r\n  var currentProject = null;\r\n  var currentPhotoIdx = 0;\r\n\r\n  window.weblabOpenGalleryByIdx = function(idx) {\r\n    var proj = projectsData[idx];\r\n    if (!proj) return;\r\n    currentProject = proj;\r\n    currentPhotoIdx = 0;\r\n\r\n    document.getElementById('weblab-proj-title').innerText = proj.title;\r\n    document.getElementById('weblab-proj-sub').innerText = proj.subtitle;\r\n    document.getElementById('weblab-proj-link').href = proj.websiteUrl;\r\n    document.getElementById('weblab-proj-link-text').innerText = proj.websiteBtnText || 'Visit Website';\r\n\r\n    var thumbs = document.getElementById('weblab-thumbs');\r\n    thumbs.innerHTML = '';\r\n    proj.gallery.forEach(function(src, i) {\r\n      var item = document.createElement('div');\r\n      item.className = 'weblab-thumb-item' + (i === 0 ? ' active' : '');\r\n      item.innerHTML = '<img src=\"' + src + '\" alt=\"Thumb\" decoding=\"async\" \/>';\r\n      item.onclick = function() { weblabSetPhoto(i); };\r\n      thumbs.appendChild(item);\r\n    });\r\n\r\n    weblabUpdatePhotoViewer();\r\n    var modal = document.getElementById('weblab-carousel-modal');\r\n    modal.style.display = 'flex';\r\n    document.body.style.overflow = 'hidden';\r\n  };\r\n\r\n  window.weblabCloseGallery = function() {\r\n    var modal = document.getElementById('weblab-carousel-modal');\r\n    modal.style.display = 'none';\r\n    document.body.style.overflow = 'auto';\r\n  };\r\n\r\n  window.weblabSetPhoto = function(idx) {\r\n    if (!currentProject) return;\r\n    currentPhotoIdx = idx;\r\n    weblabUpdatePhotoViewer();\r\n  };\r\n\r\n  window.weblabPrevPhoto = function() {\r\n    if (!currentProject) return;\r\n    currentPhotoIdx = currentPhotoIdx === 0 ? currentProject.gallery.length - 1 : currentPhotoIdx - 1;\r\n    weblabUpdatePhotoViewer();\r\n  };\r\n\r\n  window.weblabNextPhoto = function() {\r\n    if (!currentProject) return;\r\n    currentPhotoIdx = currentPhotoIdx === currentProject.gallery.length - 1 ? 0 : currentPhotoIdx + 1;\r\n    weblabUpdatePhotoViewer();\r\n  };\r\n\r\n  function weblabUpdatePhotoViewer() {\r\n    if (!currentProject) return;\r\n    document.getElementById('weblab-modal-main-img').src = currentProject.gallery[currentPhotoIdx];\r\n    document.getElementById('weblab-counter').innerText = (currentPhotoIdx + 1) + ' \/ ' + currentProject.gallery.length;\r\n\r\n    var items = document.querySelectorAll('.weblab-thumb-item');\r\n    items.forEach(function(item, i) {\r\n      if (i === currentPhotoIdx) item.classList.add('active');\r\n      else item.classList.remove('active');\r\n    });\r\n  }\r\n\r\n  window.addEventListener('keydown', function(e) {\r\n    if (e.key === 'Escape') {\r\n      weblabCloseGallery();\r\n    } else if (e.key === 'ArrowLeft') {\r\n      weblabPrevPhoto();\r\n    } else if (e.key === 'ArrowRight') {\r\n      weblabNextPhoto();\r\n    }\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b37b95 e-flex e-con-boxed e-con e-parent\" data-id=\"1b37b95\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a673e8 elementor-widget elementor-widget-html\" data-id=\"4a673e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"hr\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;700;800;900&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        * { margin: 0; padding: 0; box-sizing: border-box; }\r\n        body { background: #050910; font-family: 'Inter', sans-serif; overflow-x: hidden; color: white; }\r\n\r\n        .digital-funnel {\r\n            width: 100%;\r\n            background: linear-gradient(to bottom, #050910, #1a2b4c);\r\n            padding: 100px 20px;\r\n            display: flex;\r\n            justify-content: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .funnel-wrapper {\r\n            max-width: 600px;\r\n            width: 100%;\r\n            text-align: center;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 80px;\r\n            position: relative;\r\n            z-index: 1; \/* Wrapper je iznad linije *\/\r\n        }\r\n\r\n        \/* LINIJA - sada kre\u0107e ni\u017ee (top: 250px) da ne sije\u010de naslov *\/\r\n        .funnel-line-bg {\r\n            position: absolute;\r\n            top: 250px; \r\n            bottom: 100px;\r\n            width: 2px;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            z-index: 0; \/* Linija je u pozadini *\/\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n        }\r\n\r\n        .funnel-line-progress {\r\n            width: 100%;\r\n            height: 0%; \r\n            background: #4cc9f0;\r\n            box-shadow: 0 0 15px #4cc9f0;\r\n            transition: height 0.15s ease-out;\r\n        }\r\n\r\n        .funnel-title { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; position: relative; z-index: 2; line-height: 1.1; margin-bottom: 20px; }\r\n        .funnel-title span { color: #FF771E; }\r\n\r\n        .funnel-box {\r\n            background: rgba(255, 255, 255, 0.04);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            padding: 35px;\r\n            border-radius: 24px;\r\n            backdrop-filter: blur(12px);\r\n            -webkit-backdrop-filter: blur(12px);\r\n            width: 100%;\r\n            position: relative;\r\n            z-index: 2; \/* Kartice su iznad linije *\/\r\n        }\r\n\r\n        .funnel-box h3 { font-size: 24px; margin-bottom: 12px; color: #4cc9f0; }\r\n        .funnel-box p { color: rgba(255,255,255,0.8); line-height: 1.6; }\r\n\r\n        .phone {\r\n            width: 240px; height: 440px; border-radius: 40px;\r\n            background: #000; padding: 12px; border: 6px solid #1a2b4c;\r\n            box-shadow: 0 30px 60px rgba(0,0,0,0.5); position: relative; z-index: 2;\r\n            animation: float 4s ease-in-out infinite;\r\n        }\r\n        .phone-screen {\r\n            background: #ffffff; height: 100%; width: 100%;\r\n            border-radius: 30px; overflow: hidden; display: flex;\r\n            align-items: center; justify-content: center;\r\n        }\r\n        .phone-content { text-align: center; display: flex; flex-direction: column; align-items: center; color: #1a2b4c; }\r\n        .phone-logo { font-weight: 900; font-size: 24px; line-height: 1.1; margin-bottom: 10px; }\r\n        .phone-logo span { color: #f77f31; }\r\n        .phone-btn { margin-top: 20px; background: #1a2b4c; color: white; border: none; padding: 12px 24px; border-radius: 10px; font-weight: 700; font-size: 11px; }\r\n\r\n        .solutions { \r\n            display: grid; \r\n            grid-template-columns: repeat(2, 1fr); \r\n            gap: 15px; \r\n            width: 100%; \r\n            position: relative;\r\n            z-index: 2; \/* Gumbi su iznad linije *\/\r\n        }\r\n        \r\n        .solution { \r\n            background: rgba(76, 201, 240, 0.05); \/* Prozirno da se vidi linija \"ispod\" *\/\r\n            border: 1px solid rgba(76, 201, 240, 0.2); \r\n            padding: 18px; \r\n            border-radius: 15px; \r\n            font-weight: 700; \r\n            text-align: center;\r\n            text-decoration: none;\r\n            color: white; \r\n            transition: all 0.3s ease;\r\n            display: block;\r\n            cursor: pointer;\r\n            backdrop-filter: blur(5px);\r\n            -webkit-backdrop-filter: blur(5px);\r\n        }\r\n\r\n        .solution:hover {\r\n            background: rgba(255, 119, 30, 0.1) !important;\r\n            transform: translateY(-3px);\r\n            border-color: #FF771E !important;\r\n            color: #FF771E !important;\r\n        }\r\n\r\n        .solution.clicked-active {\r\n            color: #FF771E !important;\r\n            border-color: #FF771E !important;\r\n            background: rgba(255, 119, 30, 0.2) !important;\r\n        }\r\n\r\n        .benefits li { \r\n            margin: 0 0 14px 0; font-size: 16px; display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; text-align: left;\r\n        }\r\n        .benefits li::before { content: '\u2713'; color: #4cc9f0; font-weight: 900; font-size: 18px; }\r\n\r\n        .cta-main { background: #f77f31; color: white; border: none; padding: 20px 50px; border-radius: 18px; font-weight: 800; cursor: pointer; transition: 0.3s; position: relative; z-index: 2; }\r\n        \r\n        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }\r\n\r\n        @media (max-width: 768px) {\r\n            .solutions { grid-template-columns: 1fr; }\r\n            .funnel-line-bg { top: 200px; } \/* Prilagodba za mobitel *\/\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"digital-funnel\">\r\n    <div class=\"funnel-line-bg\">\r\n        <div class=\"funnel-line-progress\" id=\"funnel-progress\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"funnel-wrapper\">\r\n        <h2 class=\"funnel-title\">Turn <span>Your Business<\/span> into a Digital Experience<\/h2>\r\n\r\n        <div class=\"funnel-box\">\r\n            <h3>Presence<\/h3>\r\n            <p>Being online is no longer optional. It's where your customers are.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"funnel-box\">\r\n            <h3>Growth<\/h3>\r\n            <p>Automate processes and build a professional brand experience.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"phone\">\r\n            <div class=\"phone-screen\">\r\n                <div class=\"phone-content\">\r\n                    <div class=\"phone-logo\">WebLab<br><span>STUDIO<\/span><\/div>\r\n                    <button class=\"phone-btn\">GET STARTED<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"solutions\">\r\n            <a id=\"funnel-apps\" class=\"solution\">\ud83d\udcf1 Mobile App<\/a>\r\n            <a id=\"funnel-ecommerce\" class=\"solution\">\ud83d\uded2 Web Shop<\/a>\r\n            <a id=\"funnel-websites\" class=\"solution\">\ud83c\udf10 Website<\/a>\r\n            <a id=\"funnel-booking\" class=\"solution\">\ud83d\udcc5 Booking System<\/a>\r\n        <\/div>\r\n\r\n        <div class=\"funnel-box benefits\">\r\n            <h3>How This Helps Your Business?<\/h3>\r\n            <ul style=\"list-style:none; padding:0; margin-top:20px; max-width:320px; margin:auto;\">\r\n                <li>More visibility & clients<\/li>\r\n                <li>Automated processes<\/li>\r\n                <li>Online payments & bookings<\/li>\r\n                <li>Building brand identity<\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <a href=\"#quotehome\" style=\"text-decoration: none;\">\r\n            <button class=\"cta-main\">GET A FREE QUOTE<\/button>\r\n        <\/a>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    function updateFunnelLine() {\r\n        const funnelSection = document.querySelector('.digital-funnel');\r\n        const progressBar = document.getElementById('funnel-progress');\r\n        if (!funnelSection || !progressBar) return;\r\n        const rect = funnelSection.getBoundingClientRect();\r\n        const windowHeight = window.innerHeight;\r\n        let progress = (windowHeight - rect.top) \/ (rect.height + windowHeight \/ 2) * 100;\r\n        let finalValue = (progress - 10) * 1.2; \r\n        if (finalValue < 0) finalValue = 0;\r\n        if (finalValue > 100) finalValue = 100;\r\n        progressBar.style.height = finalValue + '%';\r\n    }\r\n\r\n    function setupSolutions() {\r\n        const isHR = document.documentElement.lang === 'hr';\r\n        const base = \"https:\/\/weblab-studio.com\/\";\r\n        const prefix = isHR ? \"hr\/\" : \"\";\r\n        const linksMap = {\r\n            'funnel-apps': 'mobile-apps\/',\r\n            'funnel-websites': 'websites\/',\r\n            'funnel-ecommerce': 'ecommerce\/',\r\n            'funnel-booking': 'booking-systems\/'\r\n        };\r\n        const solutionLinks = document.querySelectorAll('.solution');\r\n        solutionLinks.forEach(link => {\r\n            const path = linksMap[link.id];\r\n            if (path) link.href = base + prefix + path;\r\n            link.addEventListener('click', function() {\r\n                solutionLinks.forEach(l => l.classList.remove('clicked-active'));\r\n                this.classList.add('clicked-active');\r\n            });\r\n        });\r\n    }\r\n\r\n    window.addEventListener('scroll', updateFunnelLine);\r\n    window.addEventListener('resize', updateFunnelLine);\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        updateFunnelLine();\r\n        setupSolutions();\r\n    });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9515d13 e-flex e-con-boxed e-con e-parent\" data-id=\"9515d13\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9452390 elementor-widget elementor-widget-heading\" data-id=\"9452390\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Launching your <span style=\"color:#ff771e\">online business<\/span>  has never been easier<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7845314 e-con-full e-flex e-con e-parent\" data-id=\"7845314\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb7cdc9 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"eb7cdc9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"timeline-section\">\n  <div class=\"timeline-wrapper\">\n    <div class=\"timeline-grid\">\n\n      <div class=\"timeline-line\">\n        <div class=\"timeline-progress\" id=\"progress-line\"><\/div>\n      <\/div>\n\n      <div class=\"timeline-card\">\n        <div class=\"timeline-icon icon-blue\">\n          <svg width=\"26\" height=\"26\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"><\/path>\n          <\/svg>\n        <\/div>\n        <div class=\"timeline-title\">Consultations<\/div>\n        <div class=\"timeline-desc\">We analyse your business goals and identify the best digital solution.<\/div>\n      <\/div>\n\n      <div class=\"timeline-card\">\n        <div class=\"timeline-icon icon-purple\">\n          <svg width=\"26\" height=\"26\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"><\/line>\n            <line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"><\/line>\n            <line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"><\/line>\n          <\/svg>\n        <\/div>\n        <div class=\"timeline-title\">Structure & Strategy<\/div>\n        <div class=\"timeline-desc\">We plan user flows, platform structure and define optimal strategy.<\/div>\n      <\/div>\n\n      <div class=\"timeline-card\">\n        <div class=\"timeline-icon icon-teal\">\n          <svg width=\"26\" height=\"26\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <polyline points=\"16 18 22 12 16 6\"><\/polyline>\n            <polyline points=\"8 6 2 12 8 18\"><\/polyline>\n          <\/svg>\n        <\/div>\n        <div class=\"timeline-title\">Design & Development<\/div>\n        <div class=\"timeline-desc\">Your platform is designed and built with performance in mind.<\/div>\n      <\/div>\n\n      <div class=\"timeline-card\">\n        <div class=\"timeline-icon icon-orange\">\n          <svg width=\"26\" height=\"26\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"><\/path>\n            <path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"><\/path>\n          <\/svg>\n        <\/div>\n        <div class=\"timeline-title\">Launching & Support<\/div>\n        <div class=\"timeline-desc\">We launch your project and provide ongoing support and updates.<\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n.timeline-section {\n    padding: 100px 0;\n    \/* NOVA POZADINA S GRADACIJOM OD GORE PREMA DOLJE *\/\n    background: linear-gradient(to bottom, #1a2b4c, #050910);\n}\n\n.timeline-grid {\n    max-width: 1400px;\n    margin: auto;\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 30px;\n    position: relative;\n    padding: 0 20px;\n}\n\n\/* --- DESKTOP LINIJA --- *\/\n.timeline-line {\n    position: absolute;\n    top: 46px; \n    left: 12.5%; \/* Po\u010dinje to\u010dno ispod prve ikone *\/\n    width: 75%;  \/* Zavr\u0161ava to\u010dno ispod zadnje ikone *\/\n    height: 4px;\n    background: rgba(255,255,255,0.1);\n    z-index: 0;\n    border-radius: 4px;\n}\n\n.timeline-progress {\n    position: absolute;\n    top: 0; left: 0;\n    height: 100%;\n    width: 0%; \/* JS kontrolira ovo na desktopu *\/\n    background: #f97316;\n    box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);\n    transition: width 0.1s linear;\n}\n\n\/* --- KARTICE I IKONE --- *\/\n.timeline-card {\n    background: rgba(255,255,255,0.05);\n    border-radius: 16px;\n    padding: 30px;\n    text-align: center;\n    position: relative;\n    z-index: 1;\n}\n\n.timeline-icon {\n    width: 52px; height: 52px;\n    margin: 0 auto 20px;\n    border-radius: 14px;\n    display: flex; align-items: center; justify-content: center;\n    color: white;\n    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.timeline-icon.active { transform: scale(1.1); }\n\n\/* --- RESPONSIVE (MOBITEL & TABLET) --- *\/\n@media (max-width: 900px) {\n    .timeline-grid {\n        grid-template-columns: 1fr;\n        gap: 40px;\n        padding-left: 60px;\n    }\n\n    .timeline-line {\n        top: 20px;\n        bottom: 20px;\n        left: 35px; \/* Poravnato s ikonama *\/\n        width: 3px;\n        height: auto;\n        background: rgba(255,255,255,0.1);\n    }\n\n    .timeline-progress {\n        width: 100% !important; \n        height: 0%; \/* JS kontrolira ovo na mobitelu *\/\n        transition: height 0.1s linear;\n    }\n\n    .timeline-card { text-align: left; padding: 25px; }\n    .timeline-icon { margin: 0 0 15px 0; }\n}\n\n\/* Gradients *\/\n.icon-purple{background:linear-gradient(135deg,#8b5cf6,#6366f1);}\n.icon-blue{background:linear-gradient(135deg,#3b82f6,#06b6d4);}\n.icon-teal{background:linear-gradient(135deg,#22c55e,#10b981);}\n.icon-orange{background:linear-gradient(135deg,#f97316,#fb923c);}\n\n.timeline-title { color: white; font-weight: 600; margin-bottom: 8px; }\n.timeline-desc { color: rgba(255,255,255,0.7); font-size: 14px; }\n<\/style>\n\n<script>\ndocument.addEventListener('scroll', function() {\n  const section = document.querySelector('.timeline-section');\n  const cards = document.querySelectorAll('.timeline-card');\n  const progressLine = document.getElementById('progress-line');\n  \n  const sectionRect = section.getBoundingClientRect();\n  const windowHeight = window.innerHeight;\n  \n  \/\/ To\u010dka aktivacije (sredina ekrana)\n  const triggerPoint = windowHeight * 0.5;\n  \n  \/\/ Izra\u010dun progressa (0 do 1)\n  let scrollPercent = (triggerPoint - sectionRect.top) \/ sectionRect.height;\n  scrollPercent = Math.min(Math.max(scrollPercent, 0), 1);\n\n  if (window.innerWidth <= 900) {\n    \/\/ Mobilni: Resetiraj width, puni height\n    progressLine.style.width = \"100%\";\n    progressLine.style.height = (scrollPercent * 100) + \"%\";\n  } else {\n    \/\/ Desktop: Resetiraj height, puni width\n    progressLine.style.height = \"100%\";\n    progressLine.style.width = (scrollPercent * 100) + \"%\";\n  }\n\n  \/\/ Aktiviraj ikone kad pro\u0111u trigger point\n  cards.forEach((card) => {\n    const icon = card.querySelector('.timeline-icon');\n    const rect = card.getBoundingClientRect();\n    \n    \/\/ Na desktopu gledamo horizontalnu sredinu, na mobitelu vertikalnu\n    if (rect.top < triggerPoint) {\n      icon.classList.add('active');\n    } else {\n      icon.classList.remove('active');\n    }\n  });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3425b7c e-flex e-con-boxed e-con e-parent\" data-id=\"3425b7c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-931d556 elementor-widget elementor-widget-html\" data-id=\"931d556\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"web-showcase\">\r\n    <div class=\"showcase-header\">\r\n        <span class=\"showcase-tag\">Our Portfolio<\/span>\r\n        <h2 class=\"showcase-title\">Recent <span>Projects<\/span><\/h2>\r\n        <p class=\"showcase-subtitle\">Explore our latest work<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"showcase-grid\">\r\n        <div class=\"project-card\">\r\n            <div class=\"project-image\" style=\"background-image:url('https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/VillaPiedra.png');\"><\/div>\r\n            <div class=\"project-overlay\">\r\n                <div class=\"project-info\">\r\n                    <h3>Villa Piedra<\/h3>\r\n                    <p>Luxury Villa \u2022 Holiday Rental<\/p>\r\n                    <div class=\"project-actions-row\">\r\n                        <button type=\"button\" class=\"gallery-btn\" onclick=\"openGallery('villa')\">View Gallery \u2192<\/button>\r\n                        <a href=\"https:\/\/www.villapiedra.eu\" target=\"_blank\" class=\"website-btn\">Visit Website<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"project-card\">\r\n            <div class=\"project-image\" style=\"background-image:url('https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Julie.png');\"><\/div>\r\n            <div class=\"project-overlay\">\r\n                <div class=\"project-info\">\r\n                    <h3>Juli\u00e9 Jewellery<\/h3>\r\n                    <p>E-Commerce \u2022 Jewelry Store<\/p>\r\n                    <div class=\"project-actions-row\">\r\n                        <button type=\"button\" class=\"gallery-btn\" onclick=\"openGallery('julie')\">View Gallery \u2192<\/button>\r\n                        <a href=\"https:\/\/www.juliejewellery.store\/\" target=\"_blank\" class=\"website-btn\">Visit Web Shop<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"project-card\">\r\n            <div class=\"project-image\" style=\"background-image:url('https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/06\/Snimka-zaslona-2026-06-11-172954.png');\"><\/div>\r\n            <div class=\"project-overlay\">\r\n                <div class=\"project-info\">\r\n                    <h3>Le'art ceramic<\/h3>\r\n                    <p>E-Commerce \u2022 Handmade Ceramic<\/p>\r\n                    <div class=\"project-actions-row\">\r\n                        <button type=\"button\" class=\"gallery-btn\" onclick=\"openGallery('leart')\">View Gallery \u2192<\/button>\r\n                        <a href=\"https:\/\/www.leartceramic.com\" target=\"_blank\" class=\"website-btn\">Visit Website<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"project-card\">\r\n            <div class=\"project-image\" style=\"background-image:url('https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.00.05.png');\"><\/div>\r\n            <div class=\"project-overlay\">\r\n                <div class=\"project-info\">\r\n                    <h3>Ink &amp; Needle<\/h3>\r\n                    <p>Tattoo Studio \u2022 Portfolio<\/p>\r\n                    <div class=\"project-actions-row\">\r\n                        <button type=\"button\" class=\"gallery-btn\" onclick=\"openGallery('ink')\">View Gallery \u2192<\/button>\r\n                        <a href=\"https:\/\/ink-and-needle.netlify.app\/\" target=\"_blank\" class=\"website-btn\">Visit Website<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<div id=\"projectModal\" class=\"modal-overlay\" onclick=\"closeGallery()\">\r\n    <span class=\"close-btn\" onclick=\"closeGallery()\">&times;<\/span>\r\n    <div id=\"modalImages\" class=\"modal-content\" onclick=\"event.stopPropagation()\"><\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* --- OSNOVNI STIL --- *\/\r\n.web-showcase { padding: 60px 20px; max-width: 1200px; margin: 0 auto; font-family: 'Inter', sans-serif; background-color: #0transparent; }\r\n.showcase-header { text-align: center; margin-bottom: 50px; }\r\n.showcase-tag { color: #4cc9f0; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 13px; display: block; margin-bottom: 8px; }\r\n.showcase-title { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 700; color: white; margin-bottom: 15px; }\r\n.showcase-title span { color: #f77f31; }\r\n.showcase-subtitle { color: rgba(255, 255, 255, 0.6); max-width: 550px; margin: 0 auto; font-size: 16px; }\r\n\r\n\/* --- KARTICE (STRUKTURA SLOJEVA) --- *\/\r\n.showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }\r\n\r\n.project-card { \r\n    position: relative; \r\n    border-radius: 24px; \r\n    overflow: hidden; \r\n    height: 420px; \r\n    background: #000; \/* Crna pozadina kartice *\/\r\n    border: 1px solid rgba(255, 255, 255, 0.1); \r\n    transition: 0.4s; \r\n}\r\n\r\n\/* SLOJ 1: Pozadinska slika (samo nju zatamnjujemo) *\/\r\n.project-image { \r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%; \r\n    height: 100%; \r\n    background-size: cover; \r\n    background-position: center; \r\n    filter: brightness(0.4); \/* Ovdje pode\u0161ava\u0161 tamu slike - 0.4 je jako tamno *\/\r\n    transition: 0.5s ease;\r\n    z-index: 1;\r\n}\r\n\r\n.project-card:hover .project-image {\r\n    filter: brightness(0.5); \/* Na hover slika malo \"\u017eivne\" *\/\r\n    transform: scale(1.05);\r\n}\r\n\r\n\/* SLOJ 2: Gradijent preko slike (dodatno osiguranje za tekst) *\/\r\n.project-overlay { \r\n    position: absolute; \r\n    inset: 0; \r\n    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%); \r\n    display: flex; \r\n    align-items: flex-end; \r\n    padding: 35px; \r\n    z-index: 2;\r\n}\r\n\r\n\/* SLOJ 3: Informacije i gumbi (neovisni o filteru) *\/\r\n.project-info { \r\n    width: 100%; \r\n    position: relative;\r\n    z-index: 3; \/* Gura tekst na vrh da ne bude zamu\u0107en ili taman *\/\r\n}\r\n\r\n.project-info h3 { \r\n    color: #ffffff !important; \r\n    font-size: 26px; \r\n    margin: 0 0 8px 0; \r\n    text-shadow: 0 2px 10px rgba(0,0,0,0.5);\r\n}\r\n\r\n.project-info p { \r\n    color: #4cc9f0 !important; \r\n    font-weight: 700; \r\n    font-size: 14px; \r\n    margin-bottom: 25px; \r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* --- GUMBI --- *\/\r\n.project-actions-row { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }\r\n\r\n.gallery-btn, .website-btn {\r\n    height: 48px;\r\n    min-width: 160px;\r\n    padding: 0 25px;\r\n    border-radius: 12px;\r\n    font-weight: 700;\r\n    font-size: 13px;\r\n    cursor: pointer;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: 0.3s;\r\n    border: none;\r\n    font-family: inherit;\r\n    text-decoration: none;\r\n}\r\n\r\n.gallery-btn { background: #4054B2; color: white; }\r\n.website-btn { background: #f77f31; color: white !important; }\r\n\r\n.gallery-btn:hover, .website-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }\r\n\r\n\/* --- RESPONSIVE --- *\/\r\n@media (max-width: 850px) { .showcase-grid { grid-template-columns: 1fr; } }\r\n@media (max-width: 480px) {\r\n    .project-card { height: 500px; }\r\n    .project-actions-row { flex-direction: column; align-items: stretch; }\r\n    .gallery-btn, .website-btn { width: 100%; }\r\n}\r\n\r\n\/* --- MODAL --- *\/\r\n.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 10000; overflow-y: auto; backdrop-filter: blur(10px); }\r\n.modal-content { max-width: 900px; margin: 40px auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }\r\n.modal-content img { width: 100%; border-radius: 15px; }\r\n.close-btn { position: fixed; top: 20px; right: 30px; color: white; font-size: 50px; cursor: pointer; }\r\n<\/style>\r\n\r\n<script>\r\n\/\/ (Script ostaje isti kao u prethodnom koraku)\r\nvar projectsData = {\r\n    villa: ['https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/VillaPiedra.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/VillaPiedra2.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/VillaPiedra3.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/VillaPiedra4.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/VillaPiedra5.png'],\r\n    julie: ['https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Julie.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Julie2.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Julie3.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Julie4.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Julie5.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Julie6.png'],\r\n    leart: ['https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/06\/Snimka-zaslona-2026-06-11-172954.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/06\/Snimka-zaslona-2026-06-11-173014.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/06\/Snimka-zaslona-2026-06-11-173033.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/06\/Snimka-zaslona-2026-06-11-173048.png'],\r\n    ink: ['https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.00.05.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.00.27.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.00.39.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.01.02.png','https:\/\/weblab-studio.com\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-16.00.17.png']\r\n};\r\n\r\nfunction openGallery(id) {\r\n    var modal = document.getElementById('projectModal');\r\n    var container = document.getElementById('modalImages');\r\n    if (!projectsData[id]) return;\r\n    container.innerHTML = '';\r\n    projectsData[id].forEach(function(src) {\r\n        var img = document.createElement('img');\r\n        img.src = src;\r\n        container.appendChild(img);\r\n    });\r\n    modal.style.display = 'block';\r\n    document.body.style.overflow = 'hidden';\r\n}\r\n\r\nfunction closeGallery() {\r\n    document.getElementById('projectModal').style.display = 'none';\r\n    document.body.style.overflow = 'auto';\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cbe6bcf e-flex e-con-boxed e-con e-parent\" data-id=\"cbe6bcf\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e02409e elementor-widget elementor-widget-html\" data-id=\"e02409e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"final-cta\">\n    <div class=\"cta-card\">\n        <h2 class=\"cta-title\">Ready to build your <span class=\"highlight\">digital identity?<\/span><\/h2>\n        <p class=\"cta-subtitle\">\n            Don't let your business stay invisible. Let's create a professional online experience that converts visitors into loyal customers.\n        <\/p>\n        \n        <div class=\"cta-buttons\">\n            <a href=\"#quotehome\" class=\"btn-primary\">Get a Free Quote<\/a>\n            \n            <a href=\"https:\/\/wa.me\/385976659002\" target=\"_blank\" class=\"btn-secondary\">\n                <svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.438 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z\"\/><\/svg>\n                Chat on WhatsApp\n            <\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.final-cta {\n    padding: 100px 20px;\n    background: transparent !important;\n    display: flex;\n    justify-content: center;\n    font-family: 'Inter', sans-serif;\n    width: 100%;\n}\n\n.cta-card {\n    max-width: 900px;\n    width: 100%;\n    background: rgba(255, 255, 255, 0.05) !important;\n    border: 1px solid rgba(255, 255, 255, 0.12) !important;\n    backdrop-filter: blur(20px) !important;\n    -webkit-backdrop-filter: blur(20px) !important;\n    padding: 80px 40px;\n    border-radius: 40px;\n    text-align: center;\n    box-shadow: 0 25px 50px rgba(0,0,0,0.2) !important;\n    position: relative;\n}\n\n.cta-title {\n    font-size: clamp(32px, 5vw, 48px);\n    font-weight: 800;\n    color: #ffffff !important;\n    margin-bottom: 20px;\n    line-height: 1.2;\n}\n\n.cta-title .highlight {\n    color: #f77f31 !important;\n}\n\n.cta-subtitle {\n    font-size: clamp(16px, 2vw, 20px);\n    color: rgba(255, 255, 255, 0.7) !important;\n    max-width: 650px;\n    margin: 0 auto 40px;\n    line-height: 1.6;\n}\n\n.cta-buttons {\n    display: flex;\n    gap: 20px;\n    justify-content: center;\n    flex-wrap: wrap;\n    position: relative;\n    z-index: 10; \/* Osigurava da su gumbi iznad svih efekata *\/\n}\n\n.btn-primary, .btn-secondary {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer !important;\n    position: relative;\n    z-index: 11;\n}\n\n.btn-primary {\n    background: #f77f31 !important;\n    color: white !important;\n    padding: 18px 35px;\n    border-radius: 15px;\n    font-weight: 700;\n    text-decoration: none;\n    transition: all 0.3s ease !important;\n}\n\n.btn-primary:hover {\n    background: #22c55e !important;\n    transform: scale(1.05) !important;\n    color: white !important;\n}\n\n.btn-secondary {\n    background: rgba(255, 255, 255, 0.08) !important;\n    color: white !important;\n    padding: 18px 35px;\n    border-radius: 15px;\n    font-weight: 700;\n    text-decoration: none;\n    border: 1px solid rgba(255, 255, 255, 0.15) !important;\n    transition: all 0.3s ease !important;\n    gap: 10px;\n}\n\n.btn-secondary:hover {\n    background: #22c55e !important;\n    border-color: #22c55e !important;\n    transform: scale(1.05) !important;\n    color: white !important;\n}\n\n@media (max-width: 600px) {\n    .cta-card {\n        padding: 50px 20px;\n    }\n    .btn-primary, .btn-secondary {\n        width: 100%;\n    }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-890151d e-flex e-con-boxed e-con e-parent\" data-id=\"890151d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e5d371 elementor-widget elementor-widget-html\" data-id=\"2e5d371\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* Stilovi za linkove unutar FAQ sadr\u017eaja *\/\r\n.faq-content a {\r\n    color: #ffffff !important; \/* Bijela boja *\/\r\n    text-decoration: none;      \/* Uklanja podcrtavanje *\/\r\n    transition: opacity 0.3s ease;\r\n}\r\n\r\n\/* Osigurava da link ostane bijel i na hoveru, ali mo\u017ee\u0161 dodati lagani efekt prozirnosti *\/\r\n.faq-content a:hover {\r\n    color: #ffffff !important;\r\n    opacity: 0.8;               \/* Lagani vizualni feedback da je klikabilno *\/\r\n}\r\n.faq-toggle::before,\r\n.faq-toggle::after,\r\n.faq-card::before,\r\n.faq-card::after {\r\n    content: none !important;\r\n}\r\n\r\n.faq-section {\r\n    max-width: 1200px;\r\n    margin: auto;\r\n    padding: 60px 20px;\r\n    background: transparent;\r\n    font-family: 'Inter', sans-serif;\r\n}\r\n\r\n.faq-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n    gap: 15px;\r\n}\r\n\r\n.faq-card {\r\n    background: rgba(26, 43, 76, 0.6);\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(255, 255, 255, 0.05);\r\n    padding: 15px 20px;\r\n    box-shadow: 0 4px 20px rgba(0,0,0,0.2);\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n}\r\n\r\n.faq-card:hover {\r\n    background: rgba(26, 43, 76, 0.9);\r\n    transform: translateX(5px);\r\n    border-color: rgba(80, 140, 255, 0.3);\r\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.faq-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 16px;\r\n}\r\n\r\n.faq-title {\r\n    font-size: 15px;\r\n    font-weight: 600;\r\n    color: #f6f6f6;\r\n    padding-right: 20px;\r\n    transition: color 0.3s ease;\r\n    line-height: 1.5;\r\n}\r\n\r\n.faq-card:hover .faq-title {\r\n    color: #ffffff;\r\n}\r\n\r\n.faq-toggle {\r\n    border: none;\r\n    background: rgba(249, 115, 22, 0.1);\r\n    width: 32px;\r\n    height: 32px;\r\n    min-width: 32px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 20px;\r\n    font-weight: 400;\r\n    color: #f97316;\r\n    transition: all 0.3s ease;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.faq-card.active .faq-toggle {\r\n    background: #f97316;\r\n    color: white;\r\n    transform: rotate(45deg);\r\n}\r\n\r\n.faq-content {\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    font-size: 14px;\r\n    line-height: 1.7;\r\n    color: #cbd5e1;\r\n    transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease, padding-bottom 0.3s ease;\r\n    opacity: 0;\r\n}\r\n\r\n.faq-content p {\r\n    margin: 0;\r\n}\r\n\r\n.faq-card.active .faq-content {\r\n    max-height: 500px;\r\n    margin-top: 15px;\r\n    opacity: 1;\r\n    padding-bottom: 10px;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .faq-section {\r\n        padding: 40px 16px;\r\n    }\r\n\r\n    .faq-card {\r\n        padding: 14px 16px;\r\n    }\r\n\r\n    .faq-title {\r\n        font-size: 14px;\r\n        padding-right: 10px;\r\n    }\r\n\r\n    .faq-content {\r\n        font-size: 13px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"faq-section\">\r\n    <div class=\"faq-grid\">\r\n\r\n        <div class=\"faq-card\">\r\n            <div class=\"faq-header\">\r\n                <div class=\"faq-title\">What services do you offer?<\/div>\r\n                <div class=\"faq-toggle\">+<\/div>\r\n            <\/div>\r\n            <div class=\"faq-content\">\r\n                <p>We design and develop <strong>custom digital solutions<\/strong> tailored to your business goals. Our services include website development, eCommerce stores, mobile app development, booking systems, and custom web platforms. We also assist with <strong>payment integrations and performance optimisation<\/strong>.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq-card\">\r\n            <div class=\"faq-header\">\r\n                <div class=\"faq-title\">How long does it take to build a website or mobile app?<\/div>\r\n                <div class=\"faq-toggle\">+<\/div>\r\n            <\/div>\r\n            <div class=\"faq-content\">\r\n                <p>Project timelines depend on complexity. A standard website usually takes <strong>4-6 weeks<\/strong>, while more advanced platforms, eCommerce stores, or mobile applications may take <strong>4\u20138 weeks or longer<\/strong> depending on the features required.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq-card\">\r\n            <div class=\"faq-header\">\r\n                <div class=\"faq-title\">Do I need coding knowledge to manage my website or app?<\/div>\r\n                <div class=\"faq-toggle\">+<\/div>\r\n            <\/div>\r\n            <div class=\"faq-content\">\r\n                <p>Not at all. We build platforms that are <strong>easy to manage<\/strong>. You will be able to update content, images, and products <strong>without technical skills<\/strong>. We also provide guidance and ongoing support.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq-card\">\r\n            <div class=\"faq-header\">\r\n                <div class=\"faq-title\">Do you build eCommerce websites?<\/div>\r\n                <div class=\"faq-toggle\">+<\/div>\r\n            <\/div>\r\n            <div class=\"faq-content\">\r\n                <p>Absolutely. We develop <strong>professional online stores<\/strong> with secure payment integrations, product management systems, and shipping setup \u2014 everything you need to start selling online.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq-card\">\r\n            <div class=\"faq-header\">\r\n                <div class=\"faq-title\">Do you develop mobile apps for iOS and Android?<\/div>\r\n                <div class=\"faq-toggle\">+<\/div>\r\n            <\/div>\r\n            <div class=\"faq-content\">\r\n                <p>Yes. We develop <strong>custom mobile applications<\/strong> using our own structured system. These can be built for content platforms, eCommerce stores, or membership-based services.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq-card\">\r\n            <div class=\"faq-header\">\r\n                <div class=\"faq-title\">Can you integrate payment systems and booking tools?<\/div>\r\n                <div class=\"faq-toggle\">+<\/div>\r\n            <\/div>\r\n            <div class=\"faq-content\">\r\n                <p>Yes. We integrate <strong>popular payment gateways, booking systems, and automation tools<\/strong> so your business can operate smoothly and automatically online.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq-card\">\r\n            <div class=\"faq-header\">\r\n                <div class=\"faq-title\">Do you offer ongoing support after launch?<\/div>\r\n                <div class=\"faq-toggle\">+<\/div>\r\n            <\/div>\r\n            <div class=\"faq-content\">\r\n                <p>Yes \u2014 we provide <strong>ongoing maintenance, updates, and technical support<\/strong> to ensure your website or application continues to run smoothly as your business grows.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq-card\">\r\n            <div class=\"faq-header\">\r\n                <div class=\"faq-title\">How much does a website or mobile app cost?<\/div>\r\n                <div class=\"faq-toggle\">+<\/div>\r\n            <\/div>\r\n            <div class=\"faq-content\">\r\n              <p>Pricing depends on the scope and complexity. After a consultation, we provide a <strong>clear proposal with transparent pricing<\/strong> and no hidden costs. Our website packages, for example, start from <strong>\u20ac290<\/strong>. Please find more about pricing on dedicated page:<\/p>\r\n\r\n<p>\r\n<a href=\"https:\/\/weblab-studio.com\/websites\/\"><strong>Websites<\/strong><\/a><br>\r\n<a href=\"https:\/\/weblab-studio.com\/ecommerce\/\"><strong>Web Shops (eCommerce)<\/strong><\/a><br>\r\n<a href=\"https:\/\/weblab-studio.com\/mobile-apps\/\"><strong>Mobile Apps<\/strong><\/a><br>\r\n<a href=\"https:\/\/weblab-studio.com\/booking-systems\/\"><strong>Booking Systems<\/strong><\/a>\r\n<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"faq-card\">\r\n            <div class=\"faq-header\">\r\n                <div class=\"faq-title\">How do we start working together?<\/div>\r\n                <div class=\"faq-toggle\">+<\/div>\r\n            <\/div>\r\n            <div class=\"faq-content\">\r\n                <p>Simply <strong>contact us<\/strong> and tell us about your idea. We\u2019ll analyse your requirements and propose the best digital solution \u2014 <strong>completely obligation-free<\/strong>.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.querySelectorAll('.faq-card').forEach(card => {\r\n    card.addEventListener('click', () => {\r\n        \/\/ Opcija: zatvori ostale ako je jedan otvoren (uncomment ako \u017eeli\u0161)\r\n        \/\/ document.querySelectorAll('.faq-card').forEach(c => { if(c !== card) c.classList.remove('active'); });\r\n        card.classList.toggle('active');\r\n    });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7d706a6 e-flex e-con-boxed e-con e-parent\" data-id=\"7d706a6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f46dc67 elementor-widget elementor-widget-menu-anchor\" data-id=\"f46dc67\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"quotehome\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-58ccf2a e-con-full e-flex e-con e-child\" data-id=\"58ccf2a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;none&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4752017 elementor-widget elementor-widget-heading\" data-id=\"4752017\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Request a <span style=\"color:#ff771e\">Free Quote<\/span> <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3e22ca elementor-widget elementor-widget-text-editor\" data-id=\"b3e22ca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Tell us a bit about your business and we\u2019ll get back to you with ideas and pricing. No obligations.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95d0633 elementor-shape-circle e-grid-align-left elementor-grid-0 elementor-widget elementor-widget-social-icons\" data-id=\"95d0633\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\" role=\"list\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-41366e8\" href=\"https:\/\/www.instagram.com\/weblab.hr\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Instagram<\/span>\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-instagram\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-9afb872\" href=\"https:\/\/www.facebook.com\/people\/WebLab-Studio\/61587157734057\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook<\/span>\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-facebook\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-whatsapp elementor-repeater-item-1fd3803\" href=\"https:\/\/wa.me\/385976659002\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Whatsapp<\/span>\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-whatsapp\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-linkedin elementor-repeater-item-94ca1c7\" href=\"https:\/\/www.linkedin.com\/showcase\/weblab-studio1\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Linkedin<\/span>\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-linkedin\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-311f4fb e-con-full e-flex e-con e-child\" data-id=\"311f4fb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba70e89 fluentform-widget-submit-button-custom elementor-widget elementor-widget-fluent-form-widget\" data-id=\"ba70e89\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"fluent-form-widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n            <div class=\"fluentform-widget-wrapper fluentform-widget-align-default\">\n\n            \n            <div class='fluentform ff-default fluentform_wrapper_1 ffs_default_wrap'><form data-form_id=\"1\" id=\"fluentform_1\" class=\"frm-fluent-form fluent_form_1 ff-el-form-top ff_form_instance_1_1 ff-form-loading ffs_default\" data-form_instance=\"ff_form_instance_1_1\" method=\"POST\" ><fieldset  style=\"border: none!important;margin: 0!important;padding: 0!important;background-color: transparent!important;box-shadow: none!important;outline: none!important; min-inline-size: 100%;\">\n                    <legend class=\"ff_screen_reader_title\" style=\"display: block; margin: 0!important;padding: 0!important;height: 0!important;text-indent: -999999px;width: 0!important;overflow:hidden;\">Contact Form Demo<\/legend><input type='hidden' name='__fluent_form_embded_post_id' value='17' \/><input type=\"hidden\" id=\"_fluentform_1_fluentformnonce\" name=\"_fluentform_1_fluentformnonce\" value=\"e44d50ba9e\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/hr\/wp-json\/wp\/v2\/pages\/17\" \/><div data-type=\"name-element\" data-name=\"names\" class=\" ff-field_container ff-name-field-wrapper\" ><div class='ff-t-container'><div class='ff-t-cell '><div class='ff-el-group'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_1_names_first_name_' id='label_ff_1_names_first_name_' >First Name<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[first_name]\" id=\"ff_1_names_first_name_\" class=\"ff-el-form-control\" placeholder=\"First Name\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><div class='ff-t-cell '><div class='ff-el-group'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_1_names_last_name_' id='label_ff_1_names_last_name_' >Last Name<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[last_name]\" id=\"ff_1_names_last_name_\" class=\"ff-el-form-control\" placeholder=\"Last Name\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_email' id='label_ff_1_email' aria-label=\"Email\">Email<\/label><\/div><div class='ff-el-input--content'><input type=\"email\" name=\"email\" id=\"ff_1_email\" class=\"ff-el-form-control\" placeholder=\"Email Address\" data-name=\"email\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_input_text' id='label_ff_1_input_text' aria-label=\"Business \/ Brand Name\">Business \/ Brand Name<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"input_text\" class=\"ff-el-form-control\" placeholder=\"Business \/ Brand Name\" data-name=\"input_text\" id=\"ff_1_input_text\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_dropdown' id='label_ff_1_dropdown' aria-label=\"Select a service you are interested in\">Select a service you are interested in<\/label><\/div><div class='ff-el-input--content'><select name=\"dropdown\" id=\"ff_1_dropdown\" class=\"ff-el-form-control\" data-name=\"dropdown\" data-calc_value=\"0\"  aria-invalid=\"false\" aria-required=\"true\" aria-labelledby=\"label_ff_1_dropdown\"><option value=\"\">- Select -<\/option><option value=\"Website Development\"  >Website Development<\/option><option value=\"E-commerce Development (Web Shop)\"  >E-commerce Development (Web Shop)<\/option><option value=\"Website &amp; Booking System \"  >Website & Booking System<\/option><option value=\"Mobile App Development\"  >Mobile App Development<\/option><option value=\"Website Redesign\"  >Website Redesign<\/option><option value=\"Not sure yet\"  >Not sure yet<\/option><\/select><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_dropdown_1' id='label_ff_1_dropdown_1' aria-label=\"Project size\">Project size<\/label><\/div><div class='ff-el-input--content'><select name=\"dropdown_1\" id=\"ff_1_dropdown_1\" class=\"ff-el-form-control\" data-name=\"dropdown_1\" data-calc_value=\"0\"  aria-invalid=\"false\" aria-required=\"true\" aria-labelledby=\"label_ff_1_dropdown_1\"><option value=\"\">- Select -<\/option><option value=\"Starter Website (up to 3 pages)\"  >Starter Website (up to 3 pages)<\/option><option value=\"Business Website (up to 6 pages)\"  >Business Website (up to 6 pages)<\/option><option value=\"Premium \/ Custom Website\"  >Premium \/ Custom Website<\/option><option value=\"I need help deciding\"  >I need help deciding<\/option><\/select><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_dropdown_2' id='label_ff_1_dropdown_2' aria-label=\"Estimated budget\">Estimated budget<\/label><\/div><div class='ff-el-input--content'><select name=\"dropdown_2\" id=\"ff_1_dropdown_2\" class=\"ff-el-form-control\" data-name=\"dropdown_2\" data-calc_value=\"0\"  aria-invalid=\"false\" aria-required=\"true\" aria-labelledby=\"label_ff_1_dropdown_2\"><option value=\"\">- Select -<\/option><option value=\"\u20ac300\u2013500\"  >\u20ac300\u2013500<\/option><option value=\"\u20ac500\u2013900 \"  >\u20ac500\u2013900<\/option><option value=\"\u20ac900\u20131500 \"  >\u20ac900\u20131500<\/option><option value=\"\u20ac1500+\"  >\u20ac1500+<\/option><option value=\"Not sure yet\"  >Not sure yet<\/option><\/select><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_1_message' id='label_ff_1_message' aria-label=\"Tell us about your project\">Tell us about your project<\/label><\/div><div class='ff-el-input--content'><textarea aria-required=\"true\" aria-labelledby=\"label_ff_1_message\" name=\"message\" id=\"ff_1_message\" class=\"ff-el-form-control\" placeholder=\"What does your business do? What pages or features do you need?\" rows=\"4\" cols=\"2\" data-name=\"message\" ><\/textarea><\/div><\/div><div class='ff-el-group    ff-el-input--content'><div class='ff-el-form-check ff-el-tc'><label aria-label='I consent to have this website store my submitted information so they can respond to my inquiry.' class='ff-el-form-check-label ff_tc_label' for='gdpr-agreement_207c5b843a28ad3d6d9b065c40f00c76'><span class='ff_tc_checkbox'><input type=\"checkbox\" name=\"gdpr-agreement\" class=\"ff-el-form-check-input ff_gdpr_field\" data-name=\"gdpr-agreement\" id=\"gdpr-agreement_207c5b843a28ad3d6d9b065c40f00c76\"  value='on' aria-invalid='false' aria-required=true><\/span> <div class='ff_t_c'>I consent to have this website store my submitted information so they can respond to my inquiry.<\/div><\/label><\/div><\/div><div class='ff-el-group ff-text-left ff_submit_btn_wrapper'><button type=\"submit\" class=\"ff-btn ff-btn-submit ff-btn-md ff_btn_style wpf_has_custom_css\"  aria-label=\"Request a Quote\">Request a Quote<\/button><\/div><\/fieldset><\/form><div id='fluentform_1_errors' class='ff-errors-in-stack ff_form_instance_1_1 ff-form-loading_errors ff_form_instance_1_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_1_1 = {\"id\":\"1\",\"ajaxUrl\":\"https:\\\/\\\/weblab-studio.com\\\/wp-admin\\\/admin-ajax.php\",\"settings\":{\"layout\":{\"labelPlacement\":\"top\",\"helpMessagePlacement\":\"with_label\",\"errorMessagePlacement\":\"inline\",\"cssClassName\":\"\",\"asteriskPlacement\":\"asterisk-right\"},\"restrictions\":{\"denyEmptySubmission\":{\"enabled\":false}}},\"form_instance\":\"ff_form_instance_1_1\",\"form_id_selector\":\"fluentform_1\",\"rules\":{\"names[first_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"This field is required\"}},\"names[middle_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"This field is required\"}},\"names[last_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"This field is required\"}},\"email\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"This field is required\"},\"email\":{\"value\":true,\"message\":\"This field must contain a valid email\",\"global\":false,\"global_message\":\"This field must contain a valid email\"}},\"input_text\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}},\"dropdown\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}},\"dropdown_1\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}},\"dropdown_2\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}},\"message\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":false,\"global_message\":\"This field is required\"}},\"gdpr-agreement\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global_message\":\"This field is required\",\"global\":true}}},\"debounce_time\":300,\"file_upload_settings\":[]};\n                            <\/script>\n                        <\/div>\n\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Launch Your Digital Success Websites \u2022 Mobile Apps \u2022 eCommerce \u2022 Booking Systems GET FREE QUOTE VIEW SOLUTIONS Drag or swipe to rotate 3D portfolio 1 \/ 5 Category Project Title Visit Website Turn Your Business into a Digital Experience Presence Being online is no longer optional. It&#8217;s where your customers are. Growth Automate processes [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/weblab-studio.com\/hr\/wp-json\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weblab-studio.com\/hr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/weblab-studio.com\/hr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/weblab-studio.com\/hr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/weblab-studio.com\/hr\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":741,"href":"https:\/\/weblab-studio.com\/hr\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":29494,"href":"https:\/\/weblab-studio.com\/hr\/wp-json\/wp\/v2\/pages\/17\/revisions\/29494"}],"wp:attachment":[{"href":"https:\/\/weblab-studio.com\/hr\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}