model-viewer::part(default-progress-bar) {
    display: none;
  }
  
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  @media (min-width: 480px) {
  .navigacija {
    backdrop-filter: blur(0px);
    box-shadow: none;
  }  
}

@media (min-width: 992px) {
      .nav-menu a::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 0;
      height: 2.5px;
      background-color: #242f3e;
      transition: all 0.3s ease;
    }
    
    .nav-menu a:hover::after {
      width: 100%;
    }
}


  .swing-in-top-bck {
    -webkit-animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
            animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
  }
  
  @-webkit-keyframes swing-in-top-bck {
    0% {
      -webkit-transform: rotateX(70deg);
              transform: rotateX(70deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1;
    }
  }
  @keyframes swing-in-top-bck {
    0% {
      -webkit-transform: rotateX(70deg);
              transform: rotateX(70deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1;
    }
  }

  .swing-out-top-bck {
    -webkit-animation: swing-out-top-bck 0.45s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
            animation: swing-out-top-bck 0.45s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2025-6-30 23:50:4
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-out-top-bck
 * ----------------------------------------
 */
@-webkit-keyframes swing-out-top-bck {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
}
@keyframes swing-out-top-bck {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
}

/* From Uiverse.io by kennyotsu-monochromia */ 
.hero-section {
  --color: #E1E1E1;
  background-color: #F3F3F3;
  background-image:linear-gradient(#fff0 70%, #fafafa),
  linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
      linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);

  background-size:
  100% 100%,        /* linear */
  5rem 5rem,        /* horizontalne linije */
  5rem 5rem;        /* vertikalne linije */

background-repeat:
  no-repeat,
  repeat,
  repeat;
}


.kvadratici-pozadina {
  --color: #E1E1E1;
  background-color: #F3F3F3;
  background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
      linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);

  background-size:
  5rem 5rem,        /* horizontalne linije */
  5rem 5rem;        /* vertikalne linije */

background-repeat:
  repeat,
  repeat;
}

.paragraf-pitanje {
  visibility: hidden;
}

.paragraf-pitanje.animiraj {
  visibility: visible;
}


.paragraf-pitanje .line {
  overflow: hidden;
}


@keyframes slide-in {
  from {
    transform: translateY(1.25em);
  }

  to {
    transform: translateY(0);
  }
}

.paragraf-pitanje .word {
  transform: translateY(1.25em);
}

.paragraf-pitanje.animiraj .word {
  animation: slide-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
  animation-delay: calc(var(--i) * 0.03s); /* 0.3s base + stagger */
}

@media (max-width: 991px) {
  @keyframes slide-in {
      from {
        transform: translateY(1.25em);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    .paragraf-pitanje .word {
      opacity: 0;
      transform: translateY(1.25em);
    }
    
    .paragraf-pitanje.animiraj .line .word {
      animation: slide-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      animation-fill-mode: forwards;
      animation-delay: calc(0.01s + var(--line-index) * 0.2s);
    }
}

@media (max-width: 479px) {
    .paragraf-pitanje.animiraj .line .word {
      animation: slide-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      animation-fill-mode: forwards;
      animation-delay: calc(0.01s + var(--line-index) * 0.1s);
    }
}

.znak-pitanja {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotacijaPrirodna 2.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  animation-fill-mode: forwards;
}

@keyframes rotacijaPrirodna {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359.999deg);
  }
}


.proizvodjaci-kase-tekst{
  visibility: hidden;
}

.proizvodjaci-kase-tekst.animiraj {
  visibility: visible;
}


.proizvodjaci-kase-tekst .line {
  overflow: hidden;
}


@keyframes slide-in2 {
  from {
    transform: translateY(1.25em);
      opacity: 0;
  }

  to {
    transform: translateY(0);
      opacity: 1;
  }
}

.proizvodjaci-kase-tekst .word {
  transform: translateY(1.25em);
opacity: 0;
}

.proizvodjaci-kase-tekst.animiraj .word {
  animation: slide-in2 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
  animation-delay: calc(0.3s + var(--i) * 0.12s); /* 0.3s base + stagger */
}


.fade-out {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.zabelezeno-pitanje-tekst {
  visibility: hidden;
}

.zabelezeno-pitanje-tekst.animiraj {
  visibility: visible;
}

.zabelezeno-pitanje-tekst .line {
  overflow: hidden;
}

@keyframes slide-in3 {
  from {
    transform: translateY(1.25em);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.zabelezeno-pitanje-tekst .word {
  opacity: 0;
  transform: translateY(1.25em);
}


.zabelezeno-pitanje-tekst .line .word {
  animation: slide-in3 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
  animation-delay: calc(0.01s + var(--line-index) * 0.3s);
/* moras dodati 0.01s delay, zato sto na mobilni prvi red se uopste ne animira, samo se stvori */
}


@media (hover: none) and (pointer: coarse) {
  .pop-up:focus {
    outline: none;
  }
}

#usluge {
  scroll-margin-top: 5em;
}