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


:root {
    --inter:"Inter", serif;
    --outfit:"Outfit", serif;
    --primary:#0F1A1E;
    --secondary:#1F363C;
    --light:#878F57;
    --textwhite:#F6F8EB;
    --landing-width:70vw;
    --landing-width-mobile:86vw;
    --d16:0.89vw;
    --d18:0.94vw;
    --d20:1.04vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --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{
    background-color: var(--primary);
}

.kontakt-home{
    margin-bottom: 6.25vw;
}

.materijali-slider {
    position: relative;
  
 
  width: 100vw;
  
}

.slides {
  display: flex;
  transition: transform 1.2s ease;
  width: 400%; /* 4 slike */
}

.slide {
  width: 100vw;

  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 1.35vw;
}



.slider-controls {
  position: absolute;
  bottom: 4.71vw;
  left: 15.05vw ;
  width: 69.90vw;
  z-index: 2;
  display: flex;
  justify-content: space-between;

 
}

.slider-controls .prev{
  width: 0.52vw;
  height: var(--d20);
  background-image: url('./img/left-hero-slide-non.svg');
  background-color: transparent;
  border: none;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}

.slider-controls .next{
   width: 0.52vw;
  height: var(--d20);
  background-image: url('./img/right-hero-slide-active.svg');
  background-color: transparent;
  border: none;
  padding: 0;
   background-size: cover;
  background-repeat: no-repeat;
   cursor: pointer;
}

.line-slider {
  position: absolute;
 top: 38.20vw;
  left: 50%;
  transform: translateX(-50%);
  width: 60.73vw;
  height: 1px;
  background-color: rgba(255,255,255,0.3);
  
}


.line-track {
  width: 100%;
  height: 100%;
  position: relative;
}

.line-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.15vw;
  height: 100%;
  background-color: white;
  transition: width 1.5s ease;
}


.materijali-slider h1{
    font-family: var(--outfit);
font-weight: 700;
font-size: var(--d48);
line-height: 110.00000000000001%;
letter-spacing: 0%;
text-align: center;
color: white;
margin-top: 5.21vw;
margin-bottom: 4.38vw;

}

.materijali-card{
    border: 1px solid #F6F8EB26;
    box-shadow: 0px 1px 3px 1px #00000026;

box-shadow: 0px 1px 2px 0px #0000004D;
border-radius: var(--d24);
width: 22.40vw;
height: 26.30vw;
margin-bottom: 9.90vw;

}

.materijali-card h1{
    font-family: var(--outfit);
font-weight: 600;
font-size: var(--d24);
line-height: 140%;
letter-spacing: 0%;
text-align: left;
margin-top: 2.29vw;
margin-left: 2.29vw;
max-width: 17.81vw;
margin-bottom: var(--d24);

}
.materijali-card p{
    font-family: var(--inter);
font-weight: 400;
font-size: var(--d18);
line-height: 140%;
letter-spacing: 0%;
color: white;
margin: 0;
margin-left: 2.29vw;
max-width: 17.81vw;
}


.opr{
    width: 100vw;
}
  @media screen and (max-width:900px){
      
      .kontakt-home{
          margin-bottom:27.78vw;
      }
      .o-projektu-main{
          margin-top:22.22vw;
      }
   

.slidesmob {
  display: flex;
  transition: transform 0.5s ease;
  width: 1500vw; /* 4 slike */
  position:relative;
  overflow-x:hidden;
}

.slidemob {
  width: 100vw;

  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 1.35vw;
}



.slider-controlsmob {
  position: absolute;
  bottom: 4.71vw;
  left: 15.05vw ;
  width: 72.67vw;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  display:none;

 
}

.slider-controlsmob .prev{
  width: 0.52vw;
  height: var(--d20);
  background-image: url('./img/left-hero-slide-non.svg');
  background-color: transparent;
  border: none;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}

.slider-controlsmob .next{
   width: 0.52vw;
  height: var(--d20);
  background-image: url('./img/right-hero-slide-active.svg');
  background-color: transparent;
  border: none;
  padding: 0;
   background-size: cover;
  background-repeat: no-repeat;
   cursor: pointer;
}

.line-slidermob {
  position: absolute;
 bottom: var(--m64);
  left: 50%;
  transform: translateX(-50%);
  width: 86.67vw;
  height: 1px;
  background-color: rgba(255,255,255,0.3);
  
}


.line-trackmob {
  width: 100%;
  height: 100%;
  position: relative;
}

.line-indicatormob {
  position: absolute;
  top: 0;
  left: 0;
  width: 5.78vw;
  height: 100%;
  background-color: white;
  transition: width 0.8s ease;
}

.materijali-slider{
    height:173.61vw;
}

.materijali-card{
    border: 1px solid #F6F8EB26;
    box-shadow: 0px 1px 3px 1px #00000026;

box-shadow: 0px 1px 2px 0px #0000004D;
border-radius: var(--m14);
width: 86.67vw;
height: 112.50vw;
margin-bottom: 0vw;

}
.materijali-slider h1{
    width:50%;
    margin:auto;
    font-size: var(--m32);
    margin-top: var(--m64);
    margin-bottom: var(--m44);
}

.materijali-card h1{
    font-family: var(--outfit);
font-weight: 600;
font-size: var(--m20);
line-height: 140%;
letter-spacing: 0%;
text-align: left;
margin-top: var(--m34);
margin-left:var(--m20);
margin-bottom: var(--m20);
width:75.56vw;
max-width:77vw;

}
.materijali-card p{
    font-family: var(--inter);
font-weight: 400;
font-size: var(--m15);
line-height: 140%;
letter-spacing: 0%;
color: white;
margin: 0;
text-align:left;
margin-left: 0vw;
max-width: 75.56vw;
margin:auto;
}





    

    
  }