@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;
    --d36:1.88vw;
    --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;


}

*{
    font-family: var(--rob);
}




.proizvodnja-main{
    background-image: url(./img/proizvodnjadetaljisvg.svg);
   
    background-size: auto;
    width: 100vw;
    background-repeat: no-repeat;
    


}
.proizvodnja-main .main-div{
    width: var(--landing-width);
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding-top: var(--d120);
    
}

.searchbar{
    width: 16.96vw;
    border: 1px solid #0971CE;
    border-radius: var(--d12);
    display: flex;
    justify-content: space-between;
    height: 2.34vw;
    margin-top: 4vw;
}
.searchbar input{
    border: transparent;
    border-radius: var(--d12);
    color: #bdbdbd;
    font-size: var(--d16);
    padding-left: 1vw;
    width: 100%;


}

.searchbar input::placeholder{
    color: #bdbdbd;
    font-size: var(--d16);

}
.searchbar img{
    border-radius: 0  var(--d12)  var(--d12) 0;
   
}
.sidebar-widgets{
    box-shadow: 0px 2px 13.5px 0px #1B8FDD59;
    background: white;
    margin-top: 2.34vw;
    


}












 .sidebar-widgets {
    border: 1px solid var(--plava);
    border-radius: 12px;
}
.sidebar-widgets .stranica-top-strelica {
    background-image: url(./img/stranicatopstrelica.svg);
    width: 14.85vw;
    height: 2.45vw;
    color: white;
    font-size: var(--d16);
    background-repeat: no-repeat;
    padding-top: 0.6vw;
    padding-left: 2.29vw;
    border-radius: 5px 5px 0 0;
    margin: 0;
    background-size: cover;
    background-position: bottom center;
}

 .sidebar-widgets ul {
    padding: 1.09vw 1.56vw 1.56vw 1.56vw;
    list-style-type: none;
    margin: 0;
}
 .sidebar-widgets ul li a {
    height: 0.8vw;
    display: block;
    background-color: #f3f4f7;
    padding: 0.9vw;
    padding-right: 0.6vw;
    margin-bottom: 0.52vw;
    color: var(--secondary);
    font-size: var(--d15);
    text-decoration: none;
    font-weight: 400;
    border-radius: var(--d12);
}

 .sidebar-widgets ul li a:after {
    font-family: FontAwesome;
    content: url(./img/stranicasidebarplava.svg);
    font-family: "fontawesome";
    font-size: 18px;
    float: right;
}
.pr-right{
    margin-left: 5.63vw;
    margin-bottom: var(--d120);
}


.pr-right h1{
    width: 43.65vw;
    margin: 0;
    color: var(--secondary);
    font-size: var(--d36);
    font-weight: 400;
    border-bottom:1px solid var(--secondary) ;
    padding-bottom: var(--d24);

}
.pr-right h1 small{
    width: 43.65vw;
    margin: 0;
    color: var(--secondary);
    font-size: var(--d36);
    font-weight: 300;
   
   

}

.pr-right .services{
    display: flex;
    flex-wrap: wrap;
    gap: var(--d30);
    margin-top:var(--d40) ;
}


.pr-kartica-proizvodnja {
    width: 13.49vw;
    height: 9.9vw;
    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-proizvodnja 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: 70%;
  }
  
  .pr-kartica-proizvodnja::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-proizvodnja:hover {
    background: var(--secondary); /* Kartica postaje plava */
  }
  
  .pr-kartica-proizvodnja:hover h2 {
    color: white; /* Tekst postaje bijel */
  }
  
  .pr-kartica-proizvodnja:hover::after {
    height: 100%; /* Border raste i prekriva cijelu karticu */
    border-radius:var(--d12)!important ;
  }


.galerija{
    width: 43.71vw;
    

}
   .main-img {
    width: 43.71vw;
    height: 26.46vw;
    background-size: cover;
    background-position: center center;
    margin-top: 2.9vw;
    border-radius: var(--d12);
}
.main-galerija-detalj{
    display: flex;
    justify-content: flex-start;
    margin-top: var(--d24);
    margin-bottom: var(--d36);
    gap:var(--d14);
}


.main-galerija-detalj .imga {
    width: 8.13vw;
    height: 5.68vw;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: var(--d12);
}
.main-galerija img:hover {
    transform: scale(1.1);
}

.tekst-proizvodnja-detalji p{
    line-height: 140%;
    font-size: var(--d18);
    color: #4F4F4F;
    font-family: var(--rob);
}

.tekst-proizvodnja-detalji h2{
    line-height: 140%;
    font-size: var(--d18);
    color: var(--secondary);
    font-family: var(--rob);
    margin-top: 2vw;
    margin-bottom: 2vw;
}
.tekst-proizvodnja-detalji ul li{
    line-height: 140%;
    font-size: var(--d18);
    color: #4F4F4F;
    font-family: var(--rob);
}

.tekst-proizvodnja-detalji .warningh{
    line-height: 140%;
    font-size: var(--d18);
    color: var(--secondary);
    font-family: var(--rob);
    text-transform: uppercase;
}



  .sidebar-widgets ul li a.active{
    background-color: var(--primary);
    color: white;
  }
 .sidebar-widgets ul li a.active:after {
    font-family: FontAwesome;
    content: url(./img/stranicasidebarbijela.svg);
    font-family: "fontawesome";
    font-size: 18px;
    float: right;
}



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

    .proizvodnja-main{
        background-image: none;
        margin-top: var(--mmt);
    }
    .proizvodnja-main .main-div{
        width: var(--landing-width-mobile);
        display: block;
        padding-top: var(--m64);
    }
    .searchbar{
        width: var(--landing-width-mobile);
        height: 12.5vw;
        border-radius: var(--m12);
        overflow: hidden;
    }
    .searchbar input{
        width: var(--landing-width-mobile);
        box-sizing: border-box;
        height: 12.5vw;
        font-size: var(--m16);
        padding-left: var(--m14);
    }
    .searchbar input::placeholder{
        font-size:var(--m16);
    }
    .sidebar-widgets .stranica-top-strelica{
        width: var(--landing-width-mobile);
        height:15.51vw ;
        box-sizing: border-box;
        margin-top: var(--m32);
        font-size: var(--m18);
        border-radius: var(--m12);
        padding-left: var(--m24);
        padding-top: 3vw!important;
    }
    .sidebar-widgets ul li a {
        width: 73.33vw;
        height:13.89vw ;
        box-sizing: border-box;
        font-size: var(--m15);
            align-content: center;
            padding-right: var(--m12);
            padding-left: var(--m12);
            margin-bottom: var(--m10);
            border-radius: 6px;
    }
    .sidebar-widgets ul{
        padding: 6.67vw;
    }
.pr-right{
    margin-left: 0;
}
     .pr-right h1 {
      width: var(--landing-width-mobile);
      font-size:7.22vw;
      padding-top: var(--m64);
      margin-bottom: var(--m24);
    }

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

.pr-kartica-proizvodnja {
  width: 41.11vw;
  height: 34.72vw;
  border-radius: 6px;
  margin-top: var(--m16);
  

}

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

.pr-right .services{
    justify-content: space-between;
}

.main-img{
    width: var(--landing-width-mobile);
    height: 52.78vw;
}

.main-galerija-detalj{
    width: var(--landing-width-mobile);
    gap:var(--m10);
    margin-top:var(--m10);
}
.main-galerija-detalj .imga {
    width: 20vw;
    height: 14.17vw;

}
.main-galerija-detalj a:nth-child(5){
    display: none;
}

.tekst-proizvodnja-detalji p{
    font-size: var(--m15);
}

.tekst-proizvodnja-detalji h2{
    font-size: var(--m15);
    margin-bottom: var(--m20);
    margin-top: var(--m20);
}

.tekst-proizvodnja-detalji ul li{
    font-size:var(--m15) ;
}

.tekst-proizvodnja-detalji ul,.tekst-proizvodnja-detalji li{
    list-style: disc!important;
}

.tekst-proizvodnja-detalji ul{
    padding-left: 7vw!important;
}


.tekst-proizvodnja-detalji .warningh{
    font-size: var(--m15);
}







}