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

  --primary:#005ca7;
  --siva:#FFFFFF17;
  --light:#878F57;
  --textwhite:#F6F8EB;
  --landing-width:84.17vw;
  --landing-width-mobile:77.78vw;
  --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;

  






 

}





.about-landing{
  width: var(--landing-width);
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: var(--d110);
}

.about-landing .left img{
  width:27.67vw ;
}


.about-landing .left h2{
  color: white;
  font-size: var(--d70);
  line-height: var(--d75);
  font-weight: 400;
  margin: 0;
  margin-top:9.11vw ;


}

.about-landing .left p{
  font-family: var(--lat);
  color: white;
  line-height: var(--d25);
  font-size: var(--d20);
  font-weight: 300;

  width: 39.32vw;
  margin-top: var(--d24);
}

.about-landing .left button{
  background-color: var(--primary);
  color: white;
  font-family: var(--lat);
  font-size: var(--d24);
  line-height: var(--d25);
  font-weight: 500;
  width: 13.23vw;
  height: 4.48vw;
  text-transform: uppercase;
  border: none;
  outline: none;
  margin-top: var(--d64);
  cursor: pointer;

}

.about-landing .left button:hover{
  background-color: white;
  color: var(--primary);
}

.about-landing .right img{
  width: 38.39vw;
}


/* ABOUT LANDING END*/


.product-landing{
  width: var(--landing-width);
  margin: auto;
  margin-top: var(--d100);
  text-align: center;
}

.product-landing img.heading{
  width: 26.15vw;
  margin: auto;

}
.product-landing a.seaall{
  color: #2F80ED;
  text-transform: uppercase;
  margin-top: var(--d70);
  margin-bottom: var(--d40);
  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

}

.product-landing a.seaall:hover{
  color: white;


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

}

.product-landing .product-categories{
  width: 83.97vw;
  display: flex;
  justify-content: space-between;
  margin: auto;
  margin-bottom: 4.38vw;
}

.product-landing .product-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;
}

.products-landing .product{
  width:13.43vw ;
  height: 19vw;
  background-color: var(--primary);
  cursor: pointer;
}



.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.4); /* 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: 10.89vw;
  margin-top: var(--d25);
  margin-left:var(--d32) ;
   margin-right:var(--d32) ;
  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: left;
  margin-left: var(--d40);
  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:1vw;
  padding-right:1vw;
}

/* PRODUCTS LANDING END*/

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


.catalogue-landing{
  width: var(--landing-width);
  margin: auto;
  margin-top: 9.38vw;
  display: flex;
  justify-content: space-between;
}

.catalogue-landing .left img{
  width:39.32vw ;
}
.catalogue-landing .right{
  
}
.catalogue-landing .right img{
  width:20.26vw;
  margin-right: 6.88vw;
}

.catalogue-landing .right h1{
  color: white;
  font-size: var(--d70);
  line-height: var(--d75);
  font-weight: 400;
  margin: 0;
  margin-top:9.81vw ;
  width:25.94vw;
  text-align: left;

}

.catalogue-landing .right button{
  background-color: var(--primary);
  color: white;
  font-family: var(--lat);
  font-size: var(--d20);
  line-height: var(--d25);
  font-weight: 500;
  width: 14.17vw;
  height: 4.78vw;
  text-transform: uppercase;
  border: none;
  outline: none;
  margin-top: var(--d70);
  cursor: pointer;

}


.catalogue-landing .right button:hover{
  background-color: white;
  color: var(--primary);
  

}




/*catalogude landing END*/



.brand-landing{
  width: var(--landing-width);
  height: 25.89vw;
  background-image: url('./img/brandlanding2.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: auto;
  box-sizing: border-box;
  padding-top: var(--d44);
  padding-left: var(--d100);
  padding-bottom:  var(--d24);
  margin-top: 8.13vw;

}

.brand-landing h1{
  color:white;
  font-family: var(--lat);
  font-size: var(--d20);
  line-height: var(--d25);
  margin: 0;
  text-transform: uppercase;
  font-weight: 300;
  margin-top: var(--d20);

}


.brand-landing h2{
  color:white;
  font-family: var(--din);
  font-size: var(--d64);
  line-height: var(--d64);
  margin: 0;

  font-weight: 400;
  margin-top: var(--d24);
  width: 28.89vw;

}

.brand-landing p{
  color:white;
  font-family: var(--lat);
  font-size: var(--d15);
  line-height: var(--d25);
  margin: 0;
  text-transform: uppercase;

  font-weight: 300;
  margin-top: var(--d28);
  margin-bottom: var(--d40);
  width: 21.49vw;

}

.brand-landing a{
  color:white;
  font-family: var(--lat);
  font-size: var(--d15);
  line-height: var(--d25);
  margin: 0;
  text-transform: uppercase;

  font-weight: 300;
  margin-top: var(--d34);
  margin-bottom: var(--d64);
  width: 20.49vw;
  margin-right: 1vw;
  cursor: pointer;

}

/* BRAND LANDING END */



.news-landing{
  background-color: var(--primary);
  margin-top:11.82vw;
  padding-bottom:var(--d80);
}
.news-landing .container{
  width: var(--landing-width);
  margin: auto;
}

.news-landing .container a.heading{
  padding-top: var(--d64);
  margin-bottom: var(--d30);
  display: block;
  color: white;
  font-family: var(--din);
  font-size: var(--d16);
  font-weight: 300;
  line-height: var(--d24);



}

.news{
  display: flex;
  justify-content: space-between;
}

.single-news img{
  width:24.53vw ;
  height:15.63vw;
  object-fit:cover;

  transition: transform 0.6s ease, z-index 0s; /* Glatko povećanje */
}

.single-news img:hover{
  transform: scale(1.1); /* Povećava element za 10% */
}

.single-news .date{
  color:white;
  font-family: var(--din);
  font-size: var(--d14);
  font-weight: 300;
  line-height: var(--d24);
  margin-top:var(--d16) ;
  margin-bottom: 0;
}

.single-news .category{
  color:black;
  font-family: var(--din);
  font-size: var(--d14);
  font-weight:600;
  line-height: var(--d24);
  margin-top:0 ;
  margin-bottom: 0;
}


.single-news .heading{
  color:white;
  font-family: var(--din);
  font-size: var(--d22);
  font-weight:400;
  line-height: var(--d24);
  margin-top:var(--d30) ;
  margin-bottom: var(--d30);
  width: 24.58vw;
}


.single-news a{
  color:white;
  font-family: var(--din);
  font-size: var(--d14);
  font-weight:600;
  line-height: var(--d24);
  margin-top:0;
  margin-bottom: 0;
}

.single-news a:hover{
  color: black;

}



/*NEWS LANDING END*/


.menu-btn {
    display: none; /* Sakrij gumb na desktopu */
    border: none;
    background: none;
    cursor: pointer;
}


.custom-nav { display: none; }
    .products-landing {
        display: flex !important; /* Vrati tvoj originalni layout */
        transform: none !important;
        width: 100% !important;
    }


   .aboutcompanymobile{
  display: none;
}

.landing-slider{
  display: none;
}


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

    .pcshow{
      display: none;
    }
.pchide{
  display: block;
}
    
  .about-landing .right .aboutcompany{
    display: none;
  }

      .about-landing{
    margin-top:20vw;
    display: block;
    width: var(--landing-width-mobile);
  }

  .about-landing .left{
    position: relative;
  }

  .about-landing .left img{
    width:46vw;
    margin-left:15.56vw ;
    margin-top: var(--m24);
    position: relative;
  }

  .about-landing .left p{
    font-size: 2.22vw;
    line-height: var(--m10);
    width: 40vw;
    margin-top: var(--m14);
    margin-bottom: var(--m18);
  }
.about-landing .left button{
  position: absolute;
  right:0;
  bottom: 0vw;
  font-size: 1.94vw;
  width: 20vw;
  height: 5.83vw;
}
.about-landing .right img{
  width: 100%;
  margin-top: var(--m18);
}

.product-landing{
  margin-top: 0;
}
.product-landing img.heading{
  width:55vw ;
  margin-top: var(--m44);
}

.product-landing a.seaall{
  margin-top: var(--m15);
  margin-bottom: var(--m10);
  line-height: var(--m22);
  font-size: 2.22vw;
  letter-spacing: 2px;
}


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

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

    
.product-landing .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 */
    
.product-landing .product-categories.active {
        display: flex;
        position: static;
        background: black;
        width: var(--landing-width-mobile);
        padding: 0;
    }
    .product-landing .product-categories.active a{
      font-size: var(--m10);
      margin-bottom: 1vw;
      line-height: var(--m10);
    }























     .products-section-mobile {
    width: 100%;
 
    position: relative;
  }

.products-section-mobile .products-landing {
 display: flex;
  gap: 0px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin: auto;
  height: 34vw;
  padding-top: 6vw;
}
  .products-section-mobile .products-landing::-webkit-scrollbar {
    display: none;
  }

  .products-section-mobile .product {
    flex: 0 0 33%;
    scroll-snap-align: center;
    transition: transform 0.35s ease, opacity 0.35s ease;
    opacity: 0.7;
    transform: scale(1);
    border-radius: 0px;
  }

  .products-section-mobile .product.active-slide {
    opacity: 1;
    transform: scale(1.3);
  }

 

  .products-section-mobile .product h3 {
    text-align: center;
    font-size:1.5vw;
    line-height: 2.22vw;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .products-section-mobile .custom-nav {
    display: flex;
    justify-content: center;
    gap: 0px;
    margin-top: 10px;
    position: relative;
    bottom: 26vw;
  }

  .products-section-mobile .btn-prev{
    position: absolute;
    left: -5vw;
    top: 50%;
  }

    .products-section-mobile .btn-next{
    position: absolute;
    right: -5vw;
    top: 50%;
  }



  .products-section-mobile .btn-prev img,
  .products-section-mobile .btn-next img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .products-landing {
    display: flex !important;
    transform: none !important;
    width: 94% !important;
    
}

.products-landing .product {
    width: 26.16vw;
    height: 30.78vw;
    background-color: var(--primary);
    cursor: pointer;
}


.product img {
    width: 13.33vw;
    margin-top: var(--m14);
    margin-left: var(--m14);
    margin-right: var(--m14);
    padding-bottom: var(--m10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}



.aboutcompanymobile{
  display: flex;
}

    




    .catalogue-landing {
    width: var(--landing-width-mobile);
    margin: auto;
    margin-top: var(--m32);
    display: flex;
    justify-content: normal;
    flex-direction: column-reverse;
}
.catalogue-landing .right{
  position: relative;
}
.catalogue-landing .right img {
    width: 38.06vw;
    margin: auto;
    margin-left: 19.7vw;
}



.catalogue-landing .right h1 {
    color: white;
    font-size: var(--m13);
    line-height: var(--d75);
    font-weight: 400;
    margin: 0;
    margin-top: var(--m32);
    width: 52.94vw;
    text-align: left;
}


.catalogue-landing .right button {
    background-color: var(--primary);
    color: white;
    font-family: var(--lat);
    font-size: 1.38vw;
    line-height: var(--d25);
    font-weight: 500;
    width: 14.72vw;
    height: 4.78vw;
    text-transform: uppercase;
    border: none;
    outline: none;
    margin-top: var(--d70);
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 10vw;
            font-size: 1.94vw;
        width: 20vw;
        height: var(--m22);
}

.catalogue-landing .left img {
    width: var(--landing-width-mobile);
    margin-top: var(--m18);
}





.brand-landing {
    width: 100vw;
    height: 32vw;
    background-image: url(./img/brandlandingmobile.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: auto;
    box-sizing: border-box;
    padding-top: var(--m10);
    padding-left: var(--m22);
    padding-bottom: var(--m18);
    margin-top: 13vw;
}


.brand-landing h1 {
    color: white;
    font-family: var(--lat);
    font-size: 2.22vw;
    line-height: var(--d25);
    margin: 0;
    text-transform: uppercase;
    font-weight: 300;
    margin-top: 0;
}

.brand-landing h2 {
    color: white;
    font-family: var(--din);
    font-size: var(--m12);
    line-height: var(--m15);
    margin: 0;
    font-weight: 400;
    margin-top: 2.5vw;
    width: 28.89vw;
}


.brand-landing p {
    color: white;
    font-family: var(--lat);
    font-size: 1.38vw;
    line-height: 1.5vw;
    margin: 0;
    text-transform: uppercase;
    font-weight: 300;
    margin-top: 1.6vw;
    margin-bottom: var(--d40);
    width: 37.49vw;
    display: none;
}

.brand-landing span img{
  display:none;
}


.brand-landing a {
    color: black;
    /* color: white; */
    font-family: var(--lat);
    font-size: 1.94vw;
    line-height: var(--d25);
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: var(--d34);
    margin-bottom: var(--d64);
    width: 20vw;
    margin-right: 1vw;
    cursor: pointer;
    position: absolute;
    right: var(--m22);
    text-align: center;
    background: white;
    height: var(--m22);
    align-content: center;;
}




      .about-landing{
    margin-top:24vw;
    display: block;
    width: var(--landing-width-mobile);
  }

  .about-landing .left img{
    width:60.67vw;
    margin-left:8.56vw ;
    margin-top: var(--m24);
    position: relative;
  }

  .about-landing .left p{
    font-size: 2.5vw;
    line-height: var(--m10);
    width: 43.61vw;
    margin-top: var(--m14);
    margin-bottom: var(--m18);
  }
.about-landing .left button{
  position: absolute;
  right:0;
  bottom: 0vw;
  font-size: 1.94vw;
  width: 20vw;
  height: var(--m22);
}
.about-landing .right img{
  width: 100%;
  margin-top: var(--m18);
}

.product-landing{
  margin-top: 0;
}
.product-landing img.heading{
  width:55.00vw ;
  margin: auto;
  margin-top: var(--m44);
  
}

.product-landing a.seaall{
  margin-top: var(--m15);
  margin-bottom: var(--m10);
  line-height: var(--m22);
  font-size: 2.22vw;
  letter-spacing: 2px;
}


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

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

    
.product-landing .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 */
    
.product-landing .product-categories.active {
        display: flex;
        position: static;
        background: black;
        width: var(--landing-width-mobile);
        padding: 0;
    }
    .product-landing .product-categories.active a{
      font-size: var(--m10);
      margin-bottom: 1vw;
      line-height: var(--m10);
    }




.news-landing .container{
  width: 66.94vw;

}

.news-landing .container a.heading{
  padding-top: var(--m15);
    margin-bottom: var(--m11);
    display: block;
    color: white;
    font-family: var(--din);
    font-size: var(--m12);
    font-weight: 400;
    line-height: var(--m24);

}


.single-news img {
    width: 66.94vw;
    height: 42.22vw;
    object-fit: cover;
    transition: transform 0.6s ease, z-index 0s;
}


.single-news .heading {
    color: white;
    font-family: var(--din);
    font-size: var(--m12);
    font-weight: 400;
    line-height: var(--m14);
    margin-top: var(--m14);
    margin-bottom: var(--m11);
    width: 64.94vw;
}
.single-news a{
  font-size: var(--m10);
  line-height: var(--m24);
}


.landing-slider{
  display: block;
}

.desktop-news{
  display: none;
}







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









  }