:root {
  --din:'DINPro';
  --lat: "Lato", sans-serif;

  --primary:#005ca7;
  --siva:#FFFFFF17;
  --light:#878F57;
  --textwhite:#F6F8EB;
  --landing-width:84.17vw;
  --landing-width-mobile:86vw;
  --boxshadow:0px 0px 30px 0px #0000000F;


--d10:0.52vw;
   --d11:0.57vw;
 
   --d12:0.63vw;
   --d13:0.68vw;
    --d14:0.73vw;
    --d15:0.78vw;
    --d16:0.83vw;
    --d18:0.94vw;
       --d19:0.99vw;
    --d20:1.04vw;
    --d22:1.15vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d28:1.46vw;
    --d30:1.56vw;
     --d32:1.67vw;
    --d34:1.77vw;
    --d36:1.88vw;
    --d44:2.29vw;
    --d40:2.08vw;
    --d48:2.5vw;
    --d54:2.81vw;
    --d56:2.92vw;
    --d64:3.33vw;
    --d70:3.65vw;
       --d75:3.91vw;
    --d80:4.17vw;
    --d84:4.38vw;
    --d100:5.21vw;
    --d110:5.73vw;
    --d120:6.25vw;
    --d156:8.13vw;
    --d904:47.08vw;


      --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;
    --m22:6.11vw;
    --m24:6.67vw;
    --m25:6.94vw;
    --m28:7.78vw;
    --m30:8.33vw;
    --m32:8.89vw;
    --m34:9.44vw;
    --m36:10vw;
    --m40:11.11vw;
    --m44:12.22vw;
    --m45:12.50vw;
    --m48:13.33vw;
    --m56:15.56vw;
    --m64:17.78vw;
    --m68:18.89vw;
    --m80:22.22vw;
    --mmt: 27.78vw;

  






 

}



.proizvodi-main{
    width: var(--landing-width);
    margin: auto;
}

.main-heading{
    font-family: var(--din);
    font-weight: 500;
    font-size: var(--d64);
    color: white;
    margin-top: 0;
    text-align: center;
    margin-bottom:var(--d44);
    
}


.sub-heading{
    font-family: var(--lat);
    font-weight: 300;
    font-size: var(--d24);
    color: white;
    margin-top: 0;
    text-align: center;
    margin-bottom:var(--d64);
    text-transform: uppercase;
    
}

.lower-mask{


background: linear-gradient(0deg, #000000 25.96%, rgba(0, 0, 0, 0.45) 68.27%, rgba(102, 102, 102, 0) 100%);


}






.proizvodi-main a.seaall{
  color: #2F80ED;
  text-transform: uppercase;
  margin-top: var(--d84);
  margin-bottom: var(--d84);
  font-family: var(--din);
  font-weight: 300;
  font-size: var(--d18);
  line-height: var(--d22);
  display: block;
  letter-spacing: 6px;
    transition: transform 0.6s ease, z-index 0s; /* Glatko povećanje */
    cursor:pointer;
    text-align: center;

}

.proizvodi-main a.seaall:hover{
  color: white;


  transform: scale(1.1); /* Povećava element za 10% */

}

.proizvodi-main .proizvodi-categories{
  width: 83.97vw;
  display: flex;
  justify-content: space-between;
  margin: auto;
  margin-bottom: 9.38vw;
}

.proizvodi-main .proizvodi-categories a{
  color: white;
  line-height: var(--d22);
  font-size: var(--d18);
  letter-spacing: 6px;
  font-family: var(--din);
  font-weight: 900;
  text-decoration: none;

}




.products-landing{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.products-landing .product{
  width:18.3vw ;
  height: 21.35vw;
  background-color: var(--primary);
  cursor: pointer;
  margin-bottom: var(--d80);
}



.product {
  transition: transform 0.6s ease, z-index 0s; /* Glatko povećanje */
  position: relative; /* Neophodno da bi z-index radio */
  z-index: 1;
  background-color: white; /* Da se ne providi sadržaj iza ako imaš marginu */
}

.product:hover {
  transform: scale(1.1); /* Povećava element za 10% */
  z-index: 10; /* Osigurava da je "iznad" ostalih */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Dodaje dubinu za bolji efekat */
}


.product img{
  width: 14.40vw;
  margin-top: var(--d25);
  margin-left:var(--d40) ;
   margin-right:var(--d40) ;
  padding-bottom: var(--d16);



border-bottom: 1px solid rgba(255, 255, 255, 0.5);


}

.product h2{
  color: white;
  line-height: var(--d25);
  font-family: var(--lat);
  font-size: var(--d16);
  font-weight: 600;
  text-align: center;
  margin-left: 0;
  margin-top: var(--d20);
  margin-bottom: 0;
}

.product h3{
 color: white;
  line-height: var(--d25);
  font-family: var(--lat);
  font-size: var(--d16);
  font-weight: 600;
  text-align: center;
  margin-left: 0;
  margin-top: var(--d20);
  margin-bottom: 0;
  padding-left: 3vw;
    padding-right: 3vw;

}

.product .product-detail{
 color: white;
  line-height: var(--d25);
  font-family: var(--lat);
  font-size: var(--d16);
  font-weight: 600;
  text-align: center;
  margin: 0;
  
    
    position:absolute;
    bottom:1vw;
    right:1vw;

}




.product {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}




.pagination-container {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: var(--d134);
}

.pagination-container button {
    
   
    outline: none;
    border: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
    transition: 0.3s;
    width:4.53vw ;
    height:3.23vw ;
   
}

.pagination-separator {
    width: 1px;
    height:var(--d34);
    background-color: #fff;
    align-self: center;
}

/* Tvoja aktivna klasa */
.pagination-container button.active {
    background-color: #003478;
    color: white;
    border-color: #003478;
    font-weight: bold;
}

.pagination-container button:hover:not(.active) {
    background-color: #f0f4f8;
    color: var(--primary);
}

/* PRODUCTS LANDING END*/

.hlower{
  margin-top: 0!important;
}




.katalog-proizvoda{
    background-image: url('./img/katalogproizvodi2.png');
    background-size: cover;
    width: var(--landing-width);
    height: 25.89vw;
    margin-top: 6.86vw;
    margin-bottom: 5vw;

}

.katalog-proizvoda h1{
    color: white;
    font-size: var(--d64);
    font-weight: 400;
    line-height: var(--d64);
    padding-top: 6.93vw;
       margin: 0;
    margin-left: 3.96vw;
 
}

.katalog-proizvoda button{
    background: var(--primary);
    color: white;
    font-family: var(--lat);
    font-weight: 500;
    width: 14.17vw;
    height:4.79vw ;
     margin-left: 3.96vw;
     margin-top: 3.91vw;
   
   
    
     border: none;
     line-height: var(--d25);
     font-size: var(--d20);

     cursor:pointer;

}


.katalog-proizvoda button:hover{
  background-color: white;
  color: var(--primary);
  
}

.bottom-shadow{
   
    box-shadow: 0 -50px 100px -20px #003478;
    clip-path: inset(-200px 0px 0px 0px);
    width: 100vw;
    height: 5vw;
    background: transparent;
    
}






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

      


    .proizvodi-main {
    width: 80.00vw;
    margin: auto;

    margin-top: 22vw;
}



.menu-btn {
        display: block; /* Prikaži hamburger */
        margin: auto;
        margin-bottom: 4vw;
        border: none;
    background: none;
    cursor: pointer;
    }

   .bar {
        display: block;
        width: 3.74vw;
        height: 1px;
        margin: 5px 0;
        background-color: #ffffff;
        transition: 0.3s;
    }

    
.proizvodi-main .product-categories  {
        display: none; /* Sakrij meni */
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    /* Klasa koju JS dodaje/uklanja */
    
.proizvodi-main .product-categories.active {
        display: flex;
        position: static;
        background: black;
        width: 80vw;
        padding: 0;
        text-align: center;
    }
    .proizvodi-main .product-categories.active a{
      font-size: var(--m10);
      margin-bottom: 1vw;
      line-height: var(--m10);
    }

    .main-heading{
      font-size: var(--m15);
      letter-spacing: 2px;

    }
    .products-landing{
      margin-top: 5vw;
    }


    .products-landing .product {
    width: 23.61vw;
    height: 38.76vw;
    background-color: var(--primary);
    cursor: pointer;
    margin-bottom: var(--m16);
}

 .products-landing a {
    width: 23.61vw;
    height: 38.76vw;
    background-color: var(--primary);
    cursor: pointer;
    margin-bottom: var(--m16);
}



.product img {
    width:18.04vw;
    margin-top: var(--m10);
    margin-left: var(--m10);
    margin-right: var(--m10);
    padding-bottom: 1.39vw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.product h3{
  font-size: 1.94vw;
  margin-top: var(--m10);
  line-height: var(--m10);
}

.pagination-container{
  margin-top: 5vw;
}

.pagination-container button {
    outline: none;
    border: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
    transition: 0.3s;
    width: 15.00vw;
    height: var(--m20);
    font-size: var(--m10);
    font-weight: 700;
}
.pagination-separator{
  height: var(--m20);
}


.katalog-proizvoda{

        background-image: url(./img/katalogproizvodi2.png);
    background-size: cover;
    width: 100vw;
    height: 49.72vw;
    margin-top: var(--m32);
    margin-bottom: 0;

}



.katalog-proizvoda h1 {
    color: white;
    font-size: var(--m24);
    font-weight: 400;
    line-height: var(--m28);
    padding-top: var(--m40);
    margin: 0;
    margin-left:var(--m30);
    width: 60%;
}

.katalog-proizvoda button{
        width: 20.17vw;
    height: 6.79vw;
    margin-left: var(--m30);
    margin-top: 3.91vw;
    font-size: 1.67vw;

}



.bottom-shadow {
    box-shadow:none;
    clip-path: none;
    width: 100vw;
    height:8.06vw;
    background-image: url('./img/bottmshadow.svg');
    background-size: cover;
}









  }