@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;
    --secondary:#0971CE;
    --light:#878F57;
    --textwhite:#F6F8EB;
    --landing-width:66.25vw;
    --landing-width-mobile:86vw;
    --d12:0.63vw;
    --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;
    --mmt: 27.78vw;

    
 





   

}

button{
    cursor:pointer;
}

html{
  scroll-behavior: smooth;
}
/* width */
::-webkit-scrollbar {
    width: 10px;
    font-size: var(--outfit);
    
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: white;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--primary);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
  }
.pcshow{
  display: block;
}

.pchide{
  display: none;
}
body{
    margin: 0;
    padding: 0;
    font-family: var(--rob);
    overflow-x: hidden;
    background-color: white;
}

.social-mobile{
  display: none;
}
/*
header{
  background-color: var(--primary);
  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:11.09vw;

}
header .center-header nav{
  display: flex;
  gap: 2.55vw;
}
header .center-header nav a{
  text-decoration: none;
  color: white;
  font-family: var(--rob);
  font-weight:500;
  font-size: var(--d16);
  padding-bottom:7px ;
  padding-left: 7px;
  padding-right: 7px;
  
}
header .center-header nav a.active{
  text-decoration: none;
  color: white;
  font-family: var(--rob);
  font-weight:500;
  font-size: var(--d16);
  padding-bottom:7px ;
  padding-left: 7px;
  padding-right: 7px;
  border-bottom: 1px solid white;
}

header .center-header nav a {
  text-decoration: none;
  color: white;
  font-family: var(--rob);
  font-weight: 500;
  font-size: var(--d16);
  padding-bottom: 7px;
  padding-left: 7px;
  padding-right: 7px;
  position: relative;
}

header .center-header nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background-color: white;
  transition: width 0.3s ease, left 0.3s ease;
  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;

}


*/
.hero-slider{
  box-shadow: 0px 15px 31.1px 0px #0971CE59;
  position: relative;
  margin-bottom: 0px!important;

}

.hero-slide{
  width: 100vw;
  height: 38.54vw!important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  
}
.hero-slide h1{
  position: absolute;
  color: white;
  font-size: var(--d64);
  width: 49.79vw;
  font-weight: 500;
  font-family: var(--rob);
  left:16.88vw;
  top: 15.47vw;
  margin: 0;
}
.hero-slide p{
  position: absolute;
  color: white;
  font-size: var(--d24);
  width: 49.79vw;
  font-weight: 300;
  font-family: var(--rob);
  left:16.88vw;
  top: 24.95vw;
  margin: 0;
}




.hero-slider .slick-dots .slick-active {
  background-color: transparent !important;
 border-radius: 50%;
 border: 1px solid var(--secondary);
 height: 0px;
    width: 3.5vw;
}
.hero-slider .slick-dots li:not(.slick-active) {
 background-color: transparent !important;
 border-radius: 50%;
 border: 1px solid #FFFFFF;
 height: 0px;
    width: 3.5vw;
}
.slick-dots li button {
 display: none!important;
}

.slick-dots li  {
 margin-left:15px!important;

}


.hero-slider .slick-dots li:nth-child(n+4) {
  display: none!important;
}

.hero-slider .slick-dots  {
  bottom: 8vw;
  left: -26.5vw;
  
}



.home-about{
  background-image: url('./img/homebg.svg');
  width: 100vw;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
.on-page-heading{
  margin: 0;
  padding-top:var(--d120) ;
  text-align: center;
  font-size: var(--rob);
  font-weight: 700;
  font-size: var(--d48);
  color: var(--secondary);
  margin-bottom: var(--d48);
}
.home-about p {
  color:var(--secondary) ;
  font-weight: 300;
  font-size: var(--d18);
  line-height: 140%;
  width: 33.39vw;
  text-align: center;
  margin-left: 33.33vw;

}

.proizvodnja-kartice{
  display: flex;
  flex-wrap:wrap;
  width:49.27vw ;
  margin: auto;
  gap: var(--d25);
  justify-content: center;
}





.pr-kartica {
  width: 15.39vw;
  height: 10.57vw;
  position: relative;
  background: white;
  transition: background 0.3s ease-in-out;
  border-radius:var(--d12) ;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 0px solid var(--secondary); /* Početni border samo na dnu */
  box-shadow: 0px 2px 13.5px 0px #1B8FDD59;
  margin-top: var(--d24);
  overflow: hidden;

}

.pr-kartica h2 {
  position: relative;
  z-index: 2;
  color: var(--secondary);
  font-size: var(--d24);
  font-weight: 700;
  line-height: 140%;
  transition: color 0.3s ease-in-out;
  width: 65%;
}

.pr-kartica::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px; /* Visina početnog border-a */
  background: var(--secondary);
  transition: height 0.3s ease-in-out;
  border-radius:0 0 var(--d12) var(--d12);
  
}

.pr-kartica:hover {
  background: var(--secondary); /* Kartica postaje plava */
}

.pr-kartica:hover h2 {
  color: white; /* Tekst postaje bijel */
}

.pr-kartica:hover::after {
  height: 100%; /* Border raste i prekriva cijelu karticu */
  border-radius:var(--d12)!important ;
}

.home-novosti{
  width: var(--landing-width);
  margin: auto;
  overflow: hidden;
  margin-bottom: var(--d120);
}
.home-novosti-slider{
  display: flex;
  
}
.home-novosti-slider .home-novosti-slide{
  width: 19.94vw!important;
  box-shadow: 0px 2px 13.5px 0px #1B8FDD59;
  border-radius: var(--d24);
  margin:4vw var(--d20);
  height: 27.24vw!important;
 
  display: flex!important;
      flex-direction: column!important;

}

.home-novosti-slide .slike-bg{
  background-repeat: no-repeat;
  background-size: cover;
  height:12.92vw ;
  border-radius: var(--d24) var(--d24) 0 0 ;
}
.home-novosti-slide h3{
  font-weight: 400;
  font-size: var(--d14);
  color: #828282;
  margin: 0;
  padding-top: var(--d24);
  padding-left: var(--d24);
}
.home-novosti-slide h1{
  font-weight: 700;
  font-size: var(--d18);
  color: #4F4F4F;
  margin: 0;
  padding-top: 0.52vw;
  padding-left: var(--d24);
  line-height: 140%;
}

.home-novosti-slide p{
  font-weight: 400;
  font-size: var(--d16);
  color: #828282;
  margin: 0;
  padding-top: 0.58vw;
  padding-left: var(--d24);
  line-height: 140%;
  width: 90%;
}
.home-novosti-slide button{
  font-weight: 400;
  font-size: var(--d15);
  color: #FFFFFF;
  margin: 0;
  margin-top: var(--d25);
  margin-bottom: var(--d25);
 margin-left: var(--d24);
  line-height: 140%;
  width:17.54vw;
  background: var(--secondary);
  border: none;
  outline: none;
  height: 2.34vw;
  border-radius: 0.52vw;
  margin-top: auto;
}

footer{
  width: 100vw;
  height:29.43vw;
  background-image: url(./img/footerbg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  
}
.upper-footer{
  display: flex;
  width: var(--landing-width);
  margin: auto;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: var(--d30);
  
}
.upper-footer .upper-left img{
  width: 18.65vw;
  margin-top: var(--d64);
}
.upper-footer .upper-right{
  display: flex;
  gap: var(--d18);
  align-content: center;
  align-self: center;
  margin-top: 5vw;

}
.upper-footer .upper-right img{
  width: 2.19vw;

}
 footer .lower-footer{
  width: var(--landing-width);
  margin: auto;
  display: flex;
  margin-top: var(--d40);
  justify-content: space-between;
 }
 .footer-section h1{
  font-weight: 700;
  font-size: var(--d22);
  color: #FFFFFF;
  line-height: 140%;
  margin: 0;
  

 }
 .footer-section p{
  font-weight: 400;
  font-size: var(--d18);
  color: #FFFFFF;
  
  margin: 0;
  margin-top: var(--d24);
  

 }

 .footer-section span img{
  width: var(--d16);
  margin-right: var(--d12);

 }
 .footer-section span a{
  text-decoration: none;
  color: white;
  font-size: var(--d18);
  font-weight: 400;
 
 }

 .footer-section span{
  display: flex;
  margin-top: var(--d20);
 }




 .home-novosti-slider .slick-dots .slick-active {
   background-color: var(--secondary) !important;
   border-radius: 50%;
   border: 1px solid var(--secondary);
   width: 1.72vw;
   height: 1.72vw;
  margin-bottom: -0.16vw;
}
.home-novosti-slider .slick-dots li:not(.slick-active) {
  background-color: transparent !important;
  border-radius: 50%;
  border: 1px solid var(--secondary);
}
.slick-dots li button {
  display: none!important;
}

.slick-dots li  {
  margin-left:15px!important;

}

.sidebar-widgets .stranica-top-strelica {
  padding-top: 0.8vw!important;
}

.searchbar input {
  width: 100%;
}


#suggestions{
  position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
   
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    
}

#suggestions  li a{
  color: #bdbdbd;
    font-size: var(--d16);
}

.home-novosti-slider .slick-dots li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
  display: none;
}

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

    .hero-slider{
      margin-top: var(--mmt);
      height: 138.89vw;
    }
    .hero-slide{
          height: 138.89vw !important;

    }

    .hero-slide h1{
      font-size: var(--m32);
      width: var(--landing-width-mobile);
      top: 57vw;
      left:var(--m24) ;
    }
    .hero-slide p{
      font-size: var(--m16);
      font-weight: 300;
      top: 91.94vw;
      left: var(--m24);
      width: var(--landing-width-mobile);
    }
    .hero-slider .slick-dots {
    bottom: 20vw;
    left: -26.5vw;
}

.hero-slider .slick-dots .slick-active {
  width: 6.94vw;
  border-radius: 1%;
    border: 3px solid var(--secondary);
}


.hero-slider .slick-dots li:not(.slick-active) {
  width: 6.94vw;
  border-radius: 1%;
    border: 3px solid white;

}

.overlay{
  background-image: url('./img/overlayheromobile.svg');
  width: 100vw;
  height: 138.89vw !important;
  position: relative;
  background-size: cover;


}

.home-about{
  background-image: none;
}

.on-page-heading{
  font-size: var(--m32);
  margin-top: 18vw;
  margin-bottom: 9vw;
  padding: 0;
}

.home-about p{
  width: var(--landing-width-mobile);
  margin-left: 0;
  margin: auto;
  font-size: var(--m15);
  margin-bottom: var(--m36);
  margin-top: var(--m10);
}

.proizvodnja-kartice{
  width: var(--landing-width-mobile);
  justify-content: space-between;
}

.pr-kartica{
  width: 41.11vw;
  height: 34.72vw;
  

}

.pr-kartica h2{
  font-size: var(--m16);
  font-weight: 600;
  width: 70%;
}

.home-novosti{
  width: 100vw;
}

.home-novosti-slider .home-novosti-slide{
  width: 84vw!important;
  height: 125.56vw !important;
  box-shadow: 0px 2px 13.5px 0px #1B8FDD59;
  margin: 4vw 8vw;
  margin-bottom: 10vw;

}
.home-novosti-slider .slick-dots li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
  display: none;
}

.home-novosti-slide .slike-bg {
  height: 58.89vw;

}

.home-novosti-slide h3 {
 font-size: var(--m14);
 padding-top: var(--m16);
 padding-left: var(--m16);
  
}

.home-novosti-slide h1 {
  font-size: var(--m16);
  padding-top: var(--m10);
  padding-left: var(--m16);
}

.home-novosti-slide p {
   font-size: var(--m14);
  padding-top: var(--m10);
  padding-left: var(--m16);
}
.home-novosti-slide button {
  width: 75.78vw;
  height: 12.50vw;
  margin-left: var(--m16);
  border-radius: 6px;
  font-size: var(--m15);
  margin-bottom: var(--m16);
}

.home-novosti-slider .slick-dots li {
  width: 5.28vw!important;
  height: 5.28vw!important;
}

.home-novosti-slider .slick-dots .slick-active {
  width: var(--m25)!important;
  height: var(--m25)!important;

}

footer{
  background-image: url('./img/footermobilebg.svg');
  height: 274.72vw;
  margin-top: 27.78vw;
}
.upper-footer {
  display: block;
  width: var(--landing-width-mobile);
}

footer .lower-footer {
  display: block;
  width: var(--landing-width-mobile);

}

.upper-footer .upper-right{
  display: none;
}

.upper-footer .upper-left img {
  width: 63.61vw;
  margin-top: var(--m64);
  padding-bottom: 9.44vw;
}

.footer-section h1 {
  font-size: var(--m18);
  margin-top: var(--m32);
  margin-bottom: var(--m14);
}
.footer-section p{
  font-size:var(--m15) ;
}

.footer-section span a  {
  font-size: var(--m15);
}

.footer-section span img {
    width: var(--m14);
    margin-right: var(--m10);
}

.footer-section span{
  margin-top: var(--m16);
}

.social-mobile{
  display: flex;
  width: var(--landing-width-mobile);
  margin: auto;
  gap:var(--m15) ;
  justify-content: center;
      border-top:  1px solid #e0e0e0;
      padding-top: var(--m32);
      margin-top: var(--m32);
}
    









    

    
  }