@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #0A1931;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.diagonal {
    background-repeat: repeat;
    background-image: url(../images/diagonal.png);
    background-color: #232323;
    padding: 0;
    border-top: 3px solid #FD0;
}

.bg-blue {
    background-color: #0f227b;
}
.bg-yellow {
    background-color: #FFC947;
}
.text-blue {
    color: #0f227b;
}
.text-yellow {
    color: #FFC947;
}
header {
    position: relative;
    z-index: 10;
}
.hero-section {
    background: url(../images/slep-služba-zvezdara-lazar-sekulic.webp) no-repeat center center;
    background-size: cover;
    margin-top: -127px;
    padding-top: 127px;
    min-height: 100vh;
    position: relative;
    overflow:  hidden;
}
.hero-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 0.4 znači 40% tamno, možeš pojačati */
    z-index: 1;
}
.hero-brand-text {
    position: relative;
}
.hero-brand-text::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 1.25rem;
    background-color: #0f227b;
    bottom: 0.35rem;
    z-index: -1;
}
.service-title span {
    position: relative;
    z-index: 10;
}
.service-title span::before {
    position: absolute;
    content: '';
    width: 100%;
    height: .5rem;
    background-color: #FFC947;
    bottom: 0.35rem;
    z-index: -1;
}

 .marquee {
  position: relative;
  overflow: hidden;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-40% + var(--offset));
  color: #ffffff;
}

.marquee__inner {
  display: flex;
  width: fit-content;
  transform: translate3d(var(--move-initial), 0, 0);
  animation: marquee 30s linear infinite;
  animation-play-state: running;
}

.marquee span {
  font-size: 1.25rem;
  white-space: nowrap;
}

.marquee:hover .marquee__inner {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }
  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
}
.blink {
  animation: blink-animation 10s linear infinite;
  white-space: nowrap;
}

@keyframes blink-animation {
  0%, 22%, 28%, 100%     { color: #fff; }        /* normalna boja */
  23%, 25%, 29%, 31%     { color: #FFC947; }     /* kratka „ugašenja” */
}