*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
  }
  *::selection {
  background: #0da841;
  color: white;
  }
  html,
  body {
  scroll-behavior: smooth;
  font-family: "Poppins", sans-serif;
  }
  #container{
    height: auto;
    background-color: #0E1D33;
    width: 100%;
    overflow: hidden;
    position:relative; 
    display: block; 
    float: left;
    transition: 1s ease;
  }
  #header {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 9999;
  
    /* Start: totalno transparentan */
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
  
    transform: translateY(0);
    opacity: 1;
    transition: 
      background 0.4s ease,
      backdrop-filter 0.4s ease,
      box-shadow 0.4s ease,
      transform 0.3s ease;
  }
  
  /* Kad skroluješ – blur + shadow */
  #header.with-bg {
    background: rgba(15, 23, 42, 0.55); /* tamna prozirna */
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
  }
  
  /* Auto-hide kad ideš dole */
  #header.hide {
    transform: translateY(-100%);
  }
    #sl-lev{
      height: 100%;
      width: 20%;
      /* background-color: rgb(29, 32, 151); */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
    }
    #logo{
      width: 200px;
      height: 86px;
    }
    .navbar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: row;
      width: 80%;
      height: 100%;
      /* background-color: blue; */
    }
    .hamburger {
      display: none;
    }
    
    .bar {
      display: block;
      width: 25px;
      height: 3px;
      margin: 5px auto;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      background-color: #101010;
    }
    .nav-menu {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 50px;
      gap: 20px ;
      /* background-color: red; */
    }
    .nav-itemi {
      display: block;
      width: 105px;
      text-align: center;
      transition-duration: .25s;
    }
    .nav-link{
      position: relative;
      font-size: 20px;
      font-weight: 700;
      text-transform: uppercase;
      color: #ffffff;
      text-decoration: none;
      list-style:none;
    }
    .nav-link:hover{
      color: #494d72;
    }
    #prj{
      width: 100%;
      height: 3px;
      top: 42px;
      position: absolute;
      background-color: #ffffff;
      display: flex;
    }
    
    .nav-link::after{
      content: '';
      position: absolute;
      left: 0px;
      bottom: -10px;
      height: 3px;
      width: 0px;
      border-radius: 2px;
      background-color: #ffffff;
      transition: 0.4s ease;
    }
    .nav-link:hover::after{
      width: 100%;
    }
    #jeza{
      width: 120px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;  
      gap: 10px;
    }
    .zas{
      width: 40px;
      height: 40px;
    }
    .zas:hover{
      filter: brightness(0.5);
      cursor: pointer;
    }
  /*--------------GOTOV HEADER ----------------*/
  
  #vanta-bg {
    width: 100%;
    height: 100vh;
    position: relative;
  }
  
  .center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 5px black;
    color: white;
    z-index: 10;
  }
  /* dugmence */
  #scrolldown {
    --color: rgb(255, 255, 255);
    --sizeX: 30px;
    --sizeY: 50px;
    position: absolute;
    width: var(--sizeX);
    height: var(--sizeY);
    margin-left: var(sizeX / 2);
    border: calc(var(--sizeX) / 10) solid var(--color);
    border-radius: 50px;
    box-sizing: border-box;
    bottom: 250px;
    left:50%;
    cursor: pointer;
  }
  
  #scrolldown::before {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: var(--color);
    border-radius: 100%;
    animation: scrolldown-anim 2s infinite;
    box-sizing: border-box;
    box-shadow: 0px -5px 3px 1px #2a547066;
  }
  
  @keyframes scrolldown-anim {
    0% {
      opacity: 0;
      height: 6px;
    }
  
    40% {
      opacity: 1;
      height: 10px;
    }
  
    80% {
      transform: translate(0, 20px);
      height: 10px;
      opacity: 0;
    }
  
    100% {
      height: 3px;
      opacity: 0;
    }
  }
  
  .chevrons {
    padding: 6px 0 0 0;
    margin-left: -3px;
    margin-top: 48px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .chevrondown {
    margin-top: -6px;
    position: relative;
    border: solid var(--color);
    border-width: 0 3px 3px 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
  }
  
  .chevrondown:nth-child(odd) {
    animation: pulse54012 500ms ease infinite alternate;
  }
  
  .chevrondown:nth-child(even) {
    animation: pulse54012 500ms ease infinite alternate 250ms;
  }
  
  @keyframes pulse54012 {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 0.5;
    }
  }
  /*--------------Forma----------------*/
  

  .contact-info-inside {
    background: linear-gradient(
      to bottom,
      #3c7bbf 0%,   /* gornja */
      #164a80 50%,  /* srednja */
      #0b2a4a 100%  /* donja */
    );   color: #fff;
    width: 100%;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .info-image{
    width: 80px;
    height: 80px;
  }
  #dv{
    gap: 20px;
    height: 110px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    display: flex;
  }
  .contact-info-inside h2{ 
    font-size: 2rem; 
  }
  .contact-info-inside p{ 
    font-size: 1rem; 
    margin-bottom: 30px; 
  }
  .contact-info-inside button{
    background: linear-gradient(135deg, #0f4979, #305699);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.3s;
    box-shadow: 2px 4px 8px rgba(0,0,0,0.2);
  }
  .contact-info button:hover{ 
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  }
  .dugme-narudz{
    background: linear-gradient(135deg, #0f4979, #305699);
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.3s;
    box-shadow: 2px 4px 8px rgba(0,0,0,0.2);
    text-decoration: none;
  }
  .dugme-narudz:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    }
  
  /*------------ Narucivanje--------------- */

  
  #bundle-builder *{ 
    box-sizing: border-box; 
    font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial; 
  }
  #bundle-builder{ 
    color:#fff; 
    background: linear-gradient(135deg, #0f172a, #1e293b);
  }
  
  .bb-section{ 
    padding:60px 24px; 
  }
  .bb-wrap{ 
    max-width:1240px; 
    margin:auto; 
    display:grid; 
    grid-template-columns:1fr 360px; 
    gap:32px; 
    align-items:start; 
  }
  .bb-main{ 
    display:flex; 
    flex-direction:column; 
    gap:24px; 
  }
  
  /* Packages */
  .bb-packages-row{ 
    display:flex; 
    gap:30px; 
    justify-content:center; 
  }
  .bb-pkg-card{ 
    flex:1 1 320px; 
    max-width:380px; 
    border-radius:18px; 
    padding:22px; 
    background:rgba(255,255,255,.06); 
    border:1px solid rgba(255,255,255,.1); 
    backdrop-filter:blur(8px); 
    box-shadow:0 10px 28px rgba(0,0,0,.35); 
    display:flex; 
    flex-direction:column; 
    gap:14px; 
    transition:.25s; 
  }
  .bb-pkg-card:hover{ 
    transform:translateY(-8px); 
    box-shadow:0 18px 48px rgba(0,0,0,.45); 
    border-color:rgba(59,130,246,.35); 
  }
  .bb-pkg-dark{ 
    background:linear-gradient(135deg,#0f172a,#1e293b); 
  }
  .bb-pkg-cyan{ 
    background:linear-gradient(135deg,#06b6d4,#0e7490); 
  }
  .bb-featured{ 
    outline:1px solid rgba(96,165,250,.35); 
  }
  .bb-pkg-head{ 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    gap:10px; 
  }
  .bb-pkg-title{ 
    margin:0; 
    font-weight:900; 
    font-size: clamp(20px, 2.4vw, 26px); 
  }
  .bb-pkg-price{ 
    font-weight:900; 
    font-size: clamp(18px, 2.1vw, 22px); 
  }
  .bb-pkg-list{ 
    list-style:none; 
    margin:4px 0 0; 
    padding:0; 
    display:flex; 
    flex-direction:column; 
    gap:8px; 
  }
  .bb-pkg-list li{ 
    display:flex; 
    gap:8px; 
    align-items:flex-start; 
    opacity:.95; 
  }
  .bb-pkg-list li::before{ 
    content:"✔"; 
    color:#00d0ff; 
    font-weight:900; 
    filter: drop-shadow(0 0 6px rgba(0,208,255,.6)); 
  }
  .bb-pkg-btn{ 
    margin-top:auto; 
    align-self:flex-start;
    padding:10px 22px; 
    border-radius:999px; 
    background:linear-gradient(135deg,#3b82f6,#06b6d4); 
    color:#fff; 
    text-decoration:none; 
    font-weight:800; 
    transition:.2s; 
  }
  .bb-pkg-btn:hover{ 
    transform: translateY(-2px); 
    box-shadow: 0 12px 26px rgba(0,0,0,.45); 
  }
  
  /* Services */
  .bb-services-grid{ 
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); 
    gap:18px; 
  }
  .bb-service{ 
    border-radius:16px; 
    padding:18px; 
    background:rgba(255,255,255,.06); 
    border:1px solid rgba(255,255,255,.1); 
    backdrop-filter:blur(8px); 
    display:flex; 
    gap:14px; 
    transition:.2s; 
  }
  .bb-service:hover{ 
    transform:translateY(-4px); 
    border-color:rgba(59,130,246,.35); 
  }
  .bb-service input[type="checkbox"]{ 
    margin-top:4px; 
    transform: translateY(2px) scale(1.15); 
  }
  .bb-s-body{ 
    display:flex; 
    flex-direction:column; 
    gap:6px; 
    width:100%; 
  }
  .bb-s-meta{ 
    display:flex; 
    justify-content:space-between;
    align-items:center; 
    gap:10px; 
    margin-top: 6px; 
  }
  .bb-qty input{ 
    width:50px; 
    text-align:center; 
    background:transparent; 
    border:0; 
    color:#fff; 
    font-weight:700; 
  }
  
  /* Checkout */
  .bb-checkout{ 
    position:sticky; 
    top:24px; 
    border-radius:16px;
    padding:18px; 
    background:linear-gradient(135deg,#1e3a8a,#2563eb); 
    box-shadow:0 10px 28px rgba(0,0,0,.35); 
    display:flex; 
    flex-direction:column; 
    gap:12px; 
  }
  .bb-checkout-head{ 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:12px; 
  }
  .bb-reset{ 
    font-size:12px; 
    padding:6px 10px; 
    border-radius:999px; 
    border:0; 
    cursor:pointer; 
    color:#fff; 
    background: rgba(255,255,255,.12); 
  }
  .bb-bs-items{ 
    max-height:220px; 
    overflow:auto; 
    display:flex; 
    flex-direction:column; 
    gap:6px; 
    list-style:none; 
    padding:0; 
  }
  .bb-bs-row{ 
    display:flex; 
    justify-content:space-between; 
    border-top:1px dashed rgba(255,255,255,.25); 
    padding-top:6px; 
  }
  .bb-small{ 
    font-size:14px; 
    opacity:.9; 
  }
  .bb-bs-total{ 
    display:flex; 
    justify-content:space-between; 
    font-size:22px; 
    font-weight:900; 
  }
  .bb-bs-cta{ 
    text-align:center; 
    margin-top:8px; 
    padding:12px 20px; 
    border-radius:999px; 
    background:linear-gradient(135deg,#3b82f6,#06b6d4); 
    color:#fff; 
    font-weight:800; 
    text-decoration:none; 
  }
  .bb-bs-note{ 
    margin:0; 
    font-size:12px; 
    opacity:.85; 
  }
  .bb-bs-included{ 
    font-size:13px; 
    opacity:.92; 
    margin:6px 0 8px; 
    padding-left:16px; 
  }
  .bb-bs-included li::marker{ 
    color:#8ec5ff; 
  }
  
  /* Badge (tier popust) */
  .bb-badge{ 
    background:#22c55e; 
    color:#0c1a34; 
    font-size:12px; 
    padding:3px 8px; 
    border-radius:8px; 
    margin-left:6px; 
    font-weight:800; 
  }
  .bb-badge:empty{
    display:none;
  }
  
  /* Spotlight */
  .bb-spotlight{ 
    position:relative; 
    overflow:hidden; 
  }
  .bb-spotlight::after{ 
    content:""; 
    position:absolute; 
    inset:-20%; 
    opacity:0; 
    pointer-events:none; 
    transition:opacity .2s; 
    background:
      radial-gradient(220px 160px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 60%),
      radial-gradient(220px 160px at var(--mx,50%) var(--my,50%), rgba(0,0,0,.08), transparent 60%); 
    mix-blend-mode:overlay; 
  }
  .bb-spotlight.bb-hover::after{ 
    opacity:1; 
  }
   
  
  /* >>> Responzivna prilagodjavanja */
  @media (max-width: 1024px){
    .bb-wrap{
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .bb-packages-row{
      flex-wrap: wrap;
      justify-content: stretch;
    }
    .bb-pkg-card{
      flex:1 1 100%;
      max-width: 100%;
    }
    .bb-checkout{
      position: static;
    }
  }
  /* Modal */
.bb-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:1000;
  opacity: 0;
  pointer-events: none;
}
#bb-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
#bb-modal.is-open .bb-modal__backdrop{
  animation: bbBackdropIn .26s ease-out both;
}
#bb-modal.is-closing .bb-modal__backdrop{
  animation: bbBackdropOut .18s ease-in both;
}

/* Dijalog animacije */
#bb-modal.is-open .bb-modal__dialog{
  animation: bbModalIn .28s cubic-bezier(.22,.61,.36,1) both;
  will-change: transform, opacity, filter;
}
#bb-modal.is-closing .bb-modal__dialog{
  animation: bbModalOut .2s cubic-bezier(.4,0,.6,1) both;
}

/* Keyframes */
@keyframes bbBackdropIn{
  from{opacity:0; backdrop-filter: blur(0px);}
  to  {opacity:1; backdrop-filter: blur(2px);}
}
@keyframes bbBackdropOut{
  from{opacity:1; backdrop-filter: blur(2px);}
  to  {opacity:0; backdrop-filter: blur(0px);}
}
@keyframes bbModalIn{
  from{opacity:0; transform: translateY(10px) scale(.98); filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));}
  to  {opacity:1; transform: translateY(0)    scale(1);    filter: drop-shadow(0 18px 60px rgba(0,0,0,.6));}
}
@keyframes bbModalOut{
  from{opacity:1; transform: translateY(0)    scale(1);    filter: drop-shadow(0 18px 60px rgba(0,0,0,.6));}
  to  {opacity:0; transform: translateY(8px)  scale(.985); filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));}
}

/* Accessibility: smanji pokret ako korisnik to traži */
@media (prefers-reduced-motion: reduce){
  #bb-modal .bb-modal__backdrop,
  #bb-modal .bb-modal__dialog{
    animation: none !important;
    transition: none !important;
  }
}
#bb-modal .bb-form textarea{
  resize: vertical;        
  max-height: 220px;       
  min-height: 90px;        
  overflow: auto;
}
.bb-modal.is-open{
  display:block;
}
.bb-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
}
.bb-modal__dialog{
  position:relative;
  max-width:520px;
  margin:6vh auto;
  padding:20px;
  border-radius:16px;
  background:linear-gradient(135deg,#0f172a,#1e293b);
  border:1px solid rgba(255,255,255,.12);color:#fff;
  box-shadow:0 18px 60px rgba(0,0,0,.6);
}
.bb-modal__title{
  margin:0 0 10px;
  font-size:20px;
  font-weight:800;
}
.bb-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-size:18px;
}
.bb-form__row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.bb-form input,.bb-form textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:#fff;
  outline:none;
}
.bb-form input:focus,.bb-form textarea:focus{
  border-color:rgba(59,130,246,.55);}

.bb-form__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:8px;
}
.bb-btn{
  padding:10px 16px;
  border-radius:999px;
  border:0;
  background:linear-gradient(135deg,#3b82f6,#06b6d4);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.bb-btn--ghost{
  background:rgba(255,255,255,.12);
}
.bb-form__hint{
  opacity:.75;
  font-size:12px;
  margin-top:8px;
  margin-bottom:0;
}

  
  /*--------------Promo----------------*/
  
  
  #promo{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: 500px;
    z-index: 1000;
    position: relative;
  }
  #promo-lv{
    width: 25%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(0, 0, 0);
    position: relative;
  }
  #nas-lv{
    color: white;
    font-size: 40px;
    line-height: 65px;
    text-align: center;
    z-index: 100;
    text-shadow: 2px 2px 2px black;
    padding:0px 40px;
  }
  #sl-lv{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 60%;
    z-index: 1;
  }
  #sl-lv:hover{
  opacity: 100%;
  transition: 0.3s ease-in-out;
  }
  #nas-lv:hover ~ #sl-lv{
  opacity: 100%;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  }
  #sr{
    width: 50%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(to left, #0a416e, #0a295e);
    gap: 0px;
    position: relative;
  }
  #sl-sr{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 70%;
  }
  #sl-sr:hover{
  opacity: 100%;
  transition: 0.3s ease-in-out;
  }
  
  #nas-sr{
    color: white;
    font-size: 60px;
    text-align: left;
    align-self: flex-start;
    margin-left: 50px;
    font-weight: 650;
    z-index: 100;
    margin-bottom: -10px;
    text-shadow: 2px 2px 2px black;
  }
  #nas-sr:hover ~ #sl-sr{
  opacity: 100%;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  }
  #tek-sr{
    color: white;
    font-size: 21px;
    text-align: left;
    padding: 50px;
    line-height: 40px;
    font-weight: 550;
    z-index: 100;
    text-shadow: 2px 2px 2px black;
  }
  #tek-sr:hover ~ #sl-sr{
  opacity: 100%;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  }
  #promo-ds{
    width: 25%;
    height: 100%;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to left, #4b75bd, #155c96);
    position: relative;
  }
  #sl-ds{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 80%;
    filter: brightness(0.5);
  }
  #sl-ds:hover{
  opacity: 100%;
  filter: brightness(1);
  transition: 0.3s ease-in-out;
  }
  #dgm-ds:hover ~ #sl-ds{
  opacity: 100%;
  filter: brightness(1);
  transition: 0.3s ease-in-out;
  }
  #dgm-ds{
  display: inline-block;
  padding: 20px 60px;
  background: linear-gradient(135deg, #0c3f69, #244c91);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 1;
  }
  #dgm-ds:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  }
  #dgm-ds:active{
  transform: translateY(0);
  box-shadow: 0 3px 7px rgba(0,0,0,0.2);
  }
  
  
  /* FOOTER */
  
  #footer{
    height: 250px;
    width: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    /* background: linear-gradient(to left, #1C2023, #111c4d); */
    background-color: #0A192F ;
    z-index: 100;
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease-in-out;
  }
  #footer.in-view {
  opacity: 1;
  transform: translateY(0);
  }
  #lev{
    width: 25%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #lg-donji{
    width: 150px;
    height: 150px;
  }
  #sred{
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .sred-nas{
    color: white;
    text-align: left;
    line-height: 10px;
    font-weight: 600;
    gap: 10px;
    display: flex;
    align-items: center;
  }
  .sred-nas2{
    color: white;
    text-align: left;
    line-height: 10px;
    font-weight: 600;
  }
  .fa-envelope{
    color: white;
  }
  #a{
    text-decoration: none;
    list-style: none;
    color: rgb(36, 164, 214);
  }
  #a:hover{
    color: rgb(29, 135, 177);
    transition: 0.2s;
  }
  #izmedju{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: .25s;
    text-decoration: none;
    gap: 30px;
  }
  .nav-izlistani{
    position: relative;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    list-style:none;
    text-align: left;
  }
  .nav-izlistani:hover{
    color: #494d72;
  }
  li{
    list-style: none;
  }
  #desn{
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 30px;
  }
  .sl-desn{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    margin: 0 8px;
  }
  .sl-desn:hover{
    background-color: #00E0FF;
    transform: scale(1.1);
    cursor: pointer;
    }
  
  
    a{
    z-index: 100;
    text-decoration: none;
  }
  #s{
    margin-left: 500px;
    width: 850px;
    height: 900px;
  }
    /* Za sve: inicijalno nevidljivi */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 1.2s ease, transform 1.2s ease;
    transform: none;
    position: relative;
  }
  
  /* Kada su vidljivi */
  .animate-on-scroll.visible {
    opacity: 1;
    transform: none;
  }
  
  /* Za fade in bez pomeranja (desc) */
  .fade-only {
    transform: none;
    transition: 0.8s ease-in-out;
  }
  
  /* Za ulazak sa leve strane */
  .fade-left {
    transform: translateX(-50px);
  }
  
  /* Za ulazak sa desne strane */
  .fade-right {
    transform: translateX(50px);
  }
  
  /* scroll */
  
/* samo za WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0f172a;  /* tamna pozadina */
}
::-webkit-scrollbar-thumb {
  background: #2563eb;  /* plavi slider */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1e40af;
}