/* assets/css/custom.css */
/* Custom stilovi za DVision Tech – multi-page shell */


/* =========================
   GLOBAL ANIMATED BACKGROUND
   (1:1 from preview)
   ========================= */

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #070d18;
}

/* Background wrapper */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      #070d18 0%,
      #0a1426 45%,
      #060b14 100%);
}

/* Shared blob base */
.blob {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  filter: blur(16px);
  opacity: 0.85;
  will-change: transform;
}

/* Left blob */
.blob.left {
  top: -35vmax;
  left: -25vmax;
  background:
    radial-gradient(circle at 38% 35%, rgba(210,240,255,.12), rgba(210,240,255,0) 26%),
    radial-gradient(circle at 36% 36%, rgba(14,26,46,.62), rgba(14,26,46,0) 42%),
    radial-gradient(circle at 35% 35%, rgba(95,150,220,.42), rgba(95,150,220,0) 64%),
    radial-gradient(circle at 55% 60%, rgba(4,10,20,.38), rgba(4,10,20,0) 62%);
  animation: blobLeft 22s ease-in-out infinite;
}

/* Right blob */
.blob.right {
  bottom: -40vmax;
  right: -30vmax;
  background:
    radial-gradient(circle at 60% 40%, rgba(200,230,255,.14), rgba(200,230,255,0) 30%),
    radial-gradient(circle at 58% 42%, rgba(18,28,46,.42), rgba(18,28,46,0) 40%),
    radial-gradient(circle at 60% 40%, rgba(90,145,220,.44), rgba(90,145,220,0) 64%),
    radial-gradient(circle at 40% 65%, rgba(6,12,24,.36), rgba(6,12,24,0) 62%);
  animation: blobRight 28s ease-in-out infinite;
}

/* Flow layer */
.flow {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(900px 700px at 55% 55%, rgba(140,200,255,.20), transparent 65%),
    radial-gradient(700px 600px at 35% 35%, rgba(100,170,255,.16), transparent 65%);
  filter: blur(20px);
  opacity: .9;
  will-change: transform;
  animation: flowMove 32s ease-in-out infinite;
}



/* BACKGROUND ANIMATION CONTINUITY (fake, CSS-only) */
/* Negativni animation-delay sprječava vizualni "reset"  prilikom page change / menu clicka.
  Vrijednosti su namjerno različite da kretanje djeluje organski.*/
.blob.left {
  animation-delay: -11s;
}

.blob.right {
  animation-delay: -19s;
}

.flow {
  animation-delay: -27s;
}


/* Animations */
@keyframes blobLeft {
  0%   { transform: translate(-6vmax,-6vmax) rotate(0deg) scale(1.02); }
  20%  { transform: translate(8vmax,-2vmax)  rotate(8deg) scale(1.05); }
  45%  { transform: translate(18vmax,10vmax) rotate(16deg) scale(1.10); }
  70%  { transform: translate(4vmax,16vmax)  rotate(6deg) scale(1.06); }
  100% { transform: translate(-6vmax,-6vmax) rotate(0deg) scale(1.02); }
}

@keyframes blobRight {
  0%   { transform: translate(8vmax,10vmax) rotate(0deg) scale(1.00); }
  25%  { transform: translate(-6vmax,6vmax) rotate(-10deg) scale(1.05); }
  55%  { transform: translate(-18vmax,-12vmax) rotate(-18deg) scale(1.09); }
  80%  { transform: translate(-4vmax,-20vmax) rotate(-7deg) scale(1.04); }
  100% { transform: translate(8vmax,10vmax) rotate(0deg) scale(1.00); }
}

@keyframes flowMove {
  0%   { transform: translate(0,0) rotate(0deg); }
  50%  { transform: translate(12vmax,-8vmax) rotate(6deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

/* Ensure content is above background */
.dv-content-viewport,
.dv-content-slide,
.dv-left-rail-shell,
header {
  position: relative;
  z-index: 1;
}


/* =========================
   FONT FACE – Simplified Arabic Fixed
   ========================= */

@font-face {
  font-family: "Simplified Arabic Fixed";
  src: 
    url("../fonts/SimplifiedArabicFixed-Regular.woff2") format("woff2"),
    url("../fonts/SimplifiedArabicFixed-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================
   GLOBAL VIGNETTE
   (subtle cinematic edge focus)
   ========================= */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;

  /* višeslojni vignette za prirodan pad svjetla */
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,0.35) 85%,
      rgba(0,0,0,0.65) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.45) 100%
    );

  mix-blend-mode: multiply;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  body::after {
    background:
      radial-gradient(
        ellipse at center,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.45) 100%
      );
  }
}



/* =========================
   VARIJABLE
   ========================= */

:root {
  /* BOJE */
  --color-bg: #18181b;
  --color-bg-alt: #1f1f23;
  --color-bg-panel: #26262b;

  --color-accent: #00bcd4;          /* primary (cyan) */
  --color-accent-warm: #377b9a;    /* secondary / highlight (orange) */ 
  /*--color-accent-warm: #d77a3a; - za testiranje main boje */ 
  --color-accent-warm-soft: rgba(215, 122, 58, 0.18);
  
  --color-accent-soft: rgba(0, 188, 212, 0.15);
  --color-text: #ffffff;
  --color-text-muted: #9ca3af;
  --color-border-soft: rgba(255, 255, 255, 0.15);
  
  /* DV LOGO */
  --dv-logo-w: clamp(160px, 10vw, 220px);

  /* TIPOGRAFIJA */
  --font-main: "Simplified Arabic Fixed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-base: 18px;
  --font-size-menu: 15px;
  --font-size-heading: 38px;

/* GLOBAL HORIZONTAL SYSTEM - LAYOUT */
  /* LEFT RAIL (menu) */
  --dv-rail-w: clamp(200px, 16vw, 300px);
  --dv-rail-gap: clamp(14px, 1.4vw, 32px); /* razmak menu -> content */
  --dv-rail-left: clamp(16px, 3vw, 44px); /* udaljenost raila od lijevog ruba */
  /* LEFT RAIL – text offset (linija + padding) */
  --dv-rail-text-offset: 24px;
  /* SPACING BETWEEN MENU ITEMS*/
  --dv-menu-item-gap: 0.22rem;

  /* koliko content “ulazi” u viewport */
  --layout-side-offset: clamp(6vw, 10vw, 14vw);
  /* maksimalna širina contenta */
  --layout-content-max-width: 86vw;
  /* dodatni fine-tuning za velike ekrane */
  --layout-content-padding: clamp(24px, 3vw, 48px);
  /* pomak content containera */
  --dv-content-nudge: clamp(-92px, -4vw, -48px);
  --dv-content-right-gutter: clamp(60px, 5vw, 120px);
  
  --dv-scroll-offset: 96px;
  --dv-slide-nav-h: 64px;


  /* OSTALO */
  --transition-fast: 180ms ease-out;
  --transition-normal: 260ms ease;
  
  /* HOVER SYSTEM (global) */
  --dv-radius-lg: 24px;
  --dv-radius-xl: 28px;

  --dv-media-blur: 1.2px;
  --dv-media-brightness: 0.75;
  --dv-media-grayscale: 0.15;

  --dv-hover-scale-in: 1.02;
  --dv-hover-scale-out: 1.01;
  --dv-hover-shift-y: 6px;

  --dv-overlay-bg: rgba(24, 24, 27, 0.62);
  --dv-overlay-bg-strong: rgba(24, 24, 27, 0.72);
  --dv-overlay-blur: 8px;
  --dv-overlay-text: rgba(255, 255, 255, 0.78);

  --dv-hover-dur: 280ms;
  --dv-hover-dur-long: 350ms;

  --dv-partners-strip-h: 60px;
  --dv-partners-speed: 30s;
  --dv-partners-fade: 6vw; /* ~5–7% na desktopu */
  
  --dv-semi-max: min(1100px, 100%);
  --dv-semi-dial-h: clamp(170px, 18vh, 210px);
  --dv-semi-dial-drop: clamp(26px, 3.5vh, 44px);
  --dv-semi-radius: clamp(190px, 25vw, 340px);
  --dv-semi-chip-bg: rgba(24, 24, 27, 0.72);
  --dv-semi-chip-border: rgba(255, 255, 255, 0.16);
  --dv-semi-arc: rgba(255, 255, 255, 0.14);
  --dv-semi-center-push: clamp(62%, 10vh, 70%);
  --dv-semi-arrow-bottom: clamp(16px, 2.2vh, 28px);
}


/* =========================
   GLOBAL TYPOGRAPHY
   ========================= */

html,
body {
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   STICKY HEADER – GLOBALNI SHELL
   ========================= */

body:not(.elementor-editor-active) .sticky-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;

/*
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
*/

  background: transparent;
  backdrop-filter: none;

  padding-top: 10px;
  padding-bottom: 10px;

  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Sjena kad je header "zalijepljen" (ako je koristiš u JS-u) */
body:not(.elementor-editor-active) .sticky-header.is-stuck {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}


/* STICKY HEADER – RAIL-AWARE (DESKTOP) */
@media (min-width: 1025px) {
  .dv-shell-header .dv-header-inner {
    width: 100%;
    max-width: none;          /* ← KLJUČ */
    margin: 0;                /* ← KLJUČ */

    /* HEADER START = LEFT RAIL START */
    padding-left: calc(var(--dv-rail-left) + var(--dv-rail-text-offset));   /* var(--dv-rail-left);*/
    padding-right: var(--dv-content-right-gutter);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}


.dv-logo-link {
  display: inline-flex;
  align-items: center;
}


/* Logo SVG */
.dv-logo {
  display: block;
  width: var(--dv-logo-w);
  height: auto;
  opacity: 1;
  visibility: visible;
  filter: none;
  mix-blend-mode: normal;
}


/* CONTACT US button – fill odozgo prema dolje; border se vraća na bijelo tek nakon “odbojanja”; tekst uvijek bijel */
.dv-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;

  position: relative;
  overflow: hidden;
  cursor: pointer;

  /* novi stacking context */
  isolation: isolate;

  /* bitno: element iznad pseudo-layera */
  z-index: 0;

  background: transparent;
  text-decoration: none;

  border: 1px solid rgba(255, 255, 255, 0.9);

  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 500;

  /* TEKST: zaključan */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  /* border povratak na bijelo kasni (da fill stigne izaći) */
  transition:
    border-color 0.18s ease 0.55s,
    transform 0.18s ease;
}

/* zaključaj tekst i ako tema/Elementor ubaci span/inner wrapper */
.dv-contact-button,
.dv-contact-button * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Fill layer – iza teksta (z-index:-1), ide odozgo prema dolje */
.dv-contact-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-warm);

  transform: translateY(-101%);
  transition: transform 0.50s ease;

  /* KLJUČ: uvijek iza teksta */
  z-index: -1;
}

/* Hover: border odmah narančast, fill ulazi s delayem */
.dv-contact-button:hover,
.dv-contact-button:focus,
.dv-contact-button:active,
.dv-contact-button:focus-visible,
.dv-contact-button:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

.dv-contact-button:hover,
.dv-contact-button:focus,
.dv-contact-button:active,
.dv-contact-button:focus-visible {
  border-color: var(--color-accent-warm);
  transform: translateY(-1px);

  /* na hoveru nema kašnjenja za border */
  transition:
    border-color 0.18s ease 0s,
    transform 0.18s ease;
}

/* fill ulazi s delayem samo na hover-in */
.dv-contact-button:hover::before,
.dv-contact-button:focus::before,
.dv-contact-button:active::before,
.dv-contact-button:focus-visible::before {
  transition-delay: 0.20s;
  transform: translateY(0);
}


/* wrapper for 2 icons */
.dv-shell-header .dv-header-social{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* each icon = round CTA chip */
.dv-shell-header .dv-social{
  width: 38px;
  height: 38px;
  padding: 0 !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px !important;

  /* give it the same premium shell feel */
  background: rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(6px);

  /* the dv-cta already defines border + fill behaviour */
  text-decoration: none !important;
}

/* icon sizing */
.dv-shell-header .dv-social-icon{
  width: 16px;
  height: 16px;
  display: block;

  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  
}

/* Premium lift like other CTAs */
.dv-shell-header .dv-social:hover,
.dv-shell-header .dv-social:focus,
.dv-shell-header .dv-social:active,
.dv-shell-header .dv-social:focus-visible{
  transform: translateY(-1px);
}

/* Mobile tweak */
@media (max-width: 1024px){
  .dv-shell-header .dv-header-actions{
    gap: 8px;
  }
  .dv-shell-header .dv-social{
    width: 34px;
    height: 34px;
  }
  .dv-shell-header .dv-social-icon{
    width: 15px;
    height: 15px;
  }
}


/* Responsive header */
@media (max-width: 1024px) {
  .dv-shell-header .dv-header-inner {
    padding-inline: 16px;
  }

  .dv-logo {
    max-height: 40px;
  }

  .dv-contact-button {
    padding: 8px 18px;
    font-size: 11px;
  }
}


/* =========================
   HEADER — layout polish + hamburger (no circle) + stagger line fill
   ========================= */

/* 1) Header actions layout: malo više zraka, hamburger odvojen */
.dv-shell-header .dv-header-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

/* veliki razmak prije hamburgera (3x veći od social gap) */
.dv-shell-header .dv-hamburger{
  /*margin-left: clamp(26px, 3vw, 54px);*/
  margin-left: clamp(18px, 2vw, 36px);
}

/* (opcionalno) mali shift ulijevo (2–3%) bez diranja rail starta */
@media (min-width: 1025px){
  .dv-shell-header .dv-header-inner{
    padding-right: calc(var(--dv-content-right-gutter) + 0px);
  }
}

/* 2) Hamburger: NO circle, only lines */
.dv-shell-header .dv-hamburger{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 38px; /* držimo visinu radi aligna */
}

/* lines block — +50% */
.dv-shell-header .dv-hamburger-lines{
  width: 28px;   /* ~18px * 1.55 */
  height: 18px;  /* više prostora */
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

/* svaka crta = bijela baza + “fill” overlay */
.dv-shell-header .dv-ham-line{
  position: relative;
  display: block;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  overflow: hidden;
}

/* fill overlay (top -> bottom) */
.dv-shell-header .dv-ham-line::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-warm);
  transform: translateY(-101%);
  transition: transform 0.40s ease;
}

/* HOVER IN: gore -> sredina -> dolje (stagger) */
.dv-shell-header .dv-hamburger:hover .dv-ham-line:nth-child(1)::before,
.dv-shell-header .dv-hamburger:focus-visible .dv-ham-line:nth-child(1)::before{ transition-delay: 0ms; }

.dv-shell-header .dv-hamburger:hover .dv-ham-line:nth-child(2)::before,
.dv-shell-header .dv-hamburger:focus-visible .dv-ham-line:nth-child(2)::before{ transition-delay: 80ms; }

.dv-shell-header .dv-hamburger:hover .dv-ham-line:nth-child(3)::before,
.dv-shell-header .dv-hamburger:focus-visible .dv-ham-line:nth-child(3)::before{ transition-delay: 160ms; }

.dv-shell-header .dv-hamburger:hover .dv-ham-line::before,
.dv-shell-header .dv-hamburger:focus-visible .dv-ham-line::before{
  transform: translateY(0);
}

/* HOVER OUT: obrnutim redom (dolje -> sredina -> gore) */
.dv-shell-header .dv-hamburger:not(:hover) .dv-ham-line:nth-child(1)::before{ transition-delay: 160ms; }
.dv-shell-header .dv-hamburger:not(:hover) .dv-ham-line:nth-child(2)::before{ transition-delay: 80ms; }
.dv-shell-header .dv-hamburger:not(:hover) .dv-ham-line:nth-child(3)::before{ transition-delay: 0ms; }

/* premium lift */
.dv-shell-header .dv-hamburger:hover,
.dv-shell-header .dv-hamburger:focus-visible{
  transform: translateY(-1px);
}


/* Hamburger: kill browser focus ring that sometimes appears after closing overlay */
.dv-shell-header .dv-hamburger,
.dv-shell-header .dv-hamburger:focus,
.dv-shell-header .dv-hamburger:active,
.dv-shell-header .dv-hamburger:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: malo manje, ali i dalje +50% */
@media (max-width: 1024px){
  .dv-shell-header .dv-hamburger{ height: 34px; }
  .dv-shell-header .dv-hamburger-lines{ width: 26px; height: 16px; }
}


/* =========================
   OVERLAY TOKENS (single source of truth)
   ========================= */
:root{
  /* main items */
  --dv-ov-main-font: clamp(30px, 3.2vw, 54px);

  /* subslide items */
  --dv-ov-sub-font: 18px;

  /* spacing */
  --dv-ov-gap-main-to-sub: 6px;   /* naslov -> podnaslovi (manje = bliže) */
  --dv-ov-gap-sub-to-next: 24px;  /* podnaslovi -> idući naslov (veće = jasnije odvajanje) */
  --dv-ov-sub-row-gap: 10px;      /* razmak između redova podnaslova kad se wrapa */
}



/* 3) Overlay: fade-in radi stvarno (bez display:none) + header logo ostaje vidljiv */
.dv-nav-overlay{
  position: fixed;
  inset: 0;

  /* IZNAD headera: da Close bude vidljiv */
  z-index: 2000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.dv-nav-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s linear 0s;
}



.dv-nav-backdrop{
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(16px) saturate(120%);
}

/* subtle animated glow (behind text) */
.dv-nav-backdrop::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 20% 30%, rgba(0,188,212,0.14), transparent 60%),
    radial-gradient(760px 480px at 80% 70%, rgba(215,122,58,0.16), transparent 60%);
  opacity: 0.9;

  animation: dvOverlayGlow 12s ease-in-out infinite alternate;
}

@keyframes dvOverlayGlow{
  from{ transform: translate3d(-2%, -2%, 0) scale(1.02); }
  to{ transform: translate3d(2%, 2%, 0) scale(1.05); }
}




/* 4) overlay content centrirano, ali lijevo poravnato */
.dv-nav-panel{
  position: relative;
  height: 100%;
  width: 100%;
  padding: clamp(18px, 3vw, 36px);
  box-sizing: border-box;

  /* single source of truth: flex layout */
  display: flex;
  flex-direction: column;

  min-height: 0;
  overflow: hidden; /* scroll ostaje unutar dv-nav-list */
}


.dv-nav-list{
  /* zauzmi sav preostali prostor u panelu */
  flex: 1 1 auto;
  min-height: 0;

  /* scroll samo kad baš mora */
  overflow: auto;

  /* gura sadržaj ispod logo/close (JS postavlja var) */
  padding-top: var(--dv-nav-safe-top, 96px);
  padding-bottom: 18px;

  /* centriraj sadržaj */
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 0;
}



/* Overlay inner column — single source of truth (centered) */
.dv-nav-list-inner{
  width: min(980px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  transform: none;
}

/* main list */
.dv-nav-main{
  list-style: none;
  margin: 0;
  padding: 0;
}

.dv-nav-main > li{ margin: 0 0 26px 0; }

.dv-nav-main > li > a{
  display: inline-block;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 300;
  font-size: var(--dv-ov-main-font);
  line-height: 1.15;
  transition: color 180ms ease, transform 180ms ease;
}

.dv-nav-main > li > a:hover{
  color: var(--color-accent-warm);
  transform: translateX(6px);
}



.dv-nav-main{
  text-align: center;
}



/* =========================
   OVERLAY — FINAL: subslides inline + dot separators + force colors
   ========================= */

/* radi i ako JS koristi dv-nav-inline-slide-list ili dv-nav-slide-list */
#dvNavOverlay .dv-nav-inline-slide-list,
#dvNavOverlay .dv-nav-slide-list{
  list-style: none;
  padding: 0;
  border-left: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  /* TOP manji (bliže naslovu), BOTTOM veći (dalje od idućeg naslova) */
  margin: var(--dv-ov-gap-main-to-sub) 0 var(--dv-ov-gap-sub-to-next) 0;

  column-gap: 0;
  row-gap: var(--dv-ov-sub-row-gap);
}

#dvNavOverlay .dv-nav-inline-slide-list li,
#dvNavOverlay .dv-nav-slide-list li{
  margin: 0;
  display: inline-flex;
  align-items: center;
}

/* točkica između */
#dvNavOverlay .dv-nav-inline-slide-list li:not(:last-child)::after,
#dvNavOverlay .dv-nav-slide-list li:not(:last-child)::after{
  content: "·";
  color: var(--color-accent-warm);
  opacity: 0.9;
  margin: 0 14px;
}

/* FORCE boje (da ne “povuče” crveno/visited/global) */
#dvNavOverlay .dv-nav-inline-slide-list a,
#dvNavOverlay .dv-nav-slide-list a{
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 300;
  font-size: var(--dv-ov-sub-font);

  color: rgba(255,255,255,0.72) !important;
  transition: color 180ms ease, transform 180ms ease;
}

#dvNavOverlay .dv-nav-inline-slide-list a:visited,
#dvNavOverlay .dv-nav-slide-list a:visited{
  color: rgba(255,255,255,0.72) !important;
}

#dvNavOverlay .dv-nav-inline-slide-list a:hover,
#dvNavOverlay .dv-nav-slide-list a:hover{
  color: var(--color-accent-warm) !important;
  transform: translateY(-1px);
}

/* (Optional) hide old grouped container if still present */
.dv-nav-slides{
  display: none !important;
}



/* =========================
   LEGACY (DISABLED) — old grouped slide list
   Keeping for rollback; DO NOT USE
   ========================= */

/*

._legacy-.dv-nav-slide-group{
  margin: -14px 0 0 0;  
  text-align: center;   
}

._legacy-.dv-nav-slide-title{
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

._legacy-.dv-nav-slide-title-link{
  display: inline-block;
  text-decoration: none !important;
  cursor: pointer;
}

._legacy-.dv-nav-slide-title-link:hover{
  color: var(--color-accent-warm);
  transform: translateX(6px);
  transition: color 180ms ease, transform 180ms ease;
}


._legacy-.dv-nav-slide-list{
  list-style: none;
  margin: 0 0 30px 0; 
  padding: 0;
  border-left: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;  
  column-gap: 0;            
  row-gap: 10px;
}


._legacy-.dv-nav-slide-list li{
  margin: 0;
  display: inline-flex;
  align-items: center;
}


._legacy-.dv-nav-slide-list li:not(:last-child)::after{
  content: "·";
  color: var(--color-accent-warm);
  opacity: 0.9;
  margin: 0 14px;
}


._legacy-.dv-nav-slide-list a{
  display: inline-block;
  text-decoration: none;
  color: rgba(255,255,255,0.82);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 300;
  font-size: 12px;
  transition: color 180ms ease;
}

._legacy-.dv-nav-slide-list a:hover{
  color: var(--color-accent-warm);
}

*/



/* 5) Close: NO circle, bigger */
.dv-nav-top{
  position: fixed;
  top: var(--dv-nav-close-top, 12px);
  left: 0;
  right: 0;
  z-index: 1000002;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-left: calc(var(--dv-rail-left, 16px) + var(--dv-rail-text-offset, 0px));
  /*padding-right: var(--dv-nav-close-right, 16px);*/
  padding-right: clamp(12px, var(--dv-nav-close-right, 16px), 80px);

  pointer-events: none; /* da top bar ne “hvata” klikove osim na elementima */
}

/* logo u overlayu */
.dv-nav-logo-link{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
}

.dv-nav-logo{
  display: block;
  width: var(--dv-logo-w, 140px);
  height: auto;
}
  
/* Close button — SINGLE SOURCE OF TRUTH (overlay only) */
#dvNavOverlay .dv-nav-close{
  pointer-events: auto;

  appearance: none;
  -webkit-appearance: none;

  border: 0 !important;
  background: transparent !important;

  padding: 0;
  margin: 0;

  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: rgba(255,255,255,0.92) !important;

  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;

  transition: color 180ms ease, transform 180ms ease;
}

/* kill browser highlight/focus */
#dvNavOverlay .dv-nav-close:hover,
#dvNavOverlay .dv-nav-close:focus,
#dvNavOverlay .dv-nav-close:active,
#dvNavOverlay .dv-nav-close:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* hover color + premium lift */
#dvNavOverlay .dv-nav-close:hover{
  color: var(--color-accent-warm) !important;
  transform: translateY(-1px);
}

/* X inherits hover color */
#dvNavOverlay .dv-nav-close .dv-nav-close-x{
  color: inherit !important;
}

#dvNavOverlay .dv-nav-close-text{
  letter-spacing: 0.18em;
  font-size: 13px;
  text-transform: uppercase;
}

#dvNavOverlay .dv-nav-close-x{
  font-size: 34px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transform: translateY(-2px);
}




/* 6) Kad je overlay open: sakrij header actions, ali BEZ reflow-a */
body.dv-nav-open .dv-shell-header .dv-header-actions{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-1px); /* optional: mali “lift” fade-out feel */
}



/* FINAL OVERRIDE: Overlay subslide font size (wins over earlier rules) */
#dvNavOverlay .dv-nav-inline-slide-list a,
#dvNavOverlay .dv-nav-slide-list a{
  font-size: 18px !important;
  letter-spacing: 0.12em !important;
}

@media (max-width: 1024px){
  #dvNavOverlay .dv-nav-inline-slide-list a,
  #dvNavOverlay .dv-nav-slide-list a{
    font-size: 14px !important;
  }
}

@media (max-width: 1024px){
  :root{
    --dv-ov-main-font: clamp(22px, 5.2vw, 34px);
    --dv-ov-sub-font: 14px;

    --dv-ov-gap-main-to-sub: 6px;
    --dv-ov-gap-sub-to-next: 18px;
    --dv-ov-sub-row-gap: 8px;
  }
}

@media (max-height: 720px){
  :root{
    --dv-ov-main-font: clamp(20px, 4.2vw, 30px);
    --dv-ov-sub-font: 13px;

    --dv-ov-gap-main-to-sub: 4px;
    --dv-ov-gap-sub-to-next: 14px;
    --dv-ov-sub-row-gap: 6px;
  }
}



/* =========================
   DV CTA – univerzalni hover (border odmah, fill s delayem, border reset nakon fill-out)
   Smjer se definira s modifikatorom:
   - .dv-cta--down  (top -> bottom)
   - .dv-cta--right (left -> right)
   ========================= */

.dv-cta {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;

  isolation: isolate;
  z-index: 0;

  /* tekst uvijek bijel */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.dv-cta,
.dv-cta * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Border reset kasni (da fill stigne “izaći”) */
.dv-cta {
  transition:
    border-color 0.18s ease 0.55s,
    transform 0.18s ease;
}

/* Fill layer (boja iz varijable) */
.dv-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-warm);
  transition: transform 0.50s ease;
  z-index: -1; /* uvijek iza teksta */
}

/* Hover: border odmah warm, fill ulazi s delayem */
.dv-cta:hover,
.dv-cta:focus,
.dv-cta:active,
.dv-cta:focus-visible {
  border-color: var(--color-accent-warm);
  transform: translateY(-1px);

  /* na hoveru nema delay za border */
  transition:
    border-color 0.18s ease 0s,
    transform 0.18s ease;
}

.dv-cta:hover::before,
.dv-cta:focus::before,
.dv-cta:active::before,
.dv-cta:focus-visible::before {
  transition-delay: 0.20s; /* fill kasni */
}

/* Smjer punjenja: top -> bottom */
.dv-cta--down::before {
  transform: translateY(-101%);
}
.dv-cta--down:hover::before,
.dv-cta--down:focus::before,
.dv-cta--down:active::before,
.dv-cta--down:focus-visible::before {
  transform: translateY(0);
}

/* Smjer punjenja: left -> right */
.dv-cta--right::before {
  transform: translateX(-101%);
}
.dv-cta--right:hover::before,
.dv-cta--right:focus::before,
.dv-cta--right:active::before,
.dv-cta--right:focus-visible::before {
  transform: translateX(0);
}



/* ======================================================
   HEADER — Social icons: prevent "stuck filled" state
   (click opens new tab -> link may remain :focus on return)
   ====================================================== */

/* 1) Resetiraj fill SAMO kad je fokus mišem i NIJE hover */
.dv-header-social .dv-social:focus:not(:focus-visible):not(:hover)::before {
  transform: translateY(-101%);
  transition-delay: 0s;
}

/* 2) I border vrati na default, ali opet samo kad NIJE hover */
.dv-header-social .dv-social:focus:not(:focus-visible):not(:hover) {
  border-color: rgba(255, 255, 255, 0.9);
  transform: none;
}

/* 3) Keyboard focus (TAB) i dalje smije imati premium fill */
.dv-header-social .dv-social:focus-visible::before {
  transform: translateY(0);
  transition-delay: 0.20s;
}

.dv-header-social .dv-social:focus-visible {
  border-color: var(--color-accent-warm);
  transform: translateY(-1px);
}





/* =========================
   MULTI-PAGE: 1 VIEWPORT PO STRANICI
   ========================= */

.dv-content-viewport {
  position: relative;

  /* KLJUČ: viewport je VISINA ekrana MINUS header (offset),
     a NE padding-top (koji bi duplao razmak ako header već “jede” visinu) */
  height: calc(100vh - var(--dv-scroll-offset, 0px));

  overflow: hidden;
  display: block;

  /* NEMA padding-top ovdje */
  padding-top: 0;

  box-sizing: border-box;
}



/* Slide wrapper */
.dv-content-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  /* VAŽNO: bez negativnih trikova */
  padding-top: 0;
  margin-top: 0;

  /* spriječi unutarnji scroll na desktopu */
  overflow: hidden;
  box-sizing: border-box;
}


/* Mobile/Tablet: koristi normalan scroll (bez 100vh locka) */
@media (max-width: 1024px) {
  .dv-content-viewport {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
    display: block;
    padding-top: 0; /* na mobile nema sticky-offset locka */
  }

  .dv-content-slide {
    height: auto;
    display: block;
    overflow: visible;
  }
}


/* =========================
   LEFT RAIL – GLOBALNI SHELL
   ========================= */

.dv-left-rail-shell {
  position: fixed;
  top: 50vh; /* centrirano po visini */
  left: var(--dv-rail-left); /* var(--layout-side-offset, 8vw);*/
  transform: translateY(-50%);
  width: var(--dv-rail-w); /* 220px;*/
  z-index: 910;
  padding-left: var(--dv-rail-text-offset); /* prostor za "liniju" uz tekst */
  outline: none;
  background: transparent;
  box-shadow: none;
}

/* Lista i stavke – bez bullet-a, bez margina */
.dv-left-rail-shell ul,
.dv-left-rail-shell li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dv-left-rail-shell .eael-simple-menu {
  margin: 0;
  padding: 0;
}

/* Slider / vertikalna linija uz stavke - svaka stavka */
.dv-left-rail-shell .eael-simple-menu li {
  margin: var(--dv-menu-item-gap) 0;
  background: transparent;
  position: relative;
  padding-left: 6px; /* malo mjesta za liniju */
}

/* Linkovi – primary navigation (Rimac-style) */
.dv-left-rail-shell .eael-simple-menu li > a {
  display: inline-block;
  padding: 0;

  /* Typography */
  font-size: var(--font-size-menu, 15px); /* mrvicu manje, premium */
  font-weight: 300;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.16em;

  color: #ffffff;
  background: transparent;
  text-decoration: none;

  /* Interaction */
  transition:
    color 0.2s ease-out,
    transform 0.2s ease-out;
    
    white-space: nowrap;
}


.dv-left-rail-shell .eael-simple-menu li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ffffff;
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out,
    background-color 0.2s ease-out;
}

/* Hover – pojavi se bijela linija */
.dv-left-rail-shell .eael-simple-menu li:hover::before {
  opacity: 0.5;
  transform: scaleY(1);
}

/* Aktivna stavka – puna linija */
.dv-left-rail-shell .eael-simple-menu li.current-menu-item::before {
  opacity: 1;
  transform: scaleY(1);
  background: var(--color-accent-warm);
}


/* Hover + aktivna stavka (WordPress current-menu-item) */
.dv-left-rail-shell .eael-simple-menu li:hover > a,
.dv-left-rail-shell .eael-simple-menu li.current-menu-item > a {
  color: var(--color-accent-warm);
  transform: translateX(4px);
}

/* =========================
   DESKTOP: bez scrolla (sav sadržaj u dv-content-viewport)
   ========================= */

@media (min-width: 1025px) {
  body:not(.elementor-editor-active) {
    overflow: hidden;
  }
}

/* =========================
   HOVER SYSTEM – utilities
   ========================= */

.dv-media-frame {
  border-radius: inherit;
  overflow: hidden;
}

.dv-overlay-panel {
  background: var(--dv-overlay-bg);
  backdrop-filter: blur(var(--dv-overlay-blur));
  transition:
    opacity var(--dv-hover-dur) ease,
    transform var(--dv-hover-dur) ease;
}


/* ======================================================
   GLOBAL: center slide titles (dv-section-title)
   ====================================================== */
.dv-section-title{
  text-align: center;
  width: 100%;
}




/* =========================
   HOME – hero ekran
   ========================= */
/* Svi viewporti već imaju height:100vh i centriranje preko dv-content-viewport + dv-content-slide */

/* Unutarnji wrapper za home */
.dv-home-hero {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;

  padding-inline: clamp(14px, 2.2vw, 28px);
  box-sizing: border-box;

  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Glavni naslov */
.dv-home-title {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Podnaslov */
.dv-home-subtitle {
  font-size: clamp(16px, 1.8vw, 22px);
  color: var(--color-text-muted);
}




/* =========================
   HOME – layout + vertikalna pozicija (desktop)
   ========================= */
@media (min-width: 1025px) {

  /* 1) osnova: content zona ispod sticky headera */
  body.home.page-id-79 .dv-content-viewport {
    height: 100vh !important;
    padding-top: var(--dv-scroll-offset, 0px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.home.page-id-79 .dv-content-slide {
  height: calc(100vh - var(--dv-scroll-offset, 0px)) !important;
  padding-top: var(--dv-home-hero-top-pad, 64px) !important;
  padding-bottom: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

  body.home.page-id-79 .dv-home-hero {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }

/* anti-clipping: widgeti mogu biti visible, ali HERO container mora CLIPATI pozadinu */
body.home.page-id-79 .dv-page-inner.dv-home-hero{
  overflow: hidden !important; /* KLJUČ: background nikad ne ide pod meni */
}

body.home.page-id-79 .dv-page-inner.dv-home-hero .elementor-widget,
body.home.page-id-79 .dv-page-inner.dv-home-hero .elementor-widget-container{
  overflow: visible !important;
}

  body.home.page-id-79 .dv-page-inner.dv-home-hero .dv-home-title .elementor-heading-title {
    line-height: 1.15;
    padding-top: 0.12em;
    margin: 0;
  }

/* 3) Home hero vertical placement (safe, no clipping) */
body.home.page-id-79{
  --dv-home-hero-top-pad: clamp(0px, 0.5vh, 12px);
--dv-home-hero-shift: clamp(-120px, -10vh, -220px);
}

body.home.page-id-79 .dv-home-hero{
  transform: translateY(var(--dv-home-hero-shift));
}
}





/* =========================
   HOME — HERO BG (FINAL)
   - baked fade image (dv_Home_1_fin.webp)
   - NO CSS mask/filter fade (image already has it)
   - prevent 1cm top cut (stop parent clipping)
   ========================= */
@media (min-width: 1025px){

  /* Keep your existing tuning vars (as needed) */
  body.home.page-id-79{
    --dv-home-hero-ar: 1200 / 700;
    --dv-home-hero-bg-pos-y: 50%; /* ako želiš kadar gore/dolje, mijenjaj samo ovo */
  }

  /* ✅ STOP PARENT CLIPPING (spasonosni fix) */
  body.home.page-id-79 .dv-content-viewport,
  body.home.page-id-79 .dv-content-slide{
    overflow: visible !important;
  }
  body.home.page-id-79{
    overflow-x: hidden;
  }

  /* HERO box */
  body.home.page-id-79 .dv-page-inner.dv-home-hero{
    max-width: 1100px !important;
    margin: 0 auto !important;
    width: 100%;

    aspect-ratio: var(--dv-home-hero-ar);

    position: relative;
    overflow: hidden !important; /* hero sam clipa pozadinu */
    isolation: isolate;

    padding-inline: clamp(14px, 2.2vw, 28px) !important;
    padding-bottom: clamp(22px, 3.6vh, 90px) !important;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  /* ✅ Background image (show FULL image, no crop, no zoom) */
  body.home.page-id-79 .dv-page-inner.dv-home-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background-image: var(--dv-home-hero-bg);
    background-repeat: no-repeat;
    background-size: contain;              /* cijela slika vidljiva */
    background-position: 50% var(--dv-home-hero-bg-pos-y);

    /* fade je u samoj slici -> NE diraj */
    -webkit-mask-image: none;
    mask-image: none;
    filter: none;
    opacity: 1;

    z-index: 0;
  }

  /* sadržaj iznad svega */
  body.home.page-id-79 .dv-page-inner.dv-home-hero > *{
    position: relative;
    z-index: 2;
  }

    /* Title + subtitle — FULL-WIDTH strip (within hero), fade near strip edges */
body.home.page-id-79 .dv-home-title,
body.home.page-id-79 .dv-home-subtitle{
  width: 100%;
}

/* HOME hero spacing: push title up, subtitle down (visual only, no layout reflow) */
body.home.page-id-79{
  
  --dv-home-title-shift: clamp(56px, 10vh, 156px);
  --dv-home-subtitle-shift: clamp(42px, 7.8vh, 126px);

}

body.home.page-id-79 .dv-home-title{
  transform: translateY(calc(var(--dv-home-title-shift) * -1));
  will-change: transform;
}

body.home.page-id-79 .dv-home-subtitle{
  transform: translateY(var(--dv-home-subtitle-shift));
  will-change: transform;
}



/* zajedničko: strip je 100% širine hero-a (1100px), pa fade više ne kreće uz tekst */
body.home.page-id-79 .dv-home-title .elementor-widget-container,
body.home.page-id-79 .dv-home-subtitle .elementor-widget-container{
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;

  padding: 10px 0;         /* bez “pill” feel-a */
  border-radius: 10px;     /* blago, ali nije pill */
  border: 0 !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* fade počinje gotovo na rubu stripa (ne uz tekst) */
  background: linear-gradient(90deg,
    rgba(7,13,24,0.00) 0%,
    rgba(7,13,24,0.10) 3%,
    rgba(7,13,24,0.55) 10%,
    rgba(7,13,24,0.68) 50%,
    rgba(7,13,24,0.55) 90%,
    rgba(7,13,24,0.10) 97%,
    rgba(7,13,24,0.00) 100%
  );
}

/* Subtitle: spriječi lomljenje u 2 reda (desktop) */
body.home.page-id-79 .dv-home-subtitle .elementor-widget-container{
  white-space: nowrap;
}

/* Ako Elementor ipak stavlja tekst u <p>, osiguraj i tu */
body.home.page-id-79 .dv-home-subtitle .elementor-widget-container p{
  margin: 0;
  white-space: nowrap;
}
    
    
}


/* =========================
   MULTI-SLIDE – track + subslides (global)
   ========================= */

.dv-subslide-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Svaki sub-slide zauzima 100% viewport širine */
.dv-subslide {
  flex: 0 0 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  /* KLJUČ: padding mora biti unutar 100% visine (inače scrollbar) */
  box-sizing: border-box;

  /* scroll offset je gore na dv-content-viewport — ovdje NE SMIJE biti */
  padding-top: 8px; /* anti-font-clipping “safe top” (ne primjećuje se vizualno) */

  /* rezerviraj prostor za navigaciju dolje (da content ne upadne ispod) */
  padding-bottom: calc(var(--dv-slide-nav-h, 64px) + 20px);

  overflow: hidden;
}

/* Unutra i dalje koristimo dv-page-inner kao sadržajni okvir */
.dv-subslide .dv-page-inner {
  max-width: 1100px;
  width: 100%;
}


/* =========================
   Navigacija sub-slidea (strelice + crtice) – FINAL
   - bez “jump” efekta (nema translateY na hover/active)
   - točkice -> crtice s fill efektom
   ========================= */

.dv-subslide-nav{
 
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  transform: none;
 
 /*
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  transform: translateX(-50%);
*/

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  opacity: 1;
 /* pointer-events: auto;*/
 pointer-events: auto;

  z-index: 9999;

  padding: 8px 14px;
  border-radius: 999px;

  background: transparent;
  border: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Desktop: centriraj prema content području (rail-aware) */
@media (min-width: 1025px){
  .dv-subslide-nav{
    padding-left: calc(
      var(--dv-rail-left) + var(--dv-rail-w) + var(--dv-rail-gap) + var(--dv-content-nudge)
    ) !important;
    padding-right: var(--dv-content-right-gutter) !important;
  }
   .dv-subslide-nav .dv-subslide-arrow{ display: none !important; }
}

/* Strelice (prev/next) */
.dv-subslide-nav .dv-subslide-arrow{
  pointer-events: auto;

  width: 40px;
  height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.85);

  background: rgba(0,0,0,0.10);
  background-color: rgba(0,0,0,0.10) !important; /* ubij pink iz reset.css */

  color: #ffffff;
  font-size: 18px;
  line-height: 1;

  cursor: pointer;
  text-decoration: none;

  outline: none;
  box-shadow: none;

  padding: 0;
  font-family: inherit;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

/* Hover/Active: “premium” bez pomicanja */
.dv-subslide-nav .dv-subslide-arrow:hover,
.dv-subslide-nav .dv-subslide-arrow--active{
  transform: none !important; /* kill jump */

  background-color: rgba(0,0,0,0.55) !important;
  border-color: var(--color-accent-warm) !important;
  color: var(--color-accent-warm) !important;

  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

/* Dots wrapper */
.dv-subslide-dots{
  display: flex;
  gap: 10px;
}

/* Dot -> dash */
.dv-subslide-nav .dv-subslide-dot{
  width: 22px;
  height: 5px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.12);
  background-color: rgba(255,255,255,0.12) !important;

  margin: 0;
  padding: 0;

  cursor: pointer;
  display: inline-block;

  position: relative;
  overflow: hidden;

  appearance: none;
  -webkit-appearance: none;

  transform: none !important; /* kill scale jitter */

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

/* Fill layer */
.dv-subslide-nav .dv-subslide-dot::before{
  content: "";
  position: absolute;
  inset: 0;

  background: var(--color-accent-warm);

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
}

/* Hover */
.dv-subslide-nav .dv-subslide-dot:hover{
  border-color: var(--color-accent-warm) !important;
}
.dv-subslide-nav .dv-subslide-dot:hover::before{
  transform: scaleX(1);
}

/* Active (dot za currentIndex) */
.dv-subslide-nav .dv-subslide-dot--active{
  border-color: var(--color-accent-warm) !important;
}
.dv-subslide-nav .dv-subslide-dot--active::before{
  transform: scaleX(1);
}

/* Focus (tipkovnica): makni default, ali pokaži naš “ring” */
.dv-subslide-nav .dv-subslide-arrow:focus,
.dv-subslide-nav .dv-subslide-dot:focus{
  outline: none;
}

.dv-subslide-nav .dv-subslide-arrow:focus-visible,
.dv-subslide-nav .dv-subslide-dot:focus-visible{
  box-shadow: 0 0 0 3px var(--color-accent-warm-soft) !important;
  border-color: var(--color-accent-warm) !important;
}

.dv-subslide-nav .dv-subslide-dots,
.dv-subslide-nav .dv-subslide-dot{
  pointer-events: auto;
}

/* Mobile – malo bliže dnu + malo manji elementi */
@media (max-width: 1024px){
  .dv-subslide-nav{
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    padding: 7px 12px;
    gap: 12px;
  }

  .dv-subslide-nav .dv-subslide-arrow{
    width: 36px;
    height: 36px;
    font-size: 17px;
  }

  .dv-subslide-nav .dv-subslide-dot{
    width: 20px;
    height: 5px;
  }
}



/* =========================
   3D PRINTING – Slide 1: Technologies we use (RESPONSIVE + PREMIUM)
   ========================= */

/* Važno: radimo samo za Service/Tech slide (da ne dira druge sekcije) */
#service .dv-subslide--tech .dv-page-inner{
  /* da grid može “disati” unutar 100% visine subslidea */
  height: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Title: manje prostora, ali isti premium look */
#service .dv-subslide--tech .dv-section-title{
  margin-bottom: clamp(14px, 2.2vh, 26px);
}

/* Grid zauzme preostalu visinu (da kartice ne upadnu u nav zonu) */
#service .dv-subslide--tech .dv-tech-grid{
  flex: 1 1 auto;
  min-height: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);

  align-items: stretch; /* sve kartice iste visine */
}

/* Kartica = jedan “chip” s full-bleed slikom */
#service .dv-subslide--tech .dv-tech-card{
  position: relative;
  overflow: hidden;
  border-radius: 32px;

  background: rgba(24, 24, 27, 0.95);
  --dv-tech-title-zone: clamp(96px, 12vh, 128px);

  /* ključ: kartica NE SMIJE biti viša od prostora koji joj grid daje */
  height: min(clamp(460px, 82vh, 860px), 100%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: clamp(16px, 2.2vh, 22px);
  gap: 10px;

  box-sizing: border-box;
}

/* Slika “ispod svega” (preko cijelog chipa) */
#service .dv-subslide--tech .dv-tech-card .elementor-widget-image{
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

#service .dv-subslide--tech .dv-tech-card .elementor-widget-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* default: svijetli/bijelkasti blur */
  filter: none;
  transform: scale(1.02);

  transition:
    filter var(--dv-hover-dur-long) ease,
    transform var(--dv-hover-dur-long) ease;
}

/* Lagani “wash” layer da tekst bude čitljiv na blur */
#service .dv-subslide--tech .dv-tech-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.18) 55%,
    rgba(255,255,255,0.10)
  );
  opacity: 0;
  transition: opacity var(--dv-hover-dur) ease;
  
}

/* Title + text su “iznad slike”, centrirani */
#service .dv-subslide--tech .dv-tech-card .elementor-widget-heading,
#service .dv-subslide--tech .dv-tech-card .elementor-widget-text-editor{
  position: relative;
  z-index: 2;

  width: 100%;
  text-align: center;

  margin: 0;
}

/* Makni stari “negativni” overlap */
#service .dv-subslide--tech .dv-tech-card .elementor-widget-heading{
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 0;
  top: clamp(18px, 2.4vh, 26px);

  transform: translateY(0);
  transition: top 240ms ease, transform 240ms ease;

  z-index: 2;
}

/* Title (FDM/SLS/SLA) — default tamno, hover postane pill */
#service .dv-subslide--tech .dv-tech-card .elementor-widget-heading .elementor-heading-title{
  display: inline-block;

  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;

  color: #ffffff;
  background-color: rgba(24, 24, 27, 0.72);
  padding: 10px 18px;
  
  border-radius: 999px;

  transition:
    color var(--dv-hover-dur) ease,
    background-color var(--dv-hover-dur) ease,
    padding var(--dv-hover-dur) ease;
}

/* Opis — default tamno sivo, gore ispod title */
#service .dv-subslide--tech .dv-tech-card .elementor-widget-text-editor{
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(24, 24, 27, 0.70);

/*
  max-width: 52ch;
  margin-inline: auto;
*/

  transition: opacity var(--dv-hover-dur) ease, transform var(--dv-hover-dur) ease;
    
  position: absolute;
  left: clamp(16px, 2.2vh, 22px);
  right: clamp(16px, 2.2vh, 22px);

  top: 0;
  bottom: 0;
  padding-top: var(--dv-tech-title-zone);
  padding-bottom: clamp(20px, 3vh, 28px);

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  transform: none;  
  
  box-sizing: border-box;
  width: auto;
  overflow-wrap: anywhere;
}

#service .dv-subslide--tech .dv-tech-card .elementor-widget-text-editor .elementor-widget-container{
  width: 100%;
  max-width: 100%;
  margin: 0;
}

#service .dv-subslide--tech .dv-tech-card .elementor-widget-text-editor p{
  margin: 0;
}


/* ===== Tech cards — INVERT DEFAULT (desktop only) ===== */
@media (min-width: 1025px){
  /* Default: TITLE centered */
  #service .dv-subslide--tech .dv-tech-card .elementor-widget-heading{
    top: 50%;
    transform: translateY(-50%);
  }

  /* Default: TITLE looks like pill (for readability on blur) */
  #service .dv-subslide--tech .dv-tech-card .elementor-widget-heading .elementor-heading-title{
    color: #ffffff;
    background-color: rgba(24, 24, 27, 0.72);
    padding: 10px 18px;
  }

  /* Default: TEXT hidden */
  #service .dv-subslide--tech .dv-tech-card .elementor-widget-text-editor{
    opacity: 0;
    transform: translateY(6px);
  }
}


/* HOVER (INVERT): blur + wash ON for readability + show text + title goes top */
#service .dv-subslide--tech .dv-tech-card:hover .elementor-widget-image img,
#service .dv-subslide--tech .dv-tech-card:focus-within .elementor-widget-image img{
  filter: blur(16px) brightness(1.26) contrast(0.86) saturate(0.85);
  transform: scale(1.10);
}

#service .dv-subslide--tech .dv-tech-card:hover::after,
#service .dv-subslide--tech .dv-tech-card:focus-within::after{
  opacity: 1;
}

/* show text on hover */
#service .dv-subslide--tech .dv-tech-card:hover .elementor-widget-text-editor,
#service .dv-subslide--tech .dv-tech-card:focus-within .elementor-widget-text-editor{
  opacity: 1;
  transform: translateY(0);
}

/* title jumps to top on hover (your new behavior) */
#service .dv-subslide--tech .dv-tech-card:hover .elementor-widget-heading,
#service .dv-subslide--tech .dv-tech-card:focus-within .elementor-widget-heading{
  top: clamp(18px, 2.4vh, 26px);
  transform: translateY(0);
}

/* Tech — HOVER: title becomes anthracite and loses pill */
#service .dv-subslide--tech .dv-tech-card:hover .elementor-widget-heading .elementor-heading-title,
#service .dv-subslide--tech .dv-tech-card:focus-within .elementor-widget-heading .elementor-heading-title{
  color: rgba(24, 24, 27, 0.82);
  background-color: transparent;
  padding: 0;
}


/* Low-height laptop screens: prevent text clipping inside the chip */
@media (max-height: 820px){
  /* malo smanji “title zonu” da ostane više mjesta za opis */
  #service .dv-subslide--tech .dv-tech-card{
    --dv-tech-title-zone: 92px;
  }

  /* stisni tipografiju + makni vertikalno centriranje (da sve stane) */
  #service .dv-subslide--tech .dv-tech-card .elementor-widget-text-editor{
    font-size: 14px;
    line-height: 1.36;
    letter-spacing: 0.03em;

    justify-content: flex-start; /* daje više mjesta dolje, nema rezanja */
    padding-bottom: 16px;        /* manji bottom padding */
  }
}

/* Extra low-height fallback (ako još uvijek reže na baš niskom prozoru) */
@media (max-height: 740px){
  #service .dv-subslide--tech .dv-tech-card .elementor-widget-text-editor{
    font-size: 13px;
    line-height: 1.32;
  }
}


/* Mobile – kartice ispod sebe (scroll je OK) */
@media (max-width: 1024px){
  #service .dv-subslide--tech .dv-tech-grid{
    grid-template-columns: 1fr;
  }

  #service .dv-subslide--tech .dv-tech-card{
    height: auto;
    aspect-ratio: 9 / 16; /* stabilna visina kad se stacka */
  }

  #service .dv-subslide--tech .dv-section-title{
    font-size: 26px;
    text-align: left;
  }
}





/* =========================
   3D PRINTING – Slide 2: 3D PRINTING FARM (CLEAN / ONE BLOCK)
   Goal:
   - Text LEFT (50%) vertically centered vs video
   - Video RIGHT (50%) ~square, no ugly top/bottom crop
   Video frame: 1118 x 1080 => ~1.035 : 1
   ========================= */

#service .dv-subslide--farm{
  /* Ako želiš savršeno kvadratno: stavi 1 / 1 */
  --dv-farm-media-ar: 1118 / 1080;

  --dv-farm-gap: clamp(16px, 2.2vw, 28px);
  --dv-farm-radius: 32px;

  /* “Cap” po visini ekrana (smanjuje chip na niskim laptopima BEZ da ga spljošti u panoramu) */
  --dv-farm-chip-maxw: clamp(520px, 62vh, 760px);
}

/* Inner */
#service .dv-subslide--farm .dv-page-inner{
  max-width: 1100px;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Title spacing */
#service .dv-subslide--farm .dv-section-title{
  margin-bottom: clamp(12px, 2vh, 22px);
}

/* HERO: forsiraj layout (Elementor container je e-flex -> koristimo flex i preuzimamo kontrolu) */
#service .dv-subslide--farm .dv-farm-hero{
  flex: 1 1 auto;
  min-height: 0;

  display: flex !important;
  flex-direction: row-reverse !important;  /* DOM: video pa tekst -> video desno */
  flex-wrap: nowrap !important;

  align-items: center !important;          /* OVO je ključ da tekst ne sjedi na dnu */

  /* PROMJENA: ne “space-between” (razvuče ih na rubove), nego grupiraj u sredinu */
  justify-content: center;

  gap: var(--dv-farm-gap);

  /* reset starog “chip on hero” looka */
  margin-top: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* ===== LEFT: TEXT (50%) ===== */
#service .dv-subslide--farm .dv-farm-hero > .elementor-widget-text-editor{
  flex: 1 1 50%;
  max-width: 50%;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  /* hard reset ako ga je nešto ranije “zakucalo” */
  position: static !important;
  inset: auto !important;
  transform: none !important;

  display: flex !important;
  align-items: center !important;          /* centriranje po visini unutar vlastitog stupca */
  justify-content: center !important;

  align-self: center !important;           /* dodatni airbag */
}

#service .dv-subslide--farm .dv-farm-hero > .elementor-widget-text-editor > .elementor-widget-container{
  width: 100%;
  max-width: 56ch;
  padding-inline: clamp(10px, 1.6vw, 18px);
  box-sizing: border-box;
  text-align: center;
}

#service .dv-subslide--farm .dv-farm-hero > .elementor-widget-text-editor p{
  margin: 0;
  font-size: clamp(13px, 1.65vh, 15px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ===== RIGHT: VIDEO (50%) ===== */
#service .dv-subslide--farm .dv-farm-hero > .elementor-widget-html{
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  /* centriraj chip unutar stupca ako je cap-ovan max širinom */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* CHIP: ovdje je bitno da visina NIJE 100% (da aspect-ratio radi) */
#service .dv-subslide--farm .dv-farm-hero > .elementor-widget-html > .elementor-widget-container{
  width: 100%;
  max-width: var(--dv-farm-chip-maxw);
  aspect-ratio: var(--dv-farm-media-ar);
  height: auto;                            /* <- ključ */

  border-radius: var(--dv-farm-radius);
  overflow: hidden;
  background: rgba(24, 24, 27, 0.95);
}

/* Video fill (bez top/bottom cropa jer chip drži pravi AR) */
#service .dv-subslide--farm .dv-farm-hero video,
#service .dv-subslide--farm .dv-farm-hero .dv-farm-video{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;

  filter: grayscale(var(--dv-media-grayscale)) brightness(0.92);
  transition: filter var(--dv-hover-dur-long) ease;
}

#service .dv-subslide--farm .dv-farm-hero > .elementor-widget-html:hover video{
  filter: none;
}

/* Low-height laptop: malo smanji “cap” da se sve lijepo smjesti bez panorame */
@media (min-width: 1025px) and (max-height: 820px){
  #service .dv-subslide--farm{
    --dv-farm-chip-maxw: clamp(460px, 54vh, 660px);
  }

  #service .dv-subslide--farm .dv-farm-hero > .elementor-widget-text-editor p{
    font-size: 14px;
    line-height: 1.52;
  }
}

/* Tablet/mobile: stack, TEXT first */
@media (max-width: 1024px){
  #service .dv-subslide--farm .dv-farm-hero{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #service .dv-subslide--farm .dv-farm-hero > .elementor-widget-text-editor{ order: 1; max-width: 100%; }
  #service .dv-subslide--farm .dv-farm-hero > .elementor-widget-html{ order: 2; max-width: 100%; justify-content: center; }

  #service .dv-subslide--farm .dv-farm-hero > .elementor-widget-html > .elementor-widget-container{
    max-width: 100%;
    border-radius: 24px;
  }
}











/* =========================
   3D PRINTING – Slide 3: XXL DIMENSIONS (CLEAN / ONE BLOCK)
   - Text LEFT (50%) vertically centered vs video
   - Video RIGHT (50%) portrait-ish, no ugly top/bottom crop
   Video frame: 1080 x 1440 => 3 / 4
   ========================= */

#service .dv-subslide--xxl{
  --dv-xxl-media-ar: 1080 / 1440; /* = 3/4 */

  /* TIGHTER GAP so text+video feel like one “unit” */
  --dv-xxl-gap: clamp(10px, 1.6vw, 18px);

  --dv-xxl-radius: 32px;

  /* Cap by viewport height so portrait video doesn't smash into nav area */
  --dv-xxl-chip-maxw: clamp(360px, 48vh, 680px);
}

/* Unutarnji okvir */
#service .dv-subslide--xxl .dv-page-inner{
  max-width: 1100px;
  width: 100%;
  height: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;
}

/* ---- Desktop (isti “FARM” pattern) ---- */
@media (min-width: 1025px){

  /* Preuzmi kontrolu nad layoutom (pregazi stari grid) */
  #service .dv-subslide--xxl .dv-xxl-layout{
    display: flex !important;
    flex-direction: row-reverse !important; /* DOM: visual pa copy -> copy lijevo, visual desno */
    flex-wrap: nowrap !important;

    align-items: center !important;         /* ključ: tekst ne sjedi na dnu */

    /* KLJUČ: ne “space-between” (razvuče ih na rubove), nego grupiraj u sredinu */
    justify-content: center !important;

    gap: var(--dv-xxl-gap);

    margin-top: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* LEFT: TEXT (50%) */
  #service .dv-subslide--xxl .dv-xxl-copy{
    flex: 1 1 50%;
    max-width: 50%;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;

    /* KLJUČ: gurni sadržaj na DESNI rub lijeve kolone (prema videu) */
    justify-content: flex-end !important;

    align-self: center !important;
  }

  /* Centriraj sadržaj unutar copy containera (radi i ako unutra ima više widgeta) */
  #service .dv-subslide--xxl .dv-xxl-copy > .e-con-inner,
  #service .dv-subslide--xxl .dv-xxl-copy > .elementor-element,
  #service .dv-subslide--xxl .dv-xxl-copy > .elementor-widget,
  #service .dv-subslide--xxl .dv-xxl-copy > .elementor-widget > .elementor-widget-container{
    width: 100%;
    max-width: 56ch;
    box-sizing: border-box;
    padding-inline: clamp(10px, 1.6vw, 18px);
    text-align: center;
  }

  #service .dv-subslide--xxl .dv-xxl-copy p{
    margin: 0;
    font-size: clamp(13px, 1.65vh, 15px);
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-muted);
  }

  /* RIGHT: MEDIA (50%) */
  #service .dv-subslide--xxl .dv-xxl-visual{
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;

    /* KLJUČ: gurni chip na LIJEVI rub desne kolone (prema tekstu) */
    justify-content: flex-start !important;

    align-items: center;
  }

  /* CHIP (HTML widget) */
  #service .dv-subslide--xxl .dv-xxl-visual .elementor-widget-html{
    width: 100%;
    display: flex;

    /* isto: ulijevo */
    justify-content: flex-start !important;

    align-items: center;
  }

  #service .dv-subslide--xxl .dv-xxl-visual .elementor-widget-html > .elementor-widget-container{
    width: 100%;
    max-width: var(--dv-xxl-chip-maxw);

    aspect-ratio: var(--dv-xxl-media-ar);
    height: auto; /* ključ: da aspect-ratio radi i da ne dobiješ “16/9 prenizak” look */

    border-radius: var(--dv-xxl-radius);
    overflow: hidden;
    background: rgba(24, 24, 27, 0.95);

    /* UGRAĐENO iz “airbag”:
       pomaže da browser stvarno “odreže” video po radiusu */
    transform: translateZ(0);
  }

  /* Video fill (bez ružnog cropa jer chip drži pravi AR) */
  #service .dv-subslide--xxl .dv-xxl-visual video,
  #service .dv-subslide--xxl .dv-xxl-visual .dv-xxl-video{
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    filter: grayscale(var(--dv-media-grayscale)) brightness(0.92);
    transition: filter var(--dv-hover-dur-long) ease;

    /* UGRAĐENO iz “airbag”: dodatno osiguranje */
    border-radius: inherit;
  }

  #service .dv-subslide--xxl .dv-xxl-visual .elementor-widget-html:hover video{
    filter: none;
  }

  /* (Opcionalno) ako privremeno ostane image widget */
  #service .dv-subslide--xxl .dv-xxl-visual .elementor-widget-image > .elementor-widget-container{
    width: 100%;
    max-width: var(--dv-xxl-chip-maxw);
    aspect-ratio: var(--dv-xxl-media-ar);
    border-radius: var(--dv-xxl-radius);
    overflow: hidden;
    background: rgba(24, 24, 27, 0.95);

    /* isto kao i za video chip (stabilniji clipping) */
    transform: translateZ(0);
  }

  #service .dv-subslide--xxl .dv-xxl-visual .elementor-widget-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    border-radius: inherit;
  }
}

/* Low-height laptop: smanji cap da stane “premium” bez panorame */
@media (min-width: 1025px) and (max-height: 820px){
  #service .dv-subslide--xxl{
    --dv-xxl-chip-maxw: clamp(320px, 42vh, 600px);
  }

  #service .dv-subslide--xxl .dv-xxl-copy p{
    font-size: 14px;
    line-height: 1.52;
  }
}

/* Tablet/mobile: stack, TEXT first */
@media (max-width: 1024px){
  #service .dv-subslide--xxl .dv-xxl-layout{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px;
  }

  #service .dv-subslide--xxl .dv-xxl-copy{ order: 1; max-width: 100%; }
  #service .dv-subslide--xxl .dv-xxl-visual{ order: 2; max-width: 100%; justify-content: center; }

  #service .dv-subslide--xxl .dv-xxl-visual .elementor-widget-html > .elementor-widget-container{
    max-width: 100%;
    border-radius: 24px;

    /* i na mobile: stabilniji clipping */
    overflow: hidden;
    transform: translateZ(0);
  }

  #service .dv-subslide--xxl .dv-xxl-visual video,
  #service .dv-subslide--xxl .dv-xxl-visual .dv-xxl-video{
    border-radius: inherit;
  }
}







/* =========================
   3D PRINTING – Slide 4: Post-processing (MATCH "Technologies we use")
   - 4 chips (25% each) with full-bleed blur image
   - Title drops to center on hover (pill)
   - Text always stays inside chip + centered
   - Long titles wrap / break safely (no overflow)
   ========================= */

/* Scope only to Service > Post */
#service .dv-subslide--post .dv-page-inner{
  height: 100%;
  min-height: 0;

  max-width: 1100px;
  width: 100%;

  display: flex;
  flex-direction: column;
}

/* Title spacing (premium, like Tech slide) */
#service .dv-subslide--post .dv-section-title{
  margin-bottom: clamp(14px, 2.2vh, 26px);
}

/* Grid takes remaining height (so cards don't fall into nav zone) */
#service .dv-subslide--post .dv-post-grid{
  flex: 1 1 auto;
  min-height: 0;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 22px);

  align-items: stretch;
}

/* Card = chip (same philosophy as dv-tech-card) */
#service .dv-subslide--post .dv-post-card{
  position: relative;
  overflow: hidden;
  border-radius: 32px;

  background: rgba(24, 24, 27, 0.95);

  /* internal safe paddings */
  --dv-post-pad-x: clamp(14px, 1.6vw, 18px);
  --dv-post-pad-b: clamp(16px, 2.6vh, 22px);

  /* “title zone” reserved at top (prevents text fighting the title) */
  --dv-post-title-zone: clamp(84px, 11vh, 112px);

  /* IMPORTANT: cap by available grid cell height */
  height: min(clamp(280px, 66vh, 560px), 100%);

  box-sizing: border-box;
}

/* Full-bleed image under everything */
#service .dv-subslide--post .dv-post-card .elementor-widget-image{
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
#service .dv-subslide--post .dv-post-card .elementor-widget-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* strong, “whitish” blur like Tech slide */
  filter: none;
  transform: scale(1.02);

  transition:
    filter var(--dv-hover-dur-long) ease,
    transform var(--dv-hover-dur-long) ease;
}

/* Light wash layer for readability (same as Tech) */
#service .dv-subslide--post .dv-post-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.18) 55%,
    rgba(255,255,255,0.10)
  );
  opacity: 0;
  transition: opacity var(--dv-hover-dur) ease;
}

/* Title + text above image */
#service .dv-subslide--post .dv-post-card .elementor-widget-heading,
#service .dv-subslide--post .dv-post-card .elementor-widget-text-editor{
  position: relative;
  z-index: 2;

  /* ključ: ne smije ostati width:100% jer ide absolute + left/right */
  width: auto !important;

  margin: 0 !important;
  text-align: center;
  box-sizing: border-box;
}

/* DEFAULT: title u sredini, tekst skriven */
#service .dv-subslide--post .dv-post-card .elementor-widget-heading{
  position: absolute;
  left: var(--dv-post-pad-x);
  right: var(--dv-post-pad-x);
  top: 50%;
  transform: translateY(-50%);
  transition: top 240ms ease, transform 240ms ease;
  z-index: 2;
  text-align: center;

  /* čitljivo preko čiste slike */
  color: #fff;
}

/* Title text: must NEVER overflow */
#service .dv-subslide--post .dv-post-card .elementor-widget-heading .elementor-heading-title{
  display: inline-block;
  max-width: 100%;

  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.12;

  color: #ffffff;
  background-color: rgba(24, 24, 27, 0.72);
  padding: 10px 16px;

  /* key: allow wrapping/breaking */
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;

  border-radius: 999px;

  transition:
    color var(--dv-hover-dur) ease,
    background-color var(--dv-hover-dur) ease,
    padding var(--dv-hover-dur) ease;
}


#service .dv-subslide--post .dv-post-card .elementor-widget-text-editor{
  position: absolute;
  left: var(--dv-post-pad-x);
  right: var(--dv-post-pad-x);
  top: var(--dv-post-title-zone);
  bottom: var(--dv-post-pad-b);
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dv-hover-dur) ease,
    transform var(--dv-hover-dur) ease;

  pointer-events: none;
}

#service .dv-subslide--post .dv-post-card .elementor-widget-text-editor .elementor-widget-container{
  width: 100%;
  max-width: 100%;
  margin: 0;

  /* key: wrap long strings */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

#service .dv-subslide--post .dv-post-card .elementor-widget-text-editor p{
  margin: 0;

  font-size: 14px;
  font-weight: 650;
  line-height: 1.42;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: rgba(24, 24, 27, 0.70);

  /* extra safety */
  max-width: 100%;
}

/* HOVER: unblur + hide text + title drops to center with pill */
#service .dv-subslide--post .dv-post-card:hover .elementor-widget-image img,
#service .dv-subslide--post .dv-post-card:focus-within .elementor-widget-image img{
  filter: blur(16px) brightness(1.26) contrast(0.86) saturate(0.85);
  transform: scale(1.10);
}
#service .dv-subslide--post .dv-post-card:hover::after,
#service .dv-subslide--post .dv-post-card:focus-within::after{
  opacity: 1;
}
#service .dv-subslide--post .dv-post-card:hover .elementor-widget-text-editor,
#service .dv-subslide--post .dv-post-card:focus-within .elementor-widget-text-editor{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#service .dv-subslide--post .dv-post-card:hover .elementor-heading-title,
#service .dv-subslide--post .dv-post-card:focus-within .elementor-heading-title{
  color: rgba(24, 24, 27, 0.82);
  background-color: transparent;
  padding: 0;
}
#service .dv-subslide--post .dv-post-card:hover .elementor-widget-heading,
#service .dv-subslide--post .dv-post-card:focus-within .elementor-widget-heading{
  top: clamp(16px, 2.6vh, 24px);;
  transform: none;
  
}

/* Low-height laptops: prevent clipping inside chip */
@media (max-height: 820px){
  #service .dv-subslide--post .dv-post-card{
    --dv-post-title-zone: 80px;
  }

  #service .dv-subslide--post .dv-post-card .elementor-widget-text-editor{
    align-items: flex-start;
    padding-bottom: 14px;
  }

  #service .dv-subslide--post .dv-post-card .elementor-widget-text-editor p{
    font-size: 13px;
    line-height: 1.34;
  }

  #service .dv-subslide--post .dv-post-card .elementor-widget-heading .elementor-heading-title{
    font-size: 16px;
    letter-spacing: 0.12em;
  }
}

/* Responsive: 2 per row, then 1 per row */
@media (max-width: 1200px){
  #service .dv-subslide--post .dv-post-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #service .dv-subslide--post .dv-post-card{
    height: auto;
    aspect-ratio: 9 / 16; /* stable height when stacking into rows */
  }
}

@media (max-width: 768px){
  #service .dv-subslide--post .dv-post-grid{
    grid-template-columns: 1fr;
  }

  #service .dv-subslide--post .dv-post-card{
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 24px;
  }
}





/* =========================
   PRODUCTION – Slides (two-col pattern) — FINAL (SAFE HEIGHT + PER-SLIDE AR)
   Applies to:
   - dv-subslide--prod-engineering  (video 1080x1920 => 9/16)
   - dv-subslide--prod-3dscanning   (image 1080x1221)
   ========================= */

#production.dv-content-viewport .dv-subslide--prod-engineering,
#production.dv-content-viewport .dv-subslide--prod-3dscanning{
  --dv-prod-gap: clamp(16px, 2.2vw, 28px);
  --dv-prod-radius: 32px;

  /* “Safe zones” so media never overlaps title or nav */
  --dv-prod-safe-top: clamp(10px, 2vh, 18px);
  --dv-prod-safe-bottom: calc(var(--dv-slide-nav-h, 64px) + clamp(14px, 2.2vh, 22px));

  /* default AR + cap (overridden per slide below) */
  --dv-prod-media-ar: 16 / 9;
  --dv-prod-chip-maxw: clamp(360px, 44vh, 640px);

  /* NEW: alignment control (default keeps your current behavior) */
  --dv-prod-media-justify: flex-end;

  /* NEW: micro nudge ( + = right, - = left ) */
  --dv-prod-media-nudge: 0px;
}

/* Engineering video: 1080x1920 => 9/16 (portrait) */
#production.dv-content-viewport .dv-subslide--prod-engineering{
  --dv-prod-media-ar: 1080 / 1920;

  /* portrait needs tighter cap so it doesn't grow into title/nav */
  --dv-prod-chip-maxw: clamp(240px, 32vh, 420px);

  /* KEY: "between flex-start and flex-end" for slide 1 */
  --dv-prod-media-justify: center;

  /* If you want it a bit more RIGHT than center, try: 8px / 12px */
  /* If you want it a bit more LEFT than center, try: -8px / -12px */
  /* --dv-prod-media-nudge: 10px; */
}

/* 3D scanning image: 1080x1221 */
#production.dv-content-viewport .dv-subslide--prod-3dscanning{
  --dv-prod-media-ar: 1080 / 1221;
  --dv-prod-chip-maxw: clamp(360px, 44vh, 640px);
}

/* Inner */
#production.dv-content-viewport .dv-subslide--prod-engineering .dv-page-inner,
#production.dv-content-viewport .dv-subslide--prod-3dscanning  .dv-page-inner{
  max-width: 1100px;
  width: 100%;
  height: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;
}

/* Center slide titles (H2) on these production slides */
#production.dv-content-viewport .dv-subslide--prod-engineering .dv-section-title,
#production.dv-content-viewport .dv-subslide--prod-3dscanning  .dv-section-title{
  text-align: center;
  margin-bottom: clamp(12px, 2vh, 22px);
}

/* Two-col layout */
@media (min-width: 1025px){

  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-two-col,
  #production.dv-content-viewport .dv-subslide--prod-3dscanning  .dv-prod-two-col{
    flex: 1 1 auto;
    min-height: 0;

    display: flex !important;
    flex-direction: row !important; /* text left, media right */
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: center !important; /* don’t stretch to edges */

    gap: var(--dv-prod-gap);

    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* LEFT: COPY (50%) — keep as-is */
  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-copy,
  #production.dv-content-viewport .dv-subslide--prod-3dscanning  .dv-prod-copy{
    flex: 1 1 50%;
    max-width: 50%;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
  }

  #production.dv-content-viewport .dv-prod-lead{
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.6;
    max-width: 52ch;
    margin-inline: auto;
  }

  /* RIGHT: MEDIA (50%) */
  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-media,
  #production.dv-content-viewport .dv-subslide--prod-3dscanning  .dv-prod-media{
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    justify-content: var(--dv-prod-media-justify) !important; /* NEW */
    align-items: center !important;
  }

  /* CHIP (for HTML widget) */
  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-media .elementor-widget-html,
  #production.dv-content-viewport .dv-subslide--prod-3dscanning  .dv-prod-media .elementor-widget-html{
    width: 100%;
    display: flex !important;
    justify-content: var(--dv-prod-media-justify) !important; /* NEW */
    align-items: center !important;
  }

  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-media .elementor-widget-html > .elementor-widget-container,
  #production.dv-content-viewport .dv-subslide--prod-3dscanning  .dv-prod-media .elementor-widget-html > .elementor-widget-container{
    width: auto !important;

    /* HARD LIMITS so it NEVER hits title/nav */
    max-width: min(
      var(--dv-prod-chip-maxw),
      calc(100vh - var(--dv-prod-safe-top) - var(--dv-prod-safe-bottom))
    );

    aspect-ratio: var(--dv-prod-media-ar);
    height: auto;

    border-radius: var(--dv-prod-radius);
    overflow: hidden;
    background: rgba(24, 24, 27, 0.95);

    /* keep clipping + allow tiny positional tweak */
    transform: translate3d(var(--dv-prod-media-nudge), 0, 0) translateZ(0);
  }

  /* VIDEO inside chip */
  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-media video,
  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-media .dv-prod-video{
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;

    filter: grayscale(var(--dv-media-grayscale)) brightness(0.92);
    transition: filter var(--dv-hover-dur-long) ease;
  }

  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-media .elementor-widget-html:hover video{
    filter: none;
  }

  /* IMAGE fallback (3D scanning likely uses Image widget) */
  #production.dv-content-viewport .dv-subslide--prod-3dscanning .dv-prod-media .elementor-widget-image > .elementor-widget-container{
    width: 100%;
    max-width: min(
      var(--dv-prod-chip-maxw),
      calc(100vh - var(--dv-prod-safe-top) - var(--dv-prod-safe-bottom))
    );

    aspect-ratio: var(--dv-prod-media-ar);
    height: auto;

    border-radius: var(--dv-prod-radius);
    overflow: hidden;
    background: rgba(24, 24, 27, 0.95);

    transform: translateZ(0);
  }

  #production.dv-content-viewport .dv-subslide--prod-3dscanning .dv-prod-media .elementor-widget-image img{
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;

    filter: grayscale(var(--dv-media-grayscale)) brightness(0.9);
    transition: filter var(--dv-hover-dur) ease;
  }

  #production.dv-content-viewport .dv-subslide--prod-3dscanning .dv-prod-media:hover .elementor-widget-image img{
    filter: none;
  }
}

/* Low-height laptop: tighten chip cap further */
@media (min-width: 1025px) and (max-height: 820px){
  #production.dv-content-viewport .dv-subslide--prod-engineering{
    --dv-prod-chip-maxw: clamp(240px, 34vh, 460px);
  }
  #production.dv-content-viewport .dv-subslide--prod-3dscanning{
    --dv-prod-chip-maxw: clamp(320px, 40vh, 560px);
  }
}

/* Tablet/mobile: stack */
@media (max-width: 1024px){
  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-two-col,
  #production.dv-content-viewport .dv-subslide--prod-3dscanning  .dv-prod-two-col{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px;
  }

  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-media,
  #production.dv-content-viewport .dv-subslide--prod-3dscanning  .dv-prod-media{
    justify-content: center;
  }

  #production.dv-content-viewport .dv-subslide--prod-engineering .dv-prod-media .elementor-widget-html > .elementor-widget-container,
  #production.dv-content-viewport .dv-subslide--prod-3dscanning  .dv-prod-media .elementor-widget-image > .elementor-widget-container{
    max-width: 100%;
    border-radius: 24px;
  }
}






/* =========================
   PRODUCTION – Slide 3: Materials (MATCH Post-processing / Tech style)
   - 4 chips (25% each) with full-bleed blur image
   - Title drops to center on hover (pill)
   - Text always stays inside chip + centered (NO right overflow)
   - Long titles wrap / break safely
   ========================= */

/* Scope ONLY to Production > Materials slide */
#production.dv-content-viewport .dv-subslide--prod-production .dv-page-inner{
  height: 100%;
  min-height: 0;

  max-width: 1100px;
  width: 100%;

  display: flex;
  flex-direction: column;
}

/* Title spacing (premium, like Tech/Post) */
#production.dv-content-viewport .dv-subslide--prod-production .dv-section-title{
  margin-bottom: clamp(14px, 2.2vh, 26px);
  text-align: center;
}

/* Grid takes remaining height */
#production.dv-content-viewport .dv-subslide--prod-production .dv-prod-materials-grid{
  flex: 1 1 auto;
  min-height: 0;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 22px);

  align-items: stretch;
}

/* Tile = chip (same philosophy as dv-post-card / dv-tech-card) */
#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile{
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: rgba(24, 24, 27, 0.95);

  /* internal safe paddings */
  --dv-mat-pad-x: clamp(14px, 1.6vw, 18px);
  --dv-mat-pad-b: clamp(16px, 2.6vh, 22px);

  /* reserved zone for title */
  --dv-mat-title-zone: clamp(84px, 11vh, 112px);

  /* IMPORTANT: cap by available grid cell height */
  height: min(clamp(280px, 66vh, 560px), 100%);

  box-sizing: border-box;
  isolation: isolate;

  /* airbag for radius clipping */
  transform: translateZ(0);
}

/* Full-bleed image layer (under everything) */
#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  border-radius: inherit;
  overflow: hidden;
}

#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-media .elementor-widget-image{
  position: absolute;
  inset: 0;
  margin: 0;
}

#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-media .elementor-widget-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* strong “whitish” blur like Tech/Post */
  filter: none;
  transform: scale(1.02);

  transition:
    filter var(--dv-hover-dur-long) ease,
    transform var(--dv-hover-dur-long) ease;

  border-radius: inherit;
  display: block;
}

/* Light wash layer for readability (same as Tech/Post) */
#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.18) 55%,
    rgba(255,255,255,0.10)
  );
  opacity: 0;
  transition: opacity var(--dv-hover-dur) ease;
}

/* Overlay becomes just a positioning canvas (no background panel) */
#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  background: transparent !important;
  backdrop-filter: none !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* We don’t need bottom label for this “Post-processing style” */
#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-bottom{
  display: none !important;
}

/* ===== TITLE (absolute, centered, safe wrap) ===== */
#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-title{
  position: absolute !important;
  left: 0;
  right: 0;

  /* KEY: allow absolute sizing without overflow */
  width: auto !important;
  box-sizing: border-box;

  top: 50%;
  padding-inline: var(--dv-mat-pad-x);

  display: flex;
  justify-content: center;

  transform: translateY(-50%);
  transition: top 240ms ease, transform 240ms ease;
  margin: 0 !important;
}

#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-title .elementor-heading-title{
  display: inline-block;
  max-width: 100%;

  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.12;

  color: #ffffff;
  background-color: rgba(24, 24, 27, 0.72);
  padding: 10px 16px;
  border-radius: 999px;
  

  /* wrap / break long titles safely */
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;

  

  transition:
    color var(--dv-hover-dur) ease,
    background-color var(--dv-hover-dur) ease,
    padding var(--dv-hover-dur) ease;
}

/* ===== TEXT (absolute, hard left/right, centered, cannot overflow) ===== */
#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-text{
  position: absolute !important;
  left: var(--dv-mat-pad-x);
  right: var(--dv-mat-pad-x);
  top: 0;
  bottom: 0;

  /* KEY: same fix as Post-processing */
  width: auto !important;
  box-sizing: border-box;

  padding-top: var(--dv-mat-title-zone);
  padding-bottom: var(--dv-mat-pad-b);

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  /* never spill outside */
  overflow: hidden;

  margin: 0 !important;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--dv-hover-dur) ease, transform var(--dv-hover-dur) ease;
}

#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-text .elementor-widget-container{
  width: 100%;
  max-width: 100%;
  margin: 0;

  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

#production.dv-content-viewport .dv-subslide--prod-production .dv-mat-text p{
  margin: 0;

  font-size: 14px;
  font-weight: 650;
  line-height: 1.42;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: rgba(24, 24, 27, 0.70);
  max-width: 100%;
}

/* ===== HOVER: unblur + hide text + title drops to center with pill ===== */
@media (min-width: 1025px){
  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile:hover .dv-mat-media .elementor-widget-image img,
  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile:focus-within .dv-mat-media .elementor-widget-image img{
    filter: blur(16px) brightness(1.26) contrast(0.86) saturate(0.85);
    transform: scale(1.10);
  }

  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile:hover::after,
  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile:focus-within::after{
    opacity: 1;
  }

  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile:hover .dv-mat-text,
  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile:focus-within .dv-mat-text{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile:hover .dv-mat-title .elementor-heading-title,
  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile:focus-within .dv-mat-title .elementor-heading-title{
    color: rgba(24, 24, 27, 0.82);
    background-color: transparent;
    padding: 0;
  }

  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile:hover .dv-mat-title,
  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile:focus-within .dv-mat-title{
    top: clamp(16px, 2.2vh, 22px);
    transform: translateY(0);
  }
}

/* Low-height laptops: prevent clipping inside chip */
@media (max-height: 820px){
  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile{
    --dv-mat-title-zone: 80px;
  }

  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-text{
    align-items: flex-start;
    padding-bottom: 14px;
  }

  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-text p{
    font-size: 13px;
    line-height: 1.34;
  }

  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-title .elementor-heading-title{
    font-size: 16px;
    letter-spacing: 0.12em;
  }
}

/* Responsive: 2 per row, then 1 per row */
@media (max-width: 1200px){
  #production.dv-content-viewport .dv-subslide--prod-production .dv-prod-materials-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile{
    height: auto;
    aspect-ratio: 9 / 16;
  }
}

@media (max-width: 768px){
  #production.dv-content-viewport .dv-subslide--prod-production .dv-prod-materials-grid{
    grid-template-columns: 1fr;
  }

  #production.dv-content-viewport .dv-subslide--prod-production .dv-mat-tile{
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 24px;
  }
}



/* =========================
   PRODUCTION – Slide 4: Assembly & Logistics (MATCH Technologies we use)
   - 2 chips (50% each) with full-bleed BLUR VIDEO
   - Title drops to center on hover (pill)
   - Text centered, never overflows
   - Per-tile aspect-ratio (prevents ugly crop)
   ========================= */

#production.dv-content-viewport .dv-subslide--prod-logistics{
  --dv-log-gap: clamp(14px, 2vw, 22px);
  --dv-log-radius: 32px;

  /* reserve title zone like tech */
  --dv-log-title-zone: clamp(96px, 12vh, 128px);
}

/* Inner */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-page-inner{
  height: 100%;
  min-height: 0;

  max-width: 1100px;
  width: 100%;

  display: flex;
  flex-direction: column;
}

/* Center slide title */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-section-title{
  margin-bottom: clamp(14px, 2.2vh, 26px);
  text-align: center;
}

/* Grid */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-prod-logistics-grid{
  flex: 1 1 auto;
  min-height: 0;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dv-log-gap);

  align-items: stretch;
}

/* Tile */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile{
  position: relative;
  overflow: hidden;
  border-radius: var(--dv-log-radius);

  background: rgba(24, 24, 27, 0.95);

  /* IMPORTANT: do not exceed available grid cell height */
  height: min(clamp(360px, 72vh, 720px), 100%);

  box-sizing: border-box;
  isolation: isolate;

  transform: translateZ(0); /* radius clipping airbag */
}

/* Per-tile aspect ratio (prevents “random crop”) */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log--assembly{
  --dv-log-media-ar: 1080 / 1920; /* 9/16 */
}
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log--logistics{
  --dv-log-media-ar: 720 / 1272;  /* ~0.566 */
}

/* Media under everything */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}

/* The HTML widget becomes the “chip” that respects AR */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-media .elementor-widget-html{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Chip inside tile (AR-controlled, so video won’t look “squashed”) */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-media .elementor-widget-html > .elementor-widget-container{
  width: min(100%, calc(100vh - var(--dv-slide-nav-h, 64px) - 160px));
  max-width: 100%;
  height: auto;

  aspect-ratio: var(--dv-log-media-ar);

  border-radius: inherit;
  overflow: hidden;
}

/* Video fill */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-video,
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-media video{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;

  /* DEFAULT: clean video */
  filter: none;
  transform: scale(1.02);

  transition:
    filter var(--dv-hover-dur-long) ease,
    transform var(--dv-hover-dur-long) ease;

  border-radius: inherit;
}

/* Wash layer like Tech slide */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.18) 55%,
    rgba(255,255,255,0.10)
  );
  opacity: 0;
  transition: opacity var(--dv-hover-dur) ease;
}

/* Overlay becomes positioning canvas (no dark panel) */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  background: transparent !important;
  backdrop-filter: none !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* Title + text above media */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-title,
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-text{
  position: relative;
  z-index: 2;

  text-align: center;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Title (absolute) */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-title{
  position: absolute !important;
  left: 0;
  right: 0;
  width: auto !important;

  top: 50%;

  display: flex;
  justify-content: center;

  transform: translateY(-50%);
  transition: top 240ms ease, transform 240ms ease;

  padding-inline: clamp(16px, 2.2vh, 22px);
}

#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-title .elementor-heading-title{
  display: inline-block;
  max-width: 100%;

  font-size: clamp(22px, 1.8vw, 32px);
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  line-height: 1.12;

  color: #ffffff;
  background-color: rgba(24, 24, 27, 0.72);
  padding: 10px 18px;

  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;

  border-radius: 999px;

  transition:
    color var(--dv-hover-dur) ease,
    background-color var(--dv-hover-dur) ease,
    padding var(--dv-hover-dur) ease;
}

/* Text (absolute, centered, NO overflow) */
#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-text{
  position: absolute !important;
  left: clamp(16px, 2.2vh, 22px);
  right: clamp(16px, 2.2vh, 22px);
  top: 0;
  bottom: 0;

  width: auto !important;

  padding-top: var(--dv-log-title-zone);
  padding-bottom: clamp(20px, 3vh, 28px);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(24, 24, 27, 0.70);
  
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;

  transition: opacity var(--dv-hover-dur) ease, transform var(--dv-hover-dur) ease;
  
  
}

#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-text .elementor-widget-container{
  width: 100%;
  max-width: 100%;
  margin: 0;

  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

#production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-text p{
  margin: 0;
}

/* HOVER: unblur + hide text + title centers with pill */
@media (min-width: 1025px){
  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile:hover .dv-log-video,
  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile:focus-within .dv-log-video{
    filter: blur(16px) brightness(1.26) contrast(0.86) saturate(0.85);
    transform: scale(1.10);
  }

  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile:hover::after,
  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile:focus-within::after{
    opacity: 1;
  }

  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile:hover .dv-log-text,
  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile:focus-within .dv-log-text{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile:hover .dv-log-title .elementor-heading-title,
  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile:focus-within .dv-log-title .elementor-heading-title{
    color: rgba(24, 24, 27, 0.82);
    background-color: transparent;
    padding: 0;
  }

  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile:hover .dv-log-title,
  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile:focus-within .dv-log-title{
    top: clamp(18px, 2.4vh, 26px);
    transform: translateY(0);
  }
}

/* Low-height laptops: prevent clipping */
@media (max-height: 820px){
  #production.dv-content-viewport .dv-subslide--prod-logistics{
    --dv-log-title-zone: 92px;
  }

  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-text{
    font-size: 14px;
    line-height: 1.36;
    letter-spacing: 0.03em;

    justify-content: flex-start;
    padding-bottom: 16px;
  }
}

/* Tablet/mobile: stack */
@media (max-width: 1024px){
  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-prod-logistics-grid{
    grid-template-columns: 1fr;
  }

  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile{
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 24px;
  }

  /* no hover dependency */
  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-video{
    filter: none;
    transform: none;
  }

  #production.dv-content-viewport .dv-subslide--prod-logistics .dv-log-tile::after{
    opacity: 1;
  }
}








/* =========================
   PROJECTS – V1 (orbit scaffold + partners marquee)
   ========================= */
#projects{
  /* sitno “spuštanje” luka prema donjem borderu chipa */
  --dv-semi-dial-drop: clamp(10px, 1.6vh, 18px);
  --dv-projects-safe-bottom: 28px;
}


/* PROJECTS — keep H1 for SEO, hide visually */
#projects .dv-section-title{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


#projects .dv-page-inner.dv-projects{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(14px, 2.2vw, 28px);
  box-sizing: border-box;
}




/* Orbit stage panel */
.dv-projects-orbit {
  margin-top: 12px;
  position: relative;

  height: min(
    calc(100svh - var(--dv-projects-safe-bottom)),
    clamp(420px, calc(72svh - var(--dv-projects-safe-bottom)), 900px)
  );

  border-radius: var(--dv-radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(24, 24, 27, 0.35);

  display: flex;
  flex-direction: column;
  min-height: 0; /* bitno za djecu koja imaju min-height/overflow */
  padding-bottom: 0 !important;
  
  justify-content: flex-start; /* default, ali eksplicitno */
  gap: 0;                      /* nema “misterioznog” razmaka */

  /* bitno: ništa ne smije “curiti” ispod donjeg bordera */
  overflow: hidden; /* <-- samo ovo je ključ */
}


@media (max-height: 780px){
  #projects .dv-projects-orbit{
    height: clamp(
      320px,
      calc(100svh - var(--dv-projects-orbit-top, 0px) - var(--dv-projects-safe-bottom)),
      900px
    );
  }
}


@media (max-height: 780px){
  /* PROJECTS — allow carousel area to actually shrink (prevents pushing dial out) */
  #projects .dv-projects-carousel-shell,
  #projects .dv-projects-carousel,
  #projects .dv-project-card,
  #projects .dv-project-media{
    min-height: 0 !important;
  }
}



/* shell: makni vanjski margin-top i prebaci to u mali unutarnji padding */
#projects .dv-projects-carousel-shell{
  margin-top: 0 !important;                 /* bilo clamp(12px...) */
  padding-top: clamp(8px, 1.2vw, 12px);     /* kontrolirani “luft” */
}




/* =========================
   PROJECTS — Carousel V2 (single active viewer)
   One active card fills stage; orbit controls selection (JS later)
   ========================= */

/* Shell (Elementor container) fills remaining height above orbit dial */
#projects .dv-projects-carousel-shell{
  width: 100%;
  margin-top: clamp(12px, 2vw, 18px);
  padding-inline: clamp(10px, 1.6vw, 16px);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  flex: 1 1 auto;
  min-height: 0;
}

/* In orbit panel: shell takes remaining space, orbit-html is fixed dial height */
#projects .dv-projects-orbit .dv-projects-carousel-shell{
  flex: 1 1 auto;
  min-height: 0;
}
#projects .dv-projects-orbit .dv-projects-orbit-html{
  flex: 0 0 var(--dv-semi-dial-h);
}

/* IMPORTANT: Elementor HTML widget must stretch to fill the shell height */
#projects .dv-projects-carousel-shell > .elementor-element{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
#projects .dv-projects-carousel-shell > .elementor-element .elementor-widget-container{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
}

/* Carousel viewport (fills available height) */
#projects .dv-projects-carousel{
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;

  overflow: hidden;
}

/* Cards: stacked, only one visible */
#projects .dv-project-card{
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;

  border-radius: 18px;
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(8px);

  padding: clamp(14px, 1.6vw, 18px);

  opacity: 0;
  pointer-events: none;

  transition: opacity 220ms ease, transform 180ms ease;
}

/* default visible (fallback dok JS ne prebacuje .is-active) */
#projects .dv-project-card:first-of-type{
  opacity: 1;
  pointer-events: auto;
}

/* future: JS toggles this */
#projects .dv-project-card.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Media fills the card */
#projects .dv-project-media{
  flex: 1 1 auto;
  min-height: 0;

  border-radius: 14px;
  background: rgba(255,255,255,0.06);
}

/* PROJECTS — gallery images must be full-bleed (fix side gaps) */
#projects .dv-gal,
#projects .dv-gal-viewport,
#projects .dv-gal-track,
#projects .dv-gal-slide{
  width: 100%;
  height: 100%;
}

#projects .dv-gal-viewport{
  overflow: hidden;
  border-radius: 14px;
}

#projects .dv-gal-track{
  display: flex;
  transition: transform 320ms ease;
  will-change: transform;
}

#projects .dv-gal-slide{
  flex: 0 0 100%;
}

#projects .dv-gal-slide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* ključ za A) */
}

/* PROJECTS — gallery controls hover (use accent warm) */
#projects .dv-gal-btn,
#projects .dv-gal-full{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

#projects .dv-gal-btn:hover,
#projects .dv-gal-full:hover,
#projects .dv-gal-fs-close:hover,
#projects .dv-gal-fs-prev:hover,
#projects .dv-gal-fs-next:hover{
  border-color: var(--color-accent-warm);
  color: var(--color-accent-warm);

  /* subtle “lift” without jumping */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}



#projects .dv-gal-btn:focus,
#projects .dv-gal-full:focus,
#projects .dv-gal-fs-close:focus,
#projects .dv-gal-fs-prev:focus,
#projects .dv-gal-fs-next:focus{
  outline: none !important;
  box-shadow: none !important;
}




/* Hide text placeholders for now */
#projects .dv-project-title,
#projects .dv-project-desc{
  display: none !important;
}


/* =========================
   PROJECTS — Gallery (16:9 fit) + fullscreen
   ========================= */

/* media area is the “stage” inside the active card */
#projects .dv-project-media{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the 16:9 box that gets “fit” via JS (never overflows vertically) */
#projects .dv-gal{
  width: var(--dv-gal-w, 100%);
  height: var(--dv-gal-h, 100%);
  position: relative;

  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  outline: 1px solid rgba(255,255,255,0.10);
}

/* PROJECTS — hide the “gap frame” around the fitted 16:9 box */
#projects .dv-project-media{
  background: transparent !important;
}

#projects .dv-gal{
  background: transparent !important;
  outline: none !important;
}

/* if you also see a border from the card itself, soften it */
#projects .dv-project-card{
  background: rgba(0,0,0,0.14); /* optional: slightly lighter */
}

/* viewport + track */
#projects .dv-gal-viewport{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#projects .dv-gal-track{
  height: 100%;
  display: flex;
  transform: translate3d(0,0,0);
  transition: transform 260ms ease;
}

#projects .dv-gal-slide{
  flex: 0 0 100%;
  height: 100%;
}

#projects .dv-gal-slide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 16:9, cinematic look */
}

/* arrows */
#projects .dv-gal-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 5;
}

#projects .dv-gal-prev{ left: 12px; }
#projects .dv-gal-next{ right: 12px; }

@media (min-width: 1025px){
  #projects .dv-gal-btn{ opacity: 0.0; pointer-events: none; }
  #projects .dv-gal:hover .dv-gal-btn{ opacity: 1; pointer-events: auto; }
}

/* fullscreen button */
#projects .dv-gal-full{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 40px;
  height: 40px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 6;
}

/* ========== Fullscreen overlay ========== */
.dv-projects-lightbox{
  position: fixed;
  inset: 0;
  z-index: 10050;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
}

body.dv-projects-lightbox-open{
  overflow: hidden;
}

.dv-projects-lightbox.is-open{
  display: flex;
}

.dv-projects-lightbox-inner{
  width: min(1200px, 92vw);
  aspect-ratio: 16 / 9;
  position: relative;

  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
  outline: 1px solid rgba(255,255,255,0.14);
}

/* ===== PROJECTS — Lightbox gallery MUST be flex (fix "only 1st image shows") ===== */
.dv-projects-lightbox .dv-gal-viewport{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.dv-projects-lightbox .dv-gal-track{
  height: 100%;
  display: flex;                 /* KLJUČ: horizontalni track */
  transform: translate3d(0,0,0);
  transition: transform 260ms ease;
  will-change: transform;
}

.dv-projects-lightbox .dv-gal-slide{
  flex: 0 0 100%;                /* KLJUČ: svaki slajd puni viewport */
  height: 100%;
}

.dv-projects-lightbox .dv-gal-slide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;             /* full-bleed */
}


/* ===== PROJECTS — Lightbox arrows (centered, no theme pink) ===== */
.dv-projects-lightbox .dv-gal-btn{
  position: absolute;
  top: 50%;
  transform: translate3d(0,-50%,0);

  width: 52px;
  height: 52px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(0,0,0,0.22) !important;  /* ubija theme pozadinu */
  color: rgba(255,255,255,0.92) !important; /* ubija theme boju */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 12;

  transition: border-color 180ms ease, color 180ms ease;
}

/* pozicije lijevo/desno */
.dv-projects-lightbox .dv-gal-prev{ left: 16px !important; }
.dv-projects-lightbox .dv-gal-next{ right: 16px !important; }

/* hover: samo accent (bez mijenjanja backgrounda da ne “aktivira” čudne theme efekte) */
.dv-projects-lightbox .dv-gal-btn:hover{
  border-color: var(--color-accent-warm) !important;
  color: var(--color-accent-warm) !important;
}









.dv-projects-lightbox .dv-gal-viewport,
.dv-projects-lightbox .dv-gal-track,
.dv-projects-lightbox .dv-gal-slide{
  height: 100%;
}

.dv-projects-lightbox-close{
  position: absolute;
  top: 12px;
  right: 12px;

  width: 44px;
  height: 44px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.22) !important;  /* <-- kills pink */
  color: rgba(255,255,255,0.92) !important; /* <-- kills pink */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 10;

  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}


/* PROJECTS — fullscreen full-bleed image */
.dv-projects-lightbox-inner{
  overflow: hidden;
}

.dv-projects-lightbox .dv-gal-viewport{
  position: absolute;
  inset: 0; /* full area */
}

/* ensure track/slides fill */
.dv-projects-lightbox .dv-gal-track,
.dv-projects-lightbox .dv-gal-slide,
.dv-projects-lightbox .dv-gal-slide img{
  width: 100%;
  height: 100%;
}

.dv-projects-lightbox .dv-gal-slide img{
  object-fit: cover;
}

/* arrows flush left/right */
.dv-projects-lightbox .dv-gal-prev{ left: 16px !important; }
.dv-projects-lightbox .dv-gal-next{ right: 16px !important; }

/* close hover uses accent-warm (kill pink) */
.dv-projects-lightbox-close:hover{
  border-color: var(--color-accent-warm) !important;
  color: var(--color-accent-warm) !important;
}



/* PROJECTS — fullscreen: remove any чужи/auto-injected back button in top-left */
.dv-projects-lightbox.is-open button{
  /* reset look to our system */
  -webkit-appearance: none;
  appearance: none;
}

.dv-projects-lightbox.is-open > button,
.dv-projects-lightbox.is-open .dv-projects-lightbox-inner > a,
.dv-projects-lightbox.is-open .dv-projects-lightbox-inner > button:not(.dv-projects-lightbox-close):not(.dv-gal-prev):not(.dv-gal-next){
  display: none !important;
}










.dv-partners-title {
  margin-top: 6px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--color-text);
  opacity: 1;
}


/* Partners strip wrapper */
.dv-partners-strip {
  margin-top: 2px;
  margin-bottom: 2px;
  height: var(--dv-partners-strip-h);
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  position: relative;

  /* linije gore i dolje */
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

.dv-partners-strip:active {
  cursor: grabbing;
}


/* Marquee viewport (wrapper) */
.dv-partners-marquee {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;

  /* padding (viewport) */
  padding: 0 56px;
  box-sizing: border-box;
  
  overflow-x: hidden;
  overflow-y: hidden;
}


/* The moving track (28 logos inside = 14 + duplicate 14) */
.dv-partners-track {
  height: 100%;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;

  gap: 34px;
  padding: 0;

  width: max-content;
  will-change: transform;

/*  animation: dv-partners-marquee var(--dv-partners-speed) linear infinite; */
  transform: translate3d(0,0,0);
  
}

/* IMPORTANT: Elementor children must not be full-width and must not be absolute */
.dv-partners-track > .elementor-element,
.dv-partners-track .elementor-widget,
.dv-partners-track .elementor-widget-container {
  position: static !important;
}

.dv-partners-track > .elementor-element {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Svaki logo widget: shrink-to-content + horizontalni padding */
.dv-partners-track .elementor-widget-image {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex;              /* stabilan box za border */
  align-items: center;
  justify-content: center;
  padding: 0 22px;            /* razmak oko logoa */
  box-sizing: border-box;
}


/* Partners strip: dot separators (JS-injected) */
.dv-partners-sep {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;                 /* razmak između logoa */
  height: 100%;
  opacity: 0.35;
  color: rgba(255,255,255,0.55);
  font-size: 30px;
  line-height: 1;
  pointer-events: none;
}



/* Logo image size + default look */
.dv-partners-track .elementor-widget-image img {
  height: calc(var(--dv-partners-strip-h) - 28px);
  width: auto !important;
  max-width: none !important;
  display: block;

  opacity: 0.65;
  filter: grayscale(1) brightness(0.9);
  transition:
    opacity var(--dv-hover-dur) ease,
    filter var(--dv-hover-dur) ease,
    transform var(--dv-hover-dur) ease;
}

/* Hover on individual logo */
@media (min-width: 1025px) {
  .dv-partners-track .elementor-widget-image:hover img {
    opacity: 1;
    filter: none;
    transform: translateY(-1px);
  }
}

/* JS hover-follow: klasa na widgetu */
.dv-partners-track .elementor-widget-image.is-active img {
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
}



/* Animation: move by half of track width (because it contains 2 identical sets) */
@keyframes dv-partners-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Responsive */
@media (max-width: 1024px) {
  .dv-partners-strip {
    height: 78px;
    border-radius: 24px;
    --dv-partners-fade: 48px;
  }

  .dv-partners-marquee {
  padding: 0 34px;
  }

  .dv-partners-track .elementor-widget-image img {
    height: 52px;
  }
}


/* PROJECTS only — drop the orbit slightly (≈1–2cm depending on viewport) */

#projects{
  --dv-semi-center-push: 78%; 
}

@media (max-width: 1024px){
  #projects{
    --dv-semi-center-push: 72%;
  }
}


/* =========================
   PROJECTS – Semi Orbit V1
   ========================= */

/* Glavni wrapper (ONLY orbit dial; carousel je iznad) */
.dv-projects-orbit-html{
  flex: 0 0 var(--dv-semi-dial-h);
  height: var(--dv-semi-dial-h);
  min-height: var(--dv-semi-dial-h);
}



.dv-projects-orbit-html .dv-semi-orbit {
  max-width: var(--dv-semi-max);
  margin: 0 auto;
  position: relative;

  height: 100%;

  display: block;      /* <-- PROMJENA */
  padding-bottom: 0;   /* <-- PROMJENA */
}



/* Content (naslov + opis + stage) */
.dv-projects-orbit-html .dv-semi-orbit-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.dv-projects-orbit-html .dv-semi-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}



/* Dial container (reže donju polovicu) */
.dv-projects-orbit-html .dv-semi-orbit-dial {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dv-semi-dial-h);
  overflow-y: hidden;
  overflow-x: visible;
  z-index: 1;
}

/* Dial content shift: arc stays clipped, chips sit near the bottom border */
.dv-projects-orbit-html .dv-semi-items,
.dv-projects-orbit-html .dv-semi-arc{
  transform: translateX(-50%) translateY(calc(var(--dv-semi-center-push) + 14px)) rotate(var(--dv-semi-rotval, 0deg));
}

/* Luk (polukrug) */
.dv-projects-orbit-html .dv-semi-arc {
  position: absolute;
  left: 50%;
  bottom: 0;

  width: calc(var(--dv-semi-radius) * 2);
  height: calc(var(--dv-semi-radius) * 2);

  /*transform: translateX(-50%) translateY(var(--dv-semi-center-push));*/
  transform: translateX(-50%) translateY(calc(var(--dv-semi-center-push) + var(--dv-semi-dial-drop)));
  border-radius: 999px;
  border: 1px solid var(--dv-semi-arc);

  pointer-events: none;
  opacity: 0.95;
  z-index: 0;
}

/* Lista koja se rotira (JS/CSS var rotacije) */
.dv-projects-orbit-html .dv-semi-items {
  list-style: none;
  margin: 0;
  padding: 0;

  position: absolute;
  left: 50%;
  bottom: 0;

  width: calc(var(--dv-semi-radius) * 2);
  height: calc(var(--dv-semi-radius) * 2);

 /* transform: translateX(-50%) translateY(var(--dv-semi-center-push)) rotate(var(--dv-semi-rotval, 0deg));*/
 transform: translateX(-50%) translateY(calc(var(--dv-semi-center-push) + var(--dv-semi-dial-drop))) rotate(var(--dv-semi-rotval, 0deg));

  transform-origin: center;
  will-change: transform;
  z-index: 0;
}

/* Svaka stavka sjedi na kružnici (slot) */
.dv-projects-orbit-html .dv-semi-item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: rotate(var(--dv-semi-angle)) translateX(var(--dv-semi-radius));
  transform-origin: 0 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Chip je uvijek uspravan (counter-rotate prema angle) */
.dv-projects-orbit-html .dv-semi-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;
  border-radius: 999px;

  background: var(--dv-semi-chip-bg);
  border: 1px solid var(--dv-semi-chip-border);
  color: var(--color-text);

  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  cursor: pointer;
  user-select: none;

  width: clamp(104px, 12vw, 148px); /* clamp(140px, 16vw, 190px)*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transform: translate(-50%, -50%) rotate(calc(var(--dv-semi-angle) * -1));
  transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
  position: relative;
  z-index: 1;
}

.dv-projects-orbit-html .dv-semi-chip:hover {
  border-color: var(--color-accent-warm);
  transform: translate(-50%, -50%) translateY(-2px) rotate(calc(var(--dv-semi-angle) * -1));
}

.dv-projects-orbit-html .dv-semi-chip.is-active {
  border-color: var(--color-accent-warm);
  background: rgba(0,0,0,0.32);
  z-index: 10;
}


/* Strelice (simetrične, bez “pregazivanja” transformom na hover) */
.dv-projects-orbit-html .dv-semi-arrow {
  --dv-semi-arrow-x: 0px;

  position: absolute;
  left: 50%;
  /*bottom: calc(var(--dv-semi-dial-h) * 0.16);*/
  bottom: var(--dv-semi-arrow-bottom);

  width: 44px;
  height: 44px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.22);
  color: var(--color-text);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transform: translateX(calc(-50% + var(--dv-semi-arrow-x))) translateY(0);
  transition: border-color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
  z-index: 4;
}

.dv-projects-orbit-html .dv-semi-arrow:hover {
  border-color: var(--color-accent-warm);
  transform: translateX(calc(-50% + var(--dv-semi-arrow-x))) translateY(-1px);
}

.dv-projects-orbit-html .dv-semi-arrow--left  { --dv-semi-arrow-x: -56px; }
.dv-projects-orbit-html .dv-semi-arrow--right { --dv-semi-arrow-x:  56px; }

/* Mobile */

@media (max-width: 1024px) {
  #projects {
    --dv-semi-radius: clamp(210px, 58vw, 380px);
    --dv-semi-center-push: 66%;
  }

  .dv-projects-orbit-html .dv-semi-stage {
    max-width: 100%;
  }

  .dv-projects-orbit-html .dv-semi-arrow {
    bottom: 90px;
  }
}




/* ======================================================
   GLOBAL HORIZONTAL SYSTEM – FINAL (SINGLE SOURCE OF TRUTH)
   ====================================================== */

/* DESKTOP (≥1025px): pomakni CIJELI screen content desno od menija */
@media (min-width: 1025px) {

  /* rail uvijek iz varijabli */
  .dv-left-rail-shell {
    left: var(--dv-rail-left) !important;
    width: var(--dv-rail-w) !important;
  }

  /* KLJUČ: offset ide na dv-content-slide (svaki ekran) */
  .dv-content-viewport .dv-content-slide {
    box-sizing: border-box !important;
   /* padding-left: calc(var(--dv-rail-left) + var(--dv-rail-w) + var(--dv-rail-gap)) !important; */
    padding-left: calc(var(--dv-rail-left) + var(--dv-rail-w) + var(--dv-rail-gap) + var(--dv-content-nudge)) !important;
    /* padding-right: var(--dv-rail-gap) !important;*/ 
    padding-right: var(--dv-content-right-gutter) !important;
  }

  /* dv-page-inner ostaje “normalan” wrapper; ne guramo ga margin-leftom */
  .dv-content-viewport .dv-page-inner {
    width: 100%;
    max-width: var(--layout-content-max-width);
    padding-inline: var(--layout-content-padding);
    box-sizing: border-box;
    margin: 0; /* bitno: bez auto-centera koji zna raditi čudno u kombinaciji s railom */
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ======================================================
   PATCH: HOME — content width = 1100px (match other pages)
   ====================================================== */
@media (min-width: 1025px){
  body.home.page-id-79 .dv-page-inner.dv-home-hero{
    max-width: 1100px !important;
    margin: 0 auto !important;

    padding-inline: clamp(14px, 2.2vw, 28px) !important;
    box-sizing: border-box !important;
  }
}

/* ======================================================
   PATCH: SERVICE — content width = 1100px (match About/Shop/Projects)
   ====================================================== */
@media (min-width: 1025px){
  #service.dv-content-viewport .dv-page-inner{
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding-inline: clamp(14px, 2.2vw, 28px) !important;
    box-sizing: border-box !important;
  }
}


/* ======================================================
   PATCH: PRODUCTION — content width = 1100px (match About/Shop/Projects)
   ====================================================== */
@media (min-width: 1025px){
  #production.dv-content-viewport .dv-page-inner{
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding-inline: clamp(14px, 2.2vw, 28px) !important;
    box-sizing: border-box !important;
  }
}



/* TABLET/MOBILE (≤1024px): rail nema, content je full */
@media (max-width: 1024px) {
  .dv-left-rail-shell { display: none !important; }

  .dv-content-viewport .dv-content-slide {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dv-content-viewport .dv-page-inner {
    max-width: 100%;
    padding-inline: 20px;
    margin: 0 auto;
    box-sizing: border-box;
  }
}

/*  ANCHOR OFFSET (global)  */
.dv-content-viewport[id] {
  scroll-margin-top: var(--dv-scroll-offset, 96px);
}


/* =========================
   SLIDE SLOT SYSTEM (GLOBAL)
   ========================= */
   
   /*  GLOBAL H1 BASELINE  */
  .dv-content-viewport h1 {
    margin-top: 0;
  }

/* GLOBAL H1 RESET (ELEMENTOR) — prevent font top clipping */
.dv-content-viewport h1.elementor-heading-title {
  margin: 0;
  line-height: 1.2;
  padding-top: 0.08em; /* sprječava da font “reže” vrh u overflow režimu */
}


   
  /* HERO SLIDE */
.dv-slide-hero {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.5vw, 28px);

  align-items: center;
  text-align: center;
}

/* Hero heading */
.dv-slide-hero h1,
.dv-slide-hero h2 {
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Hero text */
.dv-slide-hero p {
  max-width: 62ch;
  color: var(--color-text-muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

/* Hero image */
.dv-slide-hero img {
  width: 100%;
  max-width: 820px;
  height: auto;
  border-radius: var(--dv-radius-xl);
  margin-top: clamp(12px, 2vw, 24px);
}
 
 
 /* TWO COLUMN SLIDE */
.dv-slide-two-col {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;

  display: grid;
  gap: clamp(18px, 3vw, 32px);
}

/* Desktop: 2 columns */
@media (min-width: 1025px) {
  .dv-slide-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
  }
}

/* Text */
.dv-slide-two-col p {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 52ch;
}

/* Image */
.dv-slide-two-col img {
  width: 100%;
  height: auto;
  border-radius: var(--dv-radius-xl);
}


  /* CONTENT SLIDE */
.dv-slide-content {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 22px);
}

/* Headings */
.dv-slide-content h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Text blocks */
.dv-slide-content p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

   

/* =====================================================
   ABOUT US — LAYOUT (SINGLE SOURCE OF TRUTH)
   (Svi About slideovi koriste isti "top slot" za naslov)
   ===================================================== */

/* 
   ABOUT: prevent first-slide flash before JS jump
   - Before JS: hide all about subslides
   - After JS: show only active one
    */

/* dok JS nije spreman (nema .hec-pro-active) -> ništa ne pokazuj */
body.page-id-1031:not(.hec-pro-active) #about.dv-content-viewport .dv-subslide {
  display: none !important;
}

/* kad JS radi -> i dalje default hide */
body.page-id-1031.hec-pro-active #about.dv-content-viewport .dv-subslide {
  display: none;
}

/* ali active smije biti vidljiv */
body.page-id-1031.hec-pro-active #about.dv-content-viewport .dv-subslide.is-active,
body.page-id-1031.hec-pro-active #about.dv-content-viewport .dv-subslide.active {
  display: flex;
}



/* 0) ABOUT: page-inner mora biti stabilan "stack" */
.dv-subslide--about-intro .dv-page-inner,
.dv-subslide--about-company .dv-page-inner,
.dv-subslide--about-contact .dv-page-inner{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  /* kontrola vertikalnog ritma na svim slideovima */
  gap: clamp(14px, 2.2vh, 22px) !important;

  /* nikakav "centering" ni extra top padding */
  padding-top: 0 !important;
}

/* 1) ABOUT: heading slot (isti baseline svugdje) */
.dv-about-heading{
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}



/* Elementor zna davati margin na widget wrapper -> hard reset */
.dv-about-heading.elementor-widget{
  margin: 0 auto !important;
}

/* Naslov (radi i za H1 i za H2) */
.dv-about-heading .elementor-heading-title{
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;

  /* isti look kao slide 1 */
  font-size: clamp(34px, 4.2vw, 58px) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;

  /* čisti “font clipping” bez pomicanja layouta */
  padding-top: 0.08em !important;
}

/* Long headings: kontrola prelamanja (Company info, Let's build...) */
.dv-heading--long .elementor-heading-title{
  letter-spacing: clamp(0.10em, 0.6vw, 0.16em) !important;
  text-wrap: balance;
}

.dv-subslide--about-contact .dv-about-lead{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}



@media (min-width: 1025px){
  /* Na desktopu pokušaj zadržati u jednom redu */
  .dv-subslide--about-company .dv-about-heading .elementor-heading-title,
  .dv-subslide--about-contact .dv-about-heading .elementor-heading-title{
    white-space: nowrap;
  }
}
@media (max-width: 1024px){
  /* Na manjim ekranima smije se lomiti */
  .dv-subslide--about-company .dv-about-heading .elementor-heading-title,
  .dv-subslide--about-contact .dv-about-heading .elementor-heading-title{
    white-space: normal;
  }
}

/* 2) ABOUT: TWO COL (slide 1 & 2 — identičan sistem) */
.dv-about-two-col{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;

  display: grid;
  gap: clamp(20px, 4vw, 36px);
  align-items: center;
}

@media (min-width: 1025px){
  .dv-about-two-col{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

.dv-about-two-col .dv-about-copy p{
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 52ch;
}

/* ABOUT — Slide 1 (About DVision Tech): center text */
.dv-subslide--about-intro .dv-about-two-col .dv-about-copy{
  text-align: center;
}

.dv-subslide--about-intro .dv-about-two-col .dv-about-copy p{
  margin-left: auto;
  margin-right: auto;
}

/* ABOUT intro image — real rounding (clip on wrapper, not only img) */
.dv-subslide--about-intro .dv-about-two-col .dv-about-media,
.dv-subslide--about-intro .dv-about-two-col .dv-about-media .elementor-widget-container{
  border-radius: var(--dv-radius-xl) !important;
  overflow: hidden !important;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.dv-about-two-col .dv-about-media img{
  width: 100%;
  height: auto;
  max-height: 52vh;
  object-fit: contain;

  display: block !important;
  border-radius: inherit !important;
}

/* ABOUT slide 1: chip width derived from 52vh so it matches image ratio (no empty corners) */
.dv-subslide--about-intro .dv-about-two-col .dv-about-media .elementor-widget-container{
  aspect-ratio: 1968 / 2230;
  max-height: 52vh;

  /* KLJUČ: NE 100% — nego širina iz visine (52vh) i omjera slike */
  width: min(100%, calc(52vh * 1968 / 2230));
  margin-inline: auto;
}

.dv-subslide--about-intro .dv-about-two-col .dv-about-media img{
  height: 100% !important;
  max-height: none !important;
}


@media (max-width: 1024px){
  .dv-about-two-col{
    grid-template-columns: 1fr;
  }
  .dv-about-two-col .dv-about-media img{
    max-height: none;
  }
  
    .dv-subslide--about-intro .dv-about-two-col .dv-about-media .elementor-widget-container{
      max-height: none;
      width: 100%;
    }
  
}

/* 3) ABOUT: COMPANY SLIDE (data left / map right) */
.dv-subslide--about-company .dv-about-company-grid{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;

  display: grid;
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}

@media (min-width: 1025px){
  .dv-subslide--about-company .dv-about-company-grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
}

@media (max-width: 1024px){
  .dv-subslide--about-company .dv-about-company-grid{
    grid-template-columns: 1fr;
  }
}

.dv-subslide--about-company .dv-about-company-data p{
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ABOUT — Slide 2 (Company information): center text */
.dv-subslide--about-company .dv-about-company-data{
  text-align: center;
}

.dv-subslide--about-company .dv-about-company-data p{
  margin-left: auto;
  margin-right: auto;
  max-width: 60ch; /* opcionalno: da tekst ne bude "preširok" */
}




/* Map column (Company slide) */
.dv-subslide--about-company .dv-about-company-map{
  width: 100%;
  border-radius: var(--dv-radius-xl);
  overflow: hidden;
  isolation: isolate;
  /* BITNO: mora biti HEIGHT, ne min-height (da 100% radi) */
  height: clamp(360px, 52vh, 560px);

  background: rgba(255,255,255,0.04);
}

.dv-subslide--about-company .dv-about-company-map .elementor-widget-container{
  border-radius: inherit;
  overflow: hidden;
}


/* Google Maps widget — force fill */
.dv-subslide--about-company .dv-about-company-map .dv-gmap,
.dv-subslide--about-company .dv-about-company-map .dv-gmap .elementor-widget-container,
.dv-subslide--about-company .dv-about-company-map .dv-gmap .elementor-custom-embed{
  height: 100% !important;
  width: 100%;
}

/* osiguraj da iframe ne “viri” iz radiusa */
.dv-subslide--about-company .dv-about-company-map iframe{
  border-radius: inherit;
}

/* The actual iframe */
.dv-subslide--about-company .dv-about-company-map .dv-gmap iframe{
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}


/*  ABOUT — MAP CORNER CLIP (forces rounded corners)  */

/* 1) Clip na “chip” wrapperu (najbitnije) */
.dv-subslide--about-company .dv-about-company-map{
  position: relative;
  overflow: hidden;
  border-radius: var(--dv-radius-xl);

  /* hard clip — radi i kad overflow ne “uhvati” pravi child wrapper */
  clip-path: inset(0 round var(--dv-radius-xl));
}

/* 2) Elementor inner wrappers (Google Maps widget zna imati 1–2 sloja) */
.dv-subslide--about-company .dv-about-company-map > .e-con-inner,
.dv-subslide--about-company .dv-about-company-map .elementor-element,
.dv-subslide--about-company .dv-about-company-map .elementor-widget-container,
.dv-subslide--about-company .dv-about-company-map .elementor-custom-embed,
.dv-subslide--about-company .dv-about-company-map .elementor-wrapper{
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round var(--dv-radius-xl));
}

/* 3) Iframe — punjenje + sigurnost */
.dv-subslide--about-company .dv-about-company-map iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}



/* =====================================================
   ABOUT — CONTACT (Forminator) — SINGLE SOURCE OF TRUTH v3 (PATCHED v4)
   Layout: 30% / 70%
   Left: Name, Email, Company, Phone
   Right: Subject, Message
   Bottom: Consent right/centered + Submit centered + reCAPTCHA badge viewport (ONLY this slide)
   ===================================================== */

/* A) Safe prostor iznad slide navigacije (da se vidi donji rub chipa) */
.dv-subslide--about-contact{
  padding-bottom: calc(var(--dv-slide-nav-h, 64px) + clamp(110px, 10vh, 150px)) !important;
  /*padding-bottom: calc(var(--dv-slide-nav-h, 64px) + clamp(140px, 12vh, 190px)) !important;*/
  overflow: visible !important;
}

/* B) Chip */
.dv-subslide--about-contact .dv-contact-form-shell{
  width: 100%;
  max-width: 1100px !important;
  margin: 0 auto;

 /* padding: clamp(16px, 2vw, 22px) !important;*/
  padding: clamp(12px, 1.4vw, 18px) !important;
  padding-bottom: clamp(10px, 1.2vw, 14px) !important;
  border-radius: var(--dv-radius-xl);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border-soft);
  backdrop-filter: blur(var(--dv-overlay-blur));

  position: relative;
  overflow: hidden; /* da sve prati radius */
}

/* C) GRID na formi: 30/70 */
.dv-subslide--about-contact .dv-contact-form-shell form.forminator-custom-form{
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 0.30fr) minmax(0, 0.70fr) !important;
  gap: 12px 18px !important;
  align-items: start !important;
}



/* -----------------------------------------------------
   DESKTOP + MOBILE: ujednači vertikalni ritam SVIM poljima
   (da grid gap bude jedini razmak i da Name/Subject budu u ravnini)
   ----------------------------------------------------- */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-field{
  margin: 0 !important;
  padding: 0 !important;
}

.dv-subslide--about-contact .dv-contact-form-shell .forminator-label{
  display: block !important;
  margin: 0 0 6px 0 !important;   /* isti label->input razmak svugdje */
  line-height: 1.1 !important;
}

/* Material wrap zna ubaciti dodatne margine/paddinge */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-input--wrap,
.dv-subslide--about-contact .dv-contact-form-shell .forminator-textarea--wrap{
  margin: 0 !important;
  padding: 0 !important;
}

/* Inputi/textarea bez default margina (da ne rade "rupe") */
.dv-subslide--about-contact .dv-contact-form-shell input,
.dv-subslide--about-contact .dv-contact-form-shell textarea{
  margin: 0 !important;
}


/* Forminator nested rows -> rastopi ih */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-row{
  display: contents !important;
}

/* Reset col (Forminator voli gurati flex/width) */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-col{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}




/* -----------------------------------------------------
   D) TOČNO mapiranje po tvojim ID-evima (iz HTML-a)
   ----------------------------------------------------- */

/* Left column */
.dv-subslide--about-contact .dv-contact-form-shell #name-2  { grid-column: 1; grid-row: 1; }
.dv-subslide--about-contact .dv-contact-form-shell #email-1 { grid-column: 1; grid-row: 2; }
.dv-subslide--about-contact .dv-contact-form-shell #text-1  { grid-column: 1; grid-row: 3; } /* Company */
.dv-subslide--about-contact .dv-contact-form-shell #phone-1 { grid-column: 1; grid-row: 4; }



/* Right column */
.dv-subslide--about-contact .dv-contact-form-shell #text-2     { grid-column: 2; grid-row: 1; } /* Subject */
.dv-subslide--about-contact .dv-contact-form-shell #textarea-1 { grid-column: 2; grid-row: 2 / span 2; } /* Message */

/* Bottom (right) */
.dv-subslide--about-contact .dv-contact-form-shell #checkbox-1 { grid-column: 2; grid-row: 4; }

/* CAPTCHA element (invisible) ne smije zauzimati visinu */
.dv-subslide--about-contact .dv-contact-form-shell #captcha-1{
  grid-column: 1 / -1;
  grid-row: 5;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Submit row-last full width + centar */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-row-last{
  display: contents !important;
}
.dv-subslide--about-contact .dv-contact-form-shell .forminator-row-last .forminator-col{
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* C4) podigni submit mrvicu gore (time se vidi donji border chipa) */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-row-last .forminator-col{
  margin-top: -12px !important;
} 


/* Mobile: 1 stupac */
@media (max-width: 1024px){
  .dv-subslide--about-contact .dv-contact-form-shell form.forminator-custom-form{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .dv-subslide--about-contact .dv-contact-form-shell #name-2,
  .dv-subslide--about-contact .dv-contact-form-shell #email-1,
  .dv-subslide--about-contact .dv-contact-form-shell #text-1,
  .dv-subslide--about-contact .dv-contact-form-shell #phone-1,
  .dv-subslide--about-contact .dv-contact-form-shell #text-2,
  .dv-subslide--about-contact .dv-contact-form-shell #textarea-1,
  .dv-subslide--about-contact .dv-contact-form-shell #checkbox-1,
  .dv-subslide--about-contact .dv-contact-form-shell #captcha-1{
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* -----------------------------------------------------
   RUPE FIX (counter/description van layouta)
   ----------------------------------------------------- */
.dv-subslide--about-contact .dv-contact-form-shell #text-2 .forminator-field,
.dv-subslide--about-contact .dv-contact-form-shell #textarea-1 .forminator-field{
  position: relative !important;
}

.dv-subslide--about-contact .dv-contact-form-shell #text-2 .forminator-description{
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.dv-subslide--about-contact .dv-contact-form-shell #textarea-1 .forminator-description{
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.dv-subslide--about-contact .dv-contact-form-shell #text-2 input{
  padding-right: 70px !important;
}
.dv-subslide--about-contact .dv-contact-form-shell #textarea-1 textarea{
  padding-bottom: 10px !important;
}

/* -----------------------------------------------------
   E) Inputs + Message bez resize
   ----------------------------------------------------- */
.dv-subslide--about-contact .dv-contact-form-shell input,
.dv-subslide--about-contact .dv-contact-form-shell textarea,
.dv-subslide--about-contact .dv-contact-form-shell select{
  width: 100%;
  box-sizing: border-box;

  padding: 10px 12px;
  border-radius: var(--dv-radius-lg) !important;
  border: 1px solid var(--color-border-soft);
  background: rgba(0,0,0,0.25);
  color: var(--color-text);

  transition: var(--transition-fast);
}

.dv-subslide--about-contact .dv-contact-form-shell textarea{
  min-height: clamp(90px, 10vh, 120px) !important;
  resize: none !important;
  overflow: auto;
}

.dv-subslide--about-contact .dv-contact-form-shell input:focus,
.dv-subslide--about-contact .dv-contact-form-shell textarea:focus,
.dv-subslide--about-contact .dv-contact-form-shell select:focus{
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* -----------------------------------------------------
   F) AUTOFILL — prisilno isti BG na SVIM autofill poljima
   ----------------------------------------------------- */
.dv-subslide--about-contact .dv-contact-form-shell input:-webkit-autofill,
.dv-subslide--about-contact .dv-contact-form-shell input:-webkit-autofill:hover,
.dv-subslide--about-contact .dv-contact-form-shell input:-webkit-autofill:focus,
.dv-subslide--about-contact .dv-contact-form-shell textarea:-webkit-autofill,
.dv-subslide--about-contact .dv-contact-form-shell textarea:-webkit-autofill:hover,
.dv-subslide--about-contact .dv-contact-form-shell textarea:-webkit-autofill:focus,
.dv-subslide--about-contact .dv-contact-form-shell select:-webkit-autofill,
.dv-subslide--about-contact .dv-contact-form-shell select:-webkit-autofill:hover,
.dv-subslide--about-contact .dv-contact-form-shell select:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text) !important;

  /* ovo je ključ: “prebojaj” autofill layer u naš BG */
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0.15) inset !important;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,0.15) inset !important;

  background-color: transparent !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;

  border: 1px solid var(--color-border-soft) !important;

  /* spriječi flash */
  transition: background-color 9999s ease-in-out 0s !important;
}


/* -----------------------------------------------------
   (3) ERROR poruke: Name/Email kao “placeholder” U inputu
   (bez layout shift) — radi na tvojoj strukturi (nema input--wrap)
   ----------------------------------------------------- */

/* opći stil (ne diramo checkbox error dolje) */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-error-message{
  background: transparent !important;
  color: var(--color-accent-warm) !important;
  font-style: italic !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* NAME + EMAIL: parent mora biti anchor */
.dv-subslide--about-contact .dv-contact-form-shell #name-2  .forminator-field,
.dv-subslide--about-contact .dv-contact-form-shell #email-1 .forminator-field{
  position: relative !important;
}

/* NAME + EMAIL: error span postaje overlay u input zoni */
.dv-subslide--about-contact .dv-contact-form-shell #name-2  .forminator-field > .forminator-error-message,
.dv-subslide--about-contact .dv-contact-form-shell #email-1 .forminator-field > .forminator-error-message{
  display: block !important;          /* ključ: vrati ga iz display:none */
  position: absolute !important;

  /* pozicija: u input polju (ne na labelu) */
  left: 12px !important;
  top: calc(50% + 10px) !important;   /* +10px jer label je iznad pa “centar” vara */
  transform: translateY(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none !important;
  z-index: 5 !important;
  max-width: calc(100% - 24px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Kad klikneš u polje (počinješ tipkati) — makni overlay */
.dv-subslide--about-contact .dv-contact-form-shell #name-2  .forminator-field:focus-within > .forminator-error-message,
.dv-subslide--about-contact .dv-contact-form-shell #email-1 .forminator-field:focus-within > .forminator-error-message{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Kad se polje popuni — makni overlay (Forminator zna dodati is_filled) */
.dv-subslide--about-contact .dv-contact-form-shell #name-2  .forminator-field.forminator-is_filled > .forminator-error-message,
.dv-subslide--about-contact .dv-contact-form-shell #email-1 .forminator-field.forminator-is_filled > .forminator-error-message{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Bonus: ako placeholder postane non-empty u budućnosti, radi i na tipkanje */
.dv-subslide--about-contact .dv-contact-form-shell #name-2  input:not(:placeholder-shown) ~ .forminator-error-message,
.dv-subslide--about-contact .dv-contact-form-shell #email-1 input:not(:placeholder-shown) ~ .forminator-error-message{
  opacity: 0 !important;
  visibility: hidden !important;
}



/* -----------------------------------------------------
   (2) CONSENT: digni bliže Message + centriraj unutar DESNE kolone
   + (3) rezerviraj mjesto za checkbox error da ne gura submit
   ----------------------------------------------------- */

/* makni label “Checkbox *” */
.dv-subslide--about-contact .dv-contact-form-shell #checkbox-1 .forminator-label{
  display: none !important;
}

/* cijeli consent blok: centar u desnoj koloni + manji top razmak */
.dv-subslide--about-contact .dv-contact-form-shell #checkbox-1{
  display: flex !important;
  justify-content: center !important;
  margin-top: 0px !important; /* DIŽE prema Message (po potrebi -4 do -10) */
}

/* checkbox + tekst */
.dv-subslide--about-contact .dv-contact-form-shell #checkbox-1 .forminator-checkbox{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 1 red na desktopu */
@media (min-width: 1025px){
  .dv-subslide--about-contact .dv-contact-form-shell #checkbox-1 .forminator-checkbox-label{
    white-space: nowrap !important;
  }
}

/* error za checkbox: ispod rečenice + NE gura (rezerviraj prostor) */
.dv-subslide--about-contact .dv-contact-form-shell #checkbox-1 .forminator-field{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 64px !important; /* rezervirano mjesto za error */
}

.dv-subslide--about-contact .dv-contact-form-shell #checkbox-1 .forminator-error-message{
  position: static !important;
  transform: none !important;
  margin-top: 2px !important; /* bliže rečenici */
  display: block !important;
  text-align: center !important;
  background: transparent !important;
  color: var(--color-accent-warm) !important;
}

/* -----------------------------------------------------
   I) Submit: centriran + isti efekt kao Contact/Explore
   ----------------------------------------------------- */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-button-submit{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  border-radius: 999px !important;
  padding: 12px 26px !important;

  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  color: #fff !important;

  cursor: pointer;

  transition:
    border-color 0.18s ease 0.55s,
    transform 0.18s ease !important;
}

.dv-subslide--about-contact .dv-contact-form-shell .forminator-button-submit::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-warm);

  transform: translateX(-101%);
  transition: transform 0.50s ease;
  z-index: -1;
}

.dv-subslide--about-contact .dv-contact-form-shell .forminator-button-submit:hover,
.dv-subslide--about-contact .dv-contact-form-shell .forminator-button-submit:focus,
.dv-subslide--about-contact .dv-contact-form-shell .forminator-button-submit:active,
.dv-subslide--about-contact .dv-contact-form-shell .forminator-button-submit:focus-visible{
  border-color: var(--color-accent-warm) !important;
  transform: translateY(calc(var(--dv-hover-shift-y) * -1)) !important;

  transition:
    border-color 0.18s ease 0s,
    transform 0.18s ease !important;
}

.dv-subslide--about-contact .dv-contact-form-shell .forminator-button-submit:hover::before,
.dv-subslide--about-contact .dv-contact-form-shell .forminator-button-submit:focus::before,
.dv-subslide--about-contact .dv-contact-form-shell .forminator-button-submit:active::before,
.dv-subslide--about-contact .dv-contact-form-shell .forminator-button-submit:focus-visible::before{
  transition-delay: 0.20s;
  transform: translateX(0);
}

/* -----------------------------------------------------
   (4) Makni “Edit form” rozi link (admin helper kad si logiran)
   ----------------------------------------------------- */
.dv-subslide--about-contact .dv-contact-form-shell a.forminator-edit-link,
.dv-subslide--about-contact .dv-contact-form-shell a[href*="wp-admin"][href*="forminator"],
.dv-subslide--about-contact .dv-contact-form-shell .forminator-admin-link{
  display: none !important;
}

/* -----------------------------------------------------
   (5) reCAPTCHA badge: NE u chipu, nego viewport bottom-right,
   ali samo kad je ABOUT CONTACT slide vidljiv (active)
   ----------------------------------------------------- */

/* default: sakrij badge (da ne bude globalno) */
.grecaptcha-badge{
  opacity: 0 !important;
  pointer-events: none !important;
}

/*
  PRAVILO: pokaži badge samo kad je contact subslide aktivan.
  NopCommerce/Elementor slider obično dodaje "is-active" ili "active" klasu.
  Zato pokrivamo 2 najčešća slučaja:
  - .dv-subslide--about-contact.is-active
  - .dv-subslide--about-contact.active
*/
.dv-subslide--about-contact.is-active ~ .grecaptcha-badge,
.dv-subslide--about-contact.active ~ .grecaptcha-badge{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* fallback: ako nema active klase, a ti si NA about-us stranici i vidiš slide 4,
   onda ćemo badge pokazati samo na about-us pageu.
   (ovo je sigurnije od globalnog) */
body.page-id-1031 .grecaptcha-badge{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* viewport pozicija + “slide-in” na hover */
body.page-id-1031 .grecaptcha-badge{
  position: fixed !important;
  bottom: calc(var(--dv-slide-nav-h, 64px) + -12px) !important;
  right: -186px !important;
  left: auto !important;
  z-index: 99999 !important;
  transition: right 0.3s ease !important;
}

body.page-id-1031 .grecaptcha-badge:hover{
  right: 14px !important;
}

@media (min-width: 1025px){
  .dv-subslide--about-contact .dv-contact-form-shell{
    padding-bottom: 10px !important;
  }
}


/* -----------------------------------------------------
   SUCCESS MESSAGE (Forminator) — DV toast inside chip
   Target: .forminator-response-message.forminator-show
   (ONLY About → Contact)
   ----------------------------------------------------- */

/* Osnova — uvijek DV look (ne diramo layout) */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-response-message{
  border-radius: var(--dv-radius-xl) !important;
  padding: 12px 14px !important;

  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--color-border-soft) !important;
  color: var(--color-text) !important;

  backdrop-filter: blur(var(--dv-overlay-blur));
  display: none !important;
}


/* OK button inside popup */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-response-message .dv-forminator-ok{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  border-radius: 999px !important;
  padding: 10px 22px !important;

  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  color: #fff !important;
  font-weight: 700 !important;

  cursor: pointer;

  transition:
    border-color 0.18s ease 0.55s,
    transform 0.18s ease !important;
}

/* Fill layer (Contact/Explore style) */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-response-message .dv-forminator-ok::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-warm);

  transform: translateX(-101%);
  transition: transform 0.50s ease;

  z-index: -1;
}

.dv-subslide--about-contact .dv-contact-form-shell .forminator-response-message .dv-forminator-ok:hover,
.dv-subslide--about-contact .dv-contact-form-shell .forminator-response-message .dv-forminator-ok:focus{
  border-color: var(--color-accent-warm) !important;
  transform: translateY(calc(var(--dv-hover-shift-y) * -1)) !important;

  transition:
    border-color 0.18s ease 0s,
    transform 0.18s ease !important;
}

.dv-subslide--about-contact .dv-contact-form-shell .forminator-response-message .dv-forminator-ok:hover::before,
.dv-subslide--about-contact .dv-contact-form-shell .forminator-response-message .dv-forminator-ok:focus::before{
  transition-delay: 0.20s;
  transform: translateX(0);
}



/* Success vs error border */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-response-message.forminator-success{
  border-color: rgba(0,188,212,0.35) !important; /* accent-soft */
}

.dv-subslide--about-contact .dv-contact-form-shell .forminator-response-message.forminator-error{
  border-color: rgba(215,122,58,0.55) !important;
}

/* Ako plugin ubaci <p> */
.dv-subslide--about-contact .dv-contact-form-shell .forminator-response-message p{
  margin: 0 !important;
}


/* Modal overlay (ONLY for this success popup) */
#dv-forminator-modal-overlay{
  position: fixed;
  inset: 0;

  /* NEMA zatamnjenja */
  background: transparent !important;

  /* SAMO blur pozadine */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  z-index: 99998;
}

#dv-forminator-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(560px, calc(100vw - 28px));
  padding: 16px 18px;

  border-radius: var(--dv-radius-xl);
  background: rgba(24,24,27,0.92);
  border: 1px solid var(--color-border-soft);
  backdrop-filter: blur(var(--dv-overlay-blur));
  -webkit-backdrop-filter: blur(var(--dv-overlay-blur));

  color: var(--color-text);
  z-index: 100000; /* IZNAD overlay-a */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  text-align: center;
}

#dv-forminator-modal .dv-modal-text{
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

#dv-forminator-modal .dv-modal-actions{
  display: flex;
  justify-content: center;
  width: 100%;
}

#dv-forminator-modal .dv-modal-ok{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  border-radius: 999px;
  padding: 12px 26px;

  background: transparent;
  border: 1px solid rgba(255,255,255,0.9);
  color: #fff;

  cursor: pointer;

  transition:
    border-color 0.18s ease 0.55s,
    transform 0.18s ease;
}

#dv-forminator-modal .dv-modal-ok::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-warm);

  transform: translateX(-101%);
  transition: transform 0.50s ease;
  z-index: -1;
}

#dv-forminator-modal .dv-modal-ok:hover{
  border-color: var(--color-accent-warm);
  transform: translateY(calc(var(--dv-hover-shift-y) * -1));

  transition:
    border-color 0.18s ease 0s,
    transform 0.18s ease;
}

#dv-forminator-modal .dv-modal-ok:hover::before{
  transition-delay: 0.20s;
  transform: translateX(0);
}

/* ===== END ABOUT CONTACT (FORMINATOR) v3 (PATCHED v4) ===== */


/* =====================================================
   SHOP — SINGLE SOURCE OF TRUTH (FINAL CLEAN v2)
   Confirmed DOM (from your Inspect):
   .dv-shop-image.elementor-widget-image > .elementor-widget-container > img

   What this block guarantees:
   - Title baseline stays fixed (same feel as About)
   - Chip layout stable (image centered, button below)
   - CTA effect + hover-out order stays correct
   - Image corners ACTUALLY rounded (no more guessing)
   ===================================================== */


/* SHOP — title baseline lock (same behavior as the “working” version) */
#shop.dv-content-viewport .dv-content-slide{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* 0) Baseline (Shop uses its own subslide wrapper now) */
#shop .dv-subslide--shop{
  padding-top: 8px !important;
    /* PATCH: safe bottom so the chip border is always visible */
  padding-bottom: calc(8px + clamp(60px, 6vh, 95px)) !important;
}

/* Title nudge + SHOP title size (ONLY Shop, keep dv-about-heading) */
#shop .dv-subslide--shop .dv-about-heading{
  transform: translateY(2px) !important;
  text-align: center;
  margin: 0 0 clamp(14px, 2.2vh, 26px) 0 !important; /* standard razmak kao ostale sekcije */
}

#shop .dv-subslide--shop .dv-about-heading .elementor-heading-title{
  font-size: clamp(24px, 2.2vw, 36px) !important;
  line-height: 1.1 !important;

  /* manje “razmaknuta” slova */
  letter-spacing: 0.08em !important;   /* probaj 0.12em ako želiš još zbijenije */
  /* (ako ti i razmak između RIJEČI smeta) */
  /* word-spacing: 0.02em !important; */
}

/* SHOP — force same title look as other sections */
#shop.dv-content-viewport .dv-section-title{
  margin-bottom: clamp(14px, 2.2vh, 26px);
  text-align: center;
}


#shop.dv-content-viewport .dv-section-title .elementor-heading-title{
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}




/* 1) Chip (layout + visuals) */
#shop .dv-shop-chip{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;

  padding: clamp(14px, 1.8vw, 20px);
  border-radius: var(--dv-radius-xl);


  background: transparent;
  border: 0;
  backdrop-filter: none;

  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: clamp(6px, 0.9vh, 10px) !important;
 /* gap: clamp(12px, 1.6vh, 16px) !important;*/
}

/* SHOP — image rounding that actually shows (shrink-wrap mask) */

/* parent neka i dalje centrira */
#shop .dv-shop-image{
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* KLJUČ: container se stisne oko stvarne širine slike */
#shop .dv-shop-image.elementor-widget-image .elementor-widget-container{
  display: inline-block !important;   /* <-- shrink-wrap */
  width: auto !important;             /* <-- shrink-wrap */
  max-width: 100% !important;
  padding: 0 !important;

  border-radius: var(--dv-radius-xl) !important;
  overflow: hidden !important;
  background: transparent !important; /* makni “unutarnji chip” */
}

/* slika se ponaša normalno, ali ne smije pojesti prostor za button */
#shop .dv-shop-image.elementor-widget-image .elementor-widget-container > img{
  display: block !important;

  /* ključ: ograniči visinu (JS ti računa --dv-shop-img-max-h) */
  max-height: var(--dv-shop-img-max-h, 380px) !important;

  /* zadrži proporcije i neka stane u širinu chipa */
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;

  object-fit: contain !important;

  /* i dodatno osiguranje */
  border-radius: inherit !important;
}

/* 3) Button wrapper (never full width, always below image) */
#shop .dv-shop-button,
#shop .dv-shop-button .elementor-widget-container,
#shop .dv-shop-button .elementor-button-wrapper{
  width: auto !important;
  max-width: 100% !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  position: static !important;
}

/* 4) CTA on the anchor (keeps the “good” behavior you had) */
#shop .dv-shop-button a.elementor-button{
  width: auto !important;
  display: inline-flex !important;

  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;

  isolation: isolate;
  z-index: 0;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  transition:
    border-color 0.18s ease,
    transform 0.18s ease;
  transition-delay: 0s;
}

/* Fill layer */
#shop .dv-shop-button a.elementor-button::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-warm);
  transition: transform 0.50s ease;
  z-index: -1;
  transform: translateX(-105%);
}

#shop .dv-shop-button a.elementor-button:hover::before,
#shop .dv-shop-button a.elementor-button:focus-visible::before{
  transform: translateX(0);
  transition-delay: 0.20s;
}

/* Hover state */
#shop .dv-shop-button a.elementor-button:hover,
#shop .dv-shop-button a.elementor-button:focus-visible{
  border-color: var(--color-accent-warm);
  transform: translateY(-1px);
  transition-delay: 0s;
}

/* Hover-out order: border returns AFTER fill starts to empty */
#shop .dv-shop-button a.elementor-button:not(:hover):not(:focus-visible){
  transition-delay: 0.22s;
}




/* =====================================================
   COPYRIGHT overlay + LEGAL pages (scroll enabled)
   ===================================================== */

.dv-copyright{
  position: fixed;
  left: 14px;
  bottom: calc(12px + max(env(safe-area-inset-bottom), 0px));
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 0;            /* bez pill-a */
  border: 0;
  background: transparent;
  backdrop-filter: none;

  color: rgba(255,255,255,0.68);  /* “prljavije” bijelo */
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  pointer-events: none;  /* ne blokira klikove ispod */
}

.dv-copyright__link{
  pointer-events: auto;  /* linkovi klikabilni */
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}

.dv-copyright__link:hover,
.dv-copyright__link:focus-visible{
  color: var(--color-accent-warm);
}

/* Legal pages: overlay ide skroz dolje (nema slide nav zone) */
body.dv-legal .dv-copyright{
  bottom: calc(12px + max(env(safe-area-inset-bottom), 0px));
}

/* Enable scroll ONLY on legal pages (site stays “no-scroll” elsewhere) */
body.dv-legal:not(.elementor-editor-active){
  overflow: auto !important;
}






/* =====================================================
   LEGAL pages (Terms / Privacy) — offset like content slides (NO header shift)
   ===================================================== */

body.dv-legal:not(.elementor-editor-active){
  overflow-x: hidden !important; /* kill horizontal scroll */
}

/* LEGAL pages: stabilize scrollbar so header doesn't jump */
body.dv-legal{
  scrollbar-gutter: stable;
}

/* LEGAL pages: prevent header "shadow line" flicker on scroll */
body.dv-legal .dv-shell-header{
  transform: translateZ(0);
  backface-visibility: hidden;
}
body.dv-legal .dv-shell-header::after,
body.dv-legal .dv-shell-header,
body.dv-legal .dv-shell-header *{
  transition: none !important; /* no animated nudge while scrolling */
}

body.dv-legal .dv-shell-header{ box-shadow: none !important; }


/* Desktop/laptop: pomakni SAMO Elementor content (header ne diramo) */
@media (min-width: 1025px){
  body.dv-legal .elementor{
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;

    /* isti offset kao .dv-content-viewport .dv-content-slide */
    padding-left: calc(var(--dv-rail-left) + var(--dv-rail-w) + var(--dv-rail-gap) + var(--dv-content-nudge)) !important;
    padding-right: var(--dv-content-right-gutter) !important;
  }

  /* tvoje legal stranice su samo 1 container: dv-page-inner */
  body.dv-legal .dv-page-inner{
    width: 100% !important;
    max-width: 1100px !important;         /* cap kao ostale sekcije */
    margin: 0 auto !important;            /* centriraj u content području */
    padding-inline: var(--layout-content-padding) !important;
    box-sizing: border-box !important;

    text-align: center;
  }
}

/* Tablet/mobile: normalno, full width */
@media (max-width: 1024px){
  body.dv-legal .elementor{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.dv-legal .dv-page-inner{
    max-width: 100% !important;
    padding-inline: clamp(16px, 4vw, 22px) !important;
    text-align: center;
  }
}

/* Tipografija (manje slovo, čitljivo) */
body.dv-legal .elementor-widget-text-editor{
  font-size: 14px !important;
  line-height: 1.75 !important;
}
body.dv-legal .elementor-widget-text-editor h3{
  font-size: 15px !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}


/* Admin bar: prevent tiny header jump on first scroll */
body.admin-bar .dv-shell-header{
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}
@media (max-width: 782px){
  body.admin-bar .dv-shell-header{
    top: var(--wp-admin--admin-bar--height, 46px) !important;
  }
}






/* =====================================================
   404 page (DV style + BIG title + hide left rail)
   ===================================================== */

/* Hide left rail menu on 404 */
body.error404 .dv-left-rail-shell{ display:none !important; }

#dv-404{
  min-height: 100vh;
  display: block;
}

/* Centered content like other pages */
#dv-404 .dv-page-inner.dv-404-inner{
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;

  padding-top: clamp(28px, 7vh, 72px);
  padding-bottom: clamp(28px, 7vh, 72px);

  text-align: center;
  box-sizing: border-box;
}

/* BIG title (explicit color so it never disappears) */
#dv-404 .dv-404-title{
  /* minimal airbag: ensure visible, but not nuclear */
  display: block;
  visibility: visible;
  opacity: 1;

  margin: 0 0 14px;
  padding-top: clamp(14px, 3.2vh, 28px);

  color: rgba(255,255,255,0.92);
  -webkit-text-fill-color: rgba(255,255,255,0.92);

  /* smaller than before */
  font-size: clamp(40px, 4.8vw, 82px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.06;
}

/* Card panel */
#dv-404 .dv-404-card{
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(16px, 2.2vw, 22px);

  border-radius: var(--dv-radius-xl);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border-soft);
  backdrop-filter: blur(var(--dv-overlay-blur));

  display: grid;
  gap: 10px;

  box-sizing: border-box;
}

#dv-404 .dv-404-lead{
  margin: 0 0 6px;
  font-size: 16px;
  color: rgba(255,255,255,0.88) !important;
}

#dv-404 .dv-404-sub{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted) !important;
}

#dv-404 .dv-404-actions{
  display: inline-flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons (explicit color so Go Back is visible too) */
#dv-404 .dv-404-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 18px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.85);
  background: transparent;

  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
}

#dv-404 .dv-404-btn--ghost{
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.82) !important;
}
#dv-404 .dv-404-btn--ghost:hover{
  border-color: rgba(255,255,255,0.65);
}




/* 404 title — hard force (in case global CSS hides H1) */
body.error404 #dv-404 .dv-404-title{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 5 !important;

  margin: 0 0 18px !important;
  padding-top: clamp(18px, 4vh, 44px) !important;

  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  font-size: clamp(40px, 4.8vw, 82px) !important;
  font-weight: 800px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
}