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


:root {
    --rob:"Roboto", sans-serif;
    --outfit:"Outfit", serif;
    --primary:#0071CE;
    --plava:#0475BB;

    --bijela:#F0F7FF;
    --secondary:#0971CE;
    --light:#878F57;
    --textwhite:#F6F8EB;
    --landing-width:66.25vw;
    --landing-width-mobile:86vw;
    --d12:0.63vw;
    --d13:0.68vw;
    --d14:0.73vw;
    --d15:0.78vw;
    --d16:0.89vw;
    --d18:0.94vw;
    --d20:1.04vw;
    --d22:1.15vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d30:1.56vw;
    --d40:2.08vw;
    --d48:2.5vw;
    --d64:3.33vw;
    --d80:4.17vw;
    --d120:6.25vw;


    --m10:2.78vw;
    --m11:3.06vw;
    --m12:3.33vw;
    --m13:3.61vw;
    --m14:3.89vw;
    --m15:4.17vw;
    --m16:4.44vw;
    --m18:5vw;
    --m20:5.56vw;
    --m24:6.67vw;
    --m25:6.94vw;
    --m32:8.89vw;
    --m36:10vw;
    --m40:11.11vw;
    --m48:13.33vw;
    --m64:17.78vw;

    
 





   

}

body{
  margin: 0;
  padding: 0;
  background-color: var(--bijela);
}

.mobhide{
    display: block;
}

.deshide{
    display: none;
}

 @media screen and (min-width:900px){

header{
  background-color: var(--bijela);
  display: flex;
  justify-content: space-between;
  width: 93vw;
  padding-left: 3.5vw;
  padding-right: 3.5vw;
  height: 6.25vw;
  place-items: center;
}

header .left-header img{
  width:3.09vw;

}
header .center-header nav{
  display: flex;
  gap: 2.55vw;
}

.mobile-header, .mobilex{
  display: none;
}


header .center-header nav a ,.subdropdown li a{
  text-decoration: none;
  color: var(--plava);
  font-family: var(--rob);
  font-weight: 500;
  font-size: var(--d13);
  border: none;
 
padding: 0;
width:auto;
  position: relative;
  line-height: var(--d18);
  white-space: normal;
}

.subdropdown li{
  height: 2.76vw;
  align-content: center;
}


.main-menu .has-dropdown .dropdown .has-subdropdown  a .arrow-right-icon{
    padding-right:1vw;
}



header .center-header nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;

  transform: translateX(-50%);
}

header .center-header nav a:hover::after,
header .center-header nav a.active::after {
  width: 100%;
  left: 50%;
}


header .right-header {
  display: flex;
  gap: 1.5vw;
  

}

header .right-header img{
  width: 1.61vw;

}

.left-header img,
.right-header img {
  height: 40px;
}

.center-header nav ul.main-menu {
  list-style: none;
  display: flex;
  gap: 0px;
  position: relative;
  gap:0.92vw;
}

.center-header nav ul.main-menu > li {
  position: relative;
}

.center-header nav ul.main-menu > li > a {
  color: var(--plava);
  text-decoration: none;
  padding: 0;
  display: block;
}

/* Dropdown */

.dropdown {
  display: none;
  position: absolute;
  top: 100%; /* direktno ispod glavne stavke */
  left: -20%;
  background-color: var(--bijela);
  width: 9.80vw;
 
  z-index: 1000;
  list-style-type: none;
  padding:0;
  border-top: 1px solid white;
}

.dropdown li a {

  padding: 0;
  color: var(--plava);
  text-decoration: none;
  white-space: nowrap;
  width: 8.80vw;
  margin-left: 1vw;
}



/* Hover aktivacija dropdowna */
.has-dropdown:hover .dropdown {
  display: block;
}



.has-dropdown > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  color: var(--plava);
  text-decoration: none;
  padding: 10px 15px;
}

.arrow-icon {
  width: 0.63vw;       
  height: 0.63vw;
  transition: transform 0.3s ease;
  transform-origin: center;
  transform: rotate(0deg);
  margin-left: 0.5vw;
}

.has-dropdown:hover .arrow-icon {
  transform: rotate(180deg);
}



/* Desni dropdown koji se pojavljuje sa strane */
.has-subdropdown , .dropdown li{
  position: relative;
   height: 2.76vw;
       align-content: center;
}

.subdropdown li{
    display: none;
}

.has-subdropdown .subdropdown {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  
  background-color: var(--bijela);
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 999;
}

.subdropdown  li{
 
    width: 8.8vw;
    align-content: center;
    height: 2vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    line-height: 1vw;
    padding-right: 1vw;
    
}

.subdropdown li:hover ,.has-subdropdown:hover{
  background: #FFFFFF1A;

}


.has-subdropdown:hover > .subdropdown {
  display: block;
}
.has-subdropdown:hover .subdropdown li{
  display: inline-grid;
}

/* Link sa strelicom desno */
.has-subdropdown > a, .dropdown li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  text-decoration: none;
  color: var(--plava);
}

.arrow-right-icon {
  width: 0.26vw;
  height: 0.52vw;
  transform: rotate(0deg);
}


header .center-header nav .mainlink{
  text-decoration: none;
  color: var(--plava);
  font-family: var(--rob);
  font-weight:500;
  font-size: var(--d14);
  padding-bottom:7px ;
  padding-left: 7px;
  padding-right: 7px;
  text-align: center;
      height: 3vw;
    align-content: center;
  
}

.mainlink .has-dropdown{
  margin-right: 2vw;
}

.has-dropdown{
  margin-right: 0vw;
}
 }
 
 
 
 
 
 
 
 
 




.hero-section {
    position: relative;
    width: 100%;
    
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    background: #101d4a;
    height: 38vw;
    box-sizing: border-box;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-mask {
    position: absolute;
    width: 100vw;
   top: 0;
   left: 0;
    background-image: url("./img/maska.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
    height: 38.10vw;
}




.hero-w {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1200px;
    color: #fff;
    text-align: center;
    top: -5vw;
}

.hero-w h1,
.hero-w h2 {
    font-family: var(--rob);
    color: #0B59a2;
    font-weight: 400;
    font-size:4.47vw ;
    margin: 0;
    line-height: 100%;
}

.hero-w p{
    font-family: var(--rob);
    color: #0B59a2;
    font-weight: 400;
    font-size:1.46vw ;
    margin: 0;
    line-height: 100%;
    width: 39.85vw;
  
    text-align: center;
    margin: auto;

      margin-top: 2.11vw;

}

.hero-w b{
    color: #1E3F5E;
    font-weight: 700;
}










.decenija{
    width: 90vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 5.08vw;
    margin-bottom: 5.08vw;
}

.decenija .left h1{
    color: #0B59a2;
    font-family: var(--rob);
    font-size: 3.25vw;
    font-weight: 500;
    margin: 0;
    width: 34.36vw;
    line-height: 110%;
}

.decenija .left a{
     color: #ffffff;
    font-family: var(--rob);
    font-size: 1.30vw;
    font-weight: 500;
    margin: 0;
    width: 34.36vw;
    line-height: 140%;
    background: #0071CE;
    text-decoration: none;
    display: block;
    border: none;
    margin: none;
    border-radius: 2.6vw;
    text-align: center;
    height: 3.33vw;
        padding: 0;
    align-content: center;
    margin-top: 2.64vw;
    
}

.decenija .right p{
    color: #0B59a2;
    font-family: var(--rob);
    font-size: 1.63vw;
    font-weight: 400;
    margin: 0;
    width: 44.33vw;
    line-height: 110%;
    margin-top: 3.25vw;

}










.partner{
    background-image: url('./img/vodabg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 90vw;
    margin: auto;
    height:29.56vw ;
    margin-bottom: 5.61vw;
}

.partner h1{
     color: #ffffff;
    font-family: var(--rob);
    font-size: 3.90vw;
    font-weight: 700;
    margin: 0;
    width: 39.20vw;
    line-height: 110%;
    padding-top: 8.78vw;
    margin-left:6.47vw ;
    margin-bottom: 1.71vw;

}


.partner p{
     color: #ffffff;
    font-family: var(--rob);
    font-size: 1.63vw;
    font-weight: 400;
    margin: 0;
    width: 39.20vw;
    line-height: 110%;
     margin-left:6.47vw ;


}






.misija{
    background: white;
    box-sizing: border-box;
    padding: 5vw;

}


.misija h1{
     color: #0B59A2;
    font-family: var(--rob);
    font-size: 3.66vw;
    font-weight: 600;
    margin: 0;
    
    line-height: 110%;
 

}


.misija p{
     color: #0B59A2;
    font-family: var(--rob);
    font-size: 2.60vw;
    font-weight: 300;
    margin: 0;
    
    line-height: 110%;
     margin-top:0.47vw ;


}

.kartice{
    border-radius:1.46vw ;
    box-shadow: 6px 42px 36.5px -11px rgba(0, 0, 0, 0.13);
    background-color: #F0F7FF;
    padding: 5vw;
    width: 100vw;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.67vw;
    z-index: 3;
    position: relative;
    
}

.kartica{
    box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background: #0071CE;
    border-radius:1.46vw ;
    text-align: center;
      width:27.91vw ;
    height:26.05vw ;
    position: relative;
    z-index: 5;

}
.kartica img{
    height: 8.95vw;
    margin-top: 2.52vw;
  
}

.kartica h2{
    font-family: var(--rob);
    color: white;
    font-weight: 700;
    margin-top: 2.60vw;
    margin-bottom:1.30vw ;
    font-size: 2.24vw;


}

.kartica p{
    font-family: var(--rob);
    color: white;
    font-weight: 400;
    margin: 0;
    font-size: 1.63vw;
    width: 20.82vw;
    margin: auto;


}

.rjesenja{
    background: linear-gradient(to top, rgba(9, 113, 206, 1) 30%, rgba(66, 139, 198, 0.1) 100%);
    width: 100vw;
    height: auto;
    position: relative;
    z-index: 0;
    margin-top: -1vw;
    padding-top: 5vw;
    padding-bottom: 10.65vw;

}

.pametno{
    width: 79.34vw;
    border-radius: 1.46vw;
    background-color: white;
    text-align: center;
    margin: auto;
    padding-top: 6.26vw;
    padding-bottom: 6.26vw;
    

}

.pametno h1{
     font-family: var(--rob);
    color: #0071CE;
    font-weight: 600;
    margin: 0;
    font-size: 3.66vw;
    
    margin:0;
    
}



.pametno p{
     font-family: var(--rob);
    color: #0071CE;
    font-weight: 300;
    margin: 0;
    font-size: 2.60vw;
    margin-top: 2vw;
    
    
    
}

.pr{
    

        width: 79.34vw;
    border-radius: 1.46vw;
    margin: auto;

    margin-top: 2.89vw;
    background-size: cover;
    background-repeat: no-repeat;
    height: 25.58vw;
    position: relative;

}

.pr h1{
         font-family: var(--rob);
    color: #0475BB;
    font-weight: 700;
    margin: 0;
    font-size: 2.24vw;
    padding-top: 2.56vw;
    padding-left: 10.57vw;
    padding-bottom: 2.24vw ;
    

}

.pr p{
         font-family: var(--rob);
    color: #0475BB;
    font-weight: 400;
    margin: 0;
    font-size: 1.63vw;
       padding-left: 10.57vw;
       width: 31.76vw;

    

}

.prarrow{
    width:4.80vw ;
    position: absolute;
    bottom: 0;
    left: 0;
}

.pr1{
    background-image: url('./img/pr1.png');
 
}

.pr2{
    background-image: url('./img/pr2.png');
 
}


.pr3{
    background-image: url('./img/pr3.png');
 
}









footer{
    background-color: #0971CE;
    background-image: none;
    
}
.upper-footer, footer .lower-footer{
    width: 84.14vw;
}














 
 
 
 
 
 
 
 

 @media screen and (max-width:900px){
  header{
    width: 73.17vw;
    display: block;
    text-align: left;
    margin: 0;
    height: auto;
    place-items: unset;
    background-color: var(--primary);
    position: absolute;
    z-index: 2;
    display: none;
  }

  header .left-header img {
    width: 8.46vw;
    margin-left: var(--m24);
    margin-top: var(--m36);
}


header .center-header nav {
    display: block;
    gap: 2.55vw;
}


.center-header nav ul.main-menu {
    list-style: none;
    display: block;
    gap: 0px;
    position: relative;
}


header .center-header nav .mainlink {
    text-decoration: none;
        color: white;
        font-family: var(--rob);
        font-weight: 600;
        font-size: var(--m13);
      
        text-align: left;
        height: 16.94vw;
        align-content: center;
        white-space: normal;
        line-height: 9vw;
        border-bottom: 1px solid white;
        width: 59.72vw;
        display: block;
        
        margin: auto;
}


.dropdown li a{
    
    text-decoration: none;
        color: white;
        font-family: var(--rob);
        font-weight: 400;
        font-size: var(--m13);
      
        text-align: left;
        height: 13.94vw;
        align-content: center;
        white-space: normal;
        line-height: 5vw;
       
        width: 59.72vw;
        display: block;
        
        margin: auto;
}
    


.has-subdropdown a{
   text-decoration: none;
        color: white;
        font-family: var(--rob);
        font-weight: 400;
        font-size: var(--m13);
      
        text-align: left;
        height: 13.94vw;
        align-content: center;
        white-space: normal;
        line-height: 5vw;
       
        width: 59.72vw;
        display: block;
        
        margin: auto;
}

.subdropdown li a{
  text-decoration: none;
        color: white;
        font-family: var(--rob);
        font-weight: 300;
        font-size: var(--m11);
      
        text-align: left;
        height: 4.94vw;
        align-content: center;
        white-space: normal;
        line-height: 5vw;
       
        width: 50.72vw;
        display: block;
        
        margin: auto;

}

.arrow-right-icon{
  display: none;
}

.arrow-icon{
height: 7.39vw;
        width: 2.50vw;
        float: right;
        transition: transform 0.3s ease;
  transform-origin: center;
  transform: rotate(-90deg);
  margin-left: 0.5vw;

}

.arrow-icon.rotate {
  transform: rotate(-360deg);
}

/* Glavni dropdownovi */
.dropdown,
.subdropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* Kad se otvori */
.dropdown.open,
.subdropdown.open {
  max-height: 1000px; /* dovoljno visoko za sadržaj */
  
}

/* Reset liste */
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}






/* Sakrij dropdownove po defaultu */
.main-menu .dropdown,
.main-menu .subdropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* Kad je aktivan */
.main-menu .dropdown.open,
.main-menu .subdropdown.open {
  max-height: 1000px; /* dovoljno visoko da obuhvati sve stavke */
}

.right-header{
  width: 29.72vw;
  display: flex;
  justify-content: space-between;
  margin-left: var(--m24);
  margin-top: 12.22vw;
  padding-bottom: 25.56vw;
}

.right-header img{
  width: 5.56vw;
}

.mobile-header{
  display: flex;
  position: absolute;
  justify-content: space-between;
  z-index: 10;
  top: 0;
  left: 0;
  height: 15.67vw;
  background-color: var(--bijela);
  width: 100vw;
}

     .mobile-header .logo-mobile {
        width: 8.46vw;
        margin-left: var(--m24);
        
    }
    .mobile-header .hamburger-mobile {
        width: 7.5vw;
        margin-right: var(--m24);
        
    }

    .mobilex{
      position: absolute;
      width: var(--m13);
      top: 12.50vw;
      left: 62.78vw;
      z-index: 2;
      cursor: pointer;
      

    }

    #mobileMenu {
 
  left: -100%; /* sakriven izvan ekrana */
 
 
  transition: left 0.3s ease-in-out;

}

#mobileMenu.active {
  left: 0;
  display: block;
  top: 0;
}




    









    

    
  }

  





























  /* ============================= */
/* BLAGE ANIMACIJE - DODATI NA KRAJ */
/* ============================= */


/* Generalno glađe ponašanje elemenata */
.decenija,
.partner,
.misija,
.kartice,
.pametno,
.pr {
    will-change: transform, opacity;
}


/* Ulaz prve tekstualne sekcije */
.decenija .left {
    animation: fadeLeft 0.9s ease forwards;
}

.decenija .right {
    animation: fadeRight 0.9s ease forwards;
}


/* Dugme - blagi hover */
.decenija .left a {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.decenija .left a:hover {
    transform: translateY(-0.25vw);
    box-shadow: 0 0.8vw 1.8vw rgba(0, 113, 206, 0.28);
    background: #0B59A2;
}


/* Lagani sjaj preko dugmeta */
.decenija .left a::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.65s ease;
}

.decenija .left a:hover::after {
    left: 140%;
}


/* Partner sekcija - blagi ulaz i hover */
.partner {
    animation: fadeUp 0.9s ease forwards;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    overflow: hidden;
}

.partner:hover {
    transform: translateY(-0.35vw);
    box-shadow: 0 1.2vw 2.8vw rgba(0, 80, 150, 0.18);
}


/* Tekst unutar partner sekcije */
.partner h1,
.partner p {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.partner:hover h1,
.partner:hover p {
    transform: translateX(0.45vw);
}


/* Misija naslov - blagi ulaz */
.misija h1 {
    animation: fadeLeft 0.8s ease forwards;
}

.misija p {
    animation: fadeLeft 0.8s ease forwards;
    animation-delay: 0.12s;
}


/* Kartice - hover efekat */
.kartica {
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    overflow: hidden;
}

.kartica:hover {
    transform: translateY(-0.7vw);
    box-shadow: 0 1.2vw 2.8vw rgba(0, 80, 150, 0.25);
    background: #0B59A2;
}


/* Ikone na karticama */
.kartica img {
    transition: transform 0.35s ease;
}

.kartica:hover img {
    transform: scale(1.08) translateY(-0.25vw);
}


/* Tekst na karticama */
.kartica h2,
.kartica p {
    transition: transform 0.35s ease;
}

.kartica:hover h2,
.kartica:hover p {
    transform: translateY(-0.2vw);
}


/* Pametna rješenja box */
.pametno {
    animation: fadeUp 0.9s ease forwards;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.pametno:hover {
    transform: translateY(-0.35vw);
    box-shadow: 0 1vw 2.2vw rgba(0, 80, 150, 0.15);
}


/* Product kartice */
.pr {
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
    overflow: hidden;
}

.pr:hover {
    transform: translateY(-0.55vw);
    box-shadow: 0 1.4vw 3vw rgba(0, 70, 140, 0.24);
    filter: brightness(1.03);
}


/* Tekst u product karticama */
.pr h1,
.pr p {
    transition: transform 0.35s ease;
}

.pr:hover h1,
.pr:hover p {
    transform: translateX(0.5vw);
}


/* Strelica na product karticama */
.prarrow {
    transition: transform 0.35s ease;
    cursor: pointer;
}

.pr:hover .prarrow {
    transform: translate(0.45vw, -0.45vw);
}


/* Blago plutanje strelica dok miruju */
.prarrow {
    animation: softArrowMove 2.8s ease-in-out infinite;
}


/* Animacije */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(1.6vw);
    }

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

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-1.6vw);
    }

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

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(1.6vw);
    }

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

@keyframes softArrowMove {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0.28vw, -0.28vw);
    }
}


/* Da animacije ne smetaju korisnicima koji imaju isključene animacije */
@media (prefers-reduced-motion: reduce) {
    .decenija .left,
    .decenija .right,
    .partner,
    .misija h1,
    .misija p,
    .pametno,
    .prarrow {
        animation: none !important;
    }

    .decenija .left a,
    .partner,
    .kartica,
    .kartica img,
    .kartica h2,
    .kartica p,
    .pametno,
    .pr,
    .pr h1,
    .pr p,
    .prarrow {
        transition: none !important;
    }
}













/* ============================= */
/* HERO TEXT LOAD ANIMATION */
/* ============================= */

.hero-w {
    overflow: hidden;
}

/* početno stanje */
.hero-w h1,
.hero-w h2,
.hero-w p {
    opacity: 0;
    transform: translateY(1.6vw);
    filter: blur(0.35vw);
    animation: heroTextReveal 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* redoslijed učitavanja */
.hero-w h1 {
    animation-delay: 0.25s;
}

.hero-w h2 {
    animation-delay: 0.45s;
}

.hero-w p {
    animation-delay: 0.7s;
}

/* bold dijelovi naslova */
.hero-w h1 b,
.hero-w h2 b {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.8vw) scale(0.96);
    animation: heroBoldReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* delay za bold riječi */
.hero-w h1 b {
    animation-delay: 0.55s;
}

.hero-w h2 b {
    animation-delay: 0.75s;
}

/* animacija teksta */
@keyframes heroTextReveal {
    0% {
        opacity: 0;
        transform: translateY(1.6vw);
        filter: blur(0.35vw);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* animacija bold riječi */
@keyframes heroBoldReveal {
    0% {
        opacity: 0;
        transform: translateY(0.8vw) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* mala fina hover interakcija samo na desktopu */
@media (hover: hover) {
    .hero-w h1,
    .hero-w h2 {
        transition: letter-spacing 0.35s ease, transform 0.35s ease;
    }

    .hero-w:hover h1,
    .hero-w:hover h2 {
        letter-spacing: 0.03vw;
    }
}

/* mobile korekcija da blur/translate ne budu preveliki */
@media (max-width: 768px) {
    .hero-w h1,
    .hero-w h2,
    .hero-w p {
        transform: translateY(18px);
        filter: blur(4px);
    }

    .hero-w h1 b,
    .hero-w h2 b {
        transform: translateY(10px) scale(0.96);
    }

    @keyframes heroTextReveal {
        0% {
            opacity: 0;
            transform: translateY(18px);
            filter: blur(4px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @keyframes heroBoldReveal {
        0% {
            opacity: 0;
            transform: translateY(10px) scale(0.96);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-w h1,
    .hero-w h2,
    .hero-w p,
    .hero-w h1 b,
    .hero-w h2 b {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}









/* ============================= */
/* ONSCROLL ANIMACIJA KARTICA */
/* ============================= */

.kartica {
    opacity: 0;
    transform: translateY(2.2vw) scale(0.96);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        box-shadow 0.45s ease;
}

/* kada kartica uđe u viewport */
.kartica.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: linear-gradient(145deg, #0071CE 0%, #0B59A2 100%);
    box-shadow: 0 1.2vw 2.8vw rgba(0, 113, 206, 0.28);
}

/* mali plavi sjaj preko kartice */
.kartica::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top right,
        rgba(255, 255, 255, 0.24),
        transparent 42%
    );
    opacity: 0;
    transition: opacity 0.55s ease;
    pointer-events: none;
    z-index: -1;
}

.kartica.is-visible::before {
    opacity: 1;
}

/* ikona se malo "napne" kada kartica uđe */
.kartica.is-visible img {
    animation: cardIconPop 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* stagger - da ne uđu sve u isto vrijeme */
.kartica:nth-child(1) {
    transition-delay: 0.05s;
}

.kartica:nth-child(2) {
    transition-delay: 0.14s;
}

.kartica:nth-child(3) {
    transition-delay: 0.23s;
}

.kartica:nth-child(4) {
    transition-delay: 0.12s;
}

.kartica:nth-child(5) {
    transition-delay: 0.21s;
}

@keyframes cardIconPop {
    0% {
        transform: scale(0.86) translateY(0.5vw);
    }

    65% {
        transform: scale(1.1) translateY(-0.25vw);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
    .kartica {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .kartica.is-visible img {
        animation: none !important;
    }
}




  @media screen and (max-width:900px){

    .decenija{
        margin: auto;
        margin-top: 10.20vw ;
        margin-bottom: 10.2vw;
        width: 78.61vw;

        flex-direction: column;

    }
    .decenija .left{
        display: flex;
        width: 78.61vw;
        justify-content: space-between;
    }

    .decenija .left h1{
        font-size: 4.98vw;
        width: auto;
        line-height: auto;
    }
    .decenija .left a {
        height: 5.97vw;
        width: 47.87vw;
        font-size: 1.99vw;
        border-radius: 10vw;
            margin-top: 4.64vw;
    }

    .decenija .right p {
        width: 72.32vw;
        font-size: 2.49vw;
        line-height: 100%;
        margin-top:6.72vw;

    }
    .partner{
        width: 92.54vw;
        border-radius: 7.46vw;
        height: 30.10vw;


    }

    .partner h1 {
    color: #ffffff;
    font-family: var(--rob);
    font-size: 4.98vw;
    font-weight: 700;
    margin: 0;
    width: 39.05vw;
    line-height: 110%;
    padding-top: 5.97vw;
    margin-left: 7.46vw;
    margin-bottom: 2vw;
}

.partner p {
    color: #ffffff;
    font-family: var(--rob);
    font-size: 2.49vw;
    font-weight: 400;
    margin: 0;
    width: 43.78vw;
    line-height: 110%;
       margin-left: 7.46vw;
}

.misija{
    padding-left: 11.19vw;
    padding-top:6.22vw ;
    padding-bottom: 6.22vw;

}
.misija h1{
    font-size: 4.98vw;

}
.misija p{
    font-size: 2.49vw;
    margin-top: 2.49vw;

}
.kartice{
    gap: 3.48vw;
    padding:8.21vw 5.47vw;
    border-radius: 8.96vw;
}
.kartica{
    width: 42.79vw;
    height:37.06vw ;
    border-radius: 8.71vw;

}

.kartica img {
    height: 11.69vw;
    margin-top: 3.11vw;
}

.kartica h2 {
    font-family: var(--rob);
    color: white;
    font-weight: 700;
    margin-top: 2.74vw;
    margin-bottom: 1.49vw;
    font-size: 3.73vw;
}


.kartica p {
    font-family: var(--rob);
    color: white;
    font-weight: 400;
    margin: 0;
    font-size: 2.49vw;
    width: 32.59vw;
    margin: auto;
}

.pametno{
    width: 92.54vw;
    border-radius: 5.46vw;
    display: flex;
    padding-top: 6.22vw;
    padding-bottom: 6.22vw;
    justify-content: space-between;

}
.pametno h1 {
    font-size: 4.98vw;
    width: 41.54vw;
    margin-left: 6.97vw;

}
.pametno p{
    place-content: end;
    font-size: 2.49vw;
    margin-right: 6.97vw;
}

.pr {
    width: 92.54vw;
    border-radius: 7.46vw;
    margin: auto;
    margin-top: 6.22vw;
    background-size: cover;
    background-repeat: no-repeat;
    height: 29.85vw;
    position: relative;
}


.pr h1 {
    font-family: var(--rob);
    color: #0475BB;
    font-weight: 700;
    margin: 0;
    font-size:3.98vw;
    padding-top:4.98vw;
    padding-left: 11.44vw;
    padding-bottom: 2.24vw;
    width: 38.81vw;
}

.pr p {
    font-family: var(--rob);
    color: #0475BB;
    font-weight: 400;
    margin: 0;
    font-size: 1.74vw;
     padding-left: 11.44vw;
    width: 40.55vw;
}

.pr1{
    background-image: url('./img/pr1mob.png');
 
}

.pr2{
    background-image: url('./img/pr2mob.png');
 
}


.pr3{
    background-image: url('./img/pr3mob.png');
 
}


.prarrow {
    width: 5.8vw;
    position: absolute;
    bottom: 0;
    left: 0;
}

.hero-w{
    top: -1vw;
}
    .hero-w h2 , .hero-w h1{
        font-size: 5.97vw;
    }

    .hero-w p{
        font-size:2.74vw ;
        width: 74.88vw;
    }
.hero-section {
        min-height: 76vw;
        padding: 0;

}

header{
    z-index: 23;
    background-color: var(--bijela);
}

header .center-header nav .mainlink,.dropdown li a{
    color: var(--primary);
}
header .center-header nav .mainlink{
            border-bottom: 1px solid var(--primary);
}



.hero-section{
    min-height: 76.87vw;
    height: 76.87vw;
}

.hero-mask{
        background-image: url(./img/mobilemaska.svg);
        height: 60.20vw;
        margin-top: 15.67vw;

}

footer{
    margin-top: 0;
    height: auto;
    padding-bottom: 10vw;
}


.rjesenja{
    margin-top: -7vw;
    padding-top: 12vw;

}















  }