@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


:root {
  --playfair:"Playfair Display", serif;
  --manrope:  "Manrope", sans-serif;

  --primary:#2A2A2A;
  --siva:#4B4948;
  --clight:#F6F1EB;
  --textwhite:#F6F8EB;
  --landing-width:61.88vw;
  --landing-width-mobile:86.67vw;
  --boxshadow:0px 3px 4.4px 0px #00000017;
  --dilatacija-a:#6DB3B5;
  --dilatacija-b:#7DA36B;

  --dvojka: -0.02em;
  --sestica: -0.06em;
  --slobodno:#9AA16F;
  --rezervisano:#E6A15A;
  --prodano:#DE7550;




    --d10:0.52vw;
   --d11:0.57vw;
 
   --d12:0.63vw;
   --d13:0.68vw;
    --d14:0.73vw;
    --d15:0.78vw;
    --d16:0.83vw;
    --d18:0.94vw;
    --d20:1.04vw;
    --d22:1.15vw;
    --d23:1.20vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d28:1.46vw;
    --d30:1.56vw;
    --d34:1.77vw;
    --d44:2.29vw;
    --d40:2.08vw;
    --d48:2.5vw;
    --d54:2.81vw;
    --d56:2.92vw;
    --d64:3.33vw;
    --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;
    --m100:27.78vw;
    --mmt: 27.78vw;


  






 

}
.projekat{
    display: flex;
    width: var(--landing-width);
    margin: auto;
    padding-top: var(--d100);
    padding-bottom: var(--d100);
    justify-content: space-between;
}




.projekat .left h1{
  font-family:var(--manrope);
font-weight: 600;

font-size: var(--d14);

line-height: 100%;

text-align: left;
text-transform: uppercase;
color: var(--primary);
margin: 0;


}



.projekat .left h2{
  font-family: var(--manrope);
font-weight: 600;

font-size: var(--d56);

line-height: var(--d64);
letter-spacing: var(--sestica);
color: var(--primary);
margin: 0;
margin-top: var(--d16);
text-align: left;

}

.projekat .left h2 strong{
  font-family: var(--playfair);
font-weight: 400;
font-style: italic;

}

.projekat .right .mapa.hovered{
  background-color: #5B4B3E;
}
.projekat .right .mapa.hovered p {
 
color: white;




}


.projekat .left h3{
  font-family: var(--manrope);
font-weight: 600;

font-size: var(--d56);

line-height: var(--d64);
letter-spacing: var(--sestica);
color: var(--primary);
margin-top: 0;
margin-bottom: var(--d34);
text-align: left;

}

.projekat .left h3 strong{
  font-family: var(--playfair);
font-weight: 400;
font-style: italic;

}

.projekat .left p{
    width: 32.71vw;
    color: #4B4948;
    font-size: var(--d16);
    line-height: var(--d24);
    letter-spacing:  -0.02em;
    margin: 0;
    

}

.projekat .left h4{
    color: var(--primary);
    font-family:var(--manrope);
font-weight: 600;

font-size: var(--d24);

line-height: var(--d24);
letter-spacing:var(--dvojka);
margin-top: var(--d34);
margin-bottom: var(--d16);

}

.projekat .left span{
    display: flex;
}

.projekat .left span img{
    width: var(--d11);
    margin-right: var(--d12);

}

.projekat .left span p{
    color: #4B4948;
    font-family: var(--manrope);
font-weight: 400;

font-size: var(--d16);

line-height: var(--d24);
letter-spacing: var(--dvojka);

}


.projekat .right .mapa{
    display: flex;
    align-items: center;
    border: 1px solid #4B494833;
    justify-content: center;
    gap: 0.42vw;
    width: 8.59vw;
    height:2.40vw;
    float: right;
    margin-top: var(--d24);


}
.projekat .right .mapa .arrow{
    width:0.42vw ;
   
}

.projekat .right .mapa p{
    margin: 0;
    color: var(--primary);

font-weight: 500;

font-size: var(--d16);

line-height: 100%;
cursor: pointer;




}

.projekat .right .projekatimg{
    width:25.78vw ;
    margin-top: var(--d34);
    float: right;

}

.garaze{
    width: 100vw;
    background: #EDE6DE;
    padding-top: var(--d100);
    padding-bottom: var(--d100);


}

.garaze .container{
    width: var(--landing-width);
    margin: auto;
    display: flex;
    justify-content: space-between;
}










.garaze .container .left h1{
  font-family:var(--manrope);
font-weight: 600;

font-size: var(--d14);

line-height: 100%;

text-align: left;
text-transform: uppercase;
color: var(--primary);
margin: 0;


}



.garaze .container .left h2{
  font-family: var(--manrope);
font-weight: 600;

font-size: var(--d56);

line-height: var(--d64);
letter-spacing: var(--sestica);
color: var(--primary);
margin: 0;
margin-top: var(--d16);
text-align: left;

}

.garaze .container .left h2 strong{
  font-family: var(--playfair);
font-weight: 400;
font-style: italic;

}


.garaze .container .left p{
    width: 27vw;
    font-family: var(--manrope);
font-weight: 400;

font-size: var(--d16);

line-height: var(--d24);
letter-spacing:var(--dvojka);
color: #4B4948;
margin-top: var(--d34);
margin-bottom: var(--d44);


}








.garaze .container .left .mapa{
    display: flex;
    align-items: center;
    border: 1px solid #4B494833;
    justify-content: center;
    gap: 0.42vw;
    width: 8.59vw;
    height:2.40vw;
 
    margin-top: 0;
    margin-bottom: 0;
    cursor: pointer;


}
.garaze .container .left .mapa .arrow{
    width:0.42vw ;
   
}

.garaze .container .left .mapa p{
    margin: 0;
    color: var(--primary);

font-weight: 500;

font-size: var(--d16);

line-height: 100%;
width: auto;



}


.garaze .container .left .mapa.hovered{
  background-color: #5B4B3E;
}
.garaze .container .left .mapa.hovered p {
 
color: white;




}


.garaze .container .right .row{
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding-top: 1.83vw;
  padding-bottom: 1.83vw;
  width: 29.38vw;
}



.row p{
  width: 8.25vw;
   margin: 0;
  
  margin-top: var(--d20);
  color: #4B4948;
  font-family: var(--manrope);
  font-weight: 500;
  font-size: var(--d20);
  line-height: var(--d25);
  letter-spacing: var(--dvojka);
 
}

.row img{
  height: var(--d40);

}

.btb{
  border-top: 1px solid #BCBFC3;
  border-bottom: 1px solid #BCBFC3;
  margin-top: 3.2vw;
}
.bb{

  border-bottom: 1px solid #BCBFC3;
}

.standard{
  margin: auto;
  width: var(--landing-width);
  padding-top: var(--d100);
  padding-bottom: var(--d100);
}

.standard h1{
  font-family: var(--manrope);
    font-weight: 600;
    font-size: var(--d14);
    line-height: 100%;
    text-align: left;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0;

}

.standard .top{
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--d64);
}


.standard .top h2{
  font-family: var(--manrope);
  width: 27.24vw;
font-weight: 600;

font-size: var(--d56);

line-height: var(--d64);
letter-spacing: var(--sestica);
color: var(--primary);
margin: 0;
margin-top: var(--d16);
text-align: left;

}

.standard .top h2 strong{
  font-family: var(--playfair);
font-weight: 400;
font-style: italic;

}

.standard .top p{
  width: 21.71vw;
  font-family: var(--manrope);
font-weight: 400;

font-size: var(--d16);

line-height: var(--d24);
letter-spacing: var(--dvojka);
text-align: right;
color: #4B4948;
margin: 0;
margin-top: var(--d16);

}


.standard .bottom{
  display: flex;
  justify-content: flex-start;
  gap: var(--d24);
  flex-wrap: wrap;
}

.standard .bottom .card{
  width: 19.79vw;
  padding: var(--d34);
  background-color:#EDE6DE ;
  border: 1px solid #BCBFC3;
  box-sizing: border-box;


}

.standard .bottom .card img{
  height: 1.51vw;
  margin: 0;
}

.standard .bottom .card h3{
  color: var(--primary);
  font-family: var(--manrope);
  font-weight: 600;
    font-size: var(--d23);
  line-height: var(--d28);
  letter-spacing: var(--dvojka);
 
  margin-top: var(--d16);
  margin-bottom: var(--d13);
 
}

.standard .bottom .card p{
  font-family: var(--manrope);
font-weight: 400;

font-size: var(--d16);

line-height:var(--d24);
letter-spacing:var(--dvojka);
margin: 0;
width: 16.25vw;

}

.tipovi{
  width: 100vw;
  height:19.43vw ;
  background-image: url('./img/tipovibg.png');
  background-repeat: no-repeat;
  background-size: cover;
  
}

.tipovi .container{
  width: var(--landing-width);
  margin: auto;
  padding-top: var(--d100);
  padding-bottom: var(--d100);
  display: flex;
  justify-content: space-between;
}

.tipovi .container .left h1{
  font-family: var(--manrope);
font-weight: 600;

font-size: var(--d14);

line-height: 100%;
color: white;
margin: 0;
text-transform: uppercase;


}

.tipovi .container .left h2{
  font-family: var(--manrope);
font-weight: 600;

font-size: var(--d56);

line-height:var(--d64);
letter-spacing: var(--sestica);
color: white;
margin-top: var(--d16);
margin-bottom: var(--d16);
width: 28.59vw;

}
.tipovi .container .left h2 strong{
  font-style: italic;
  font-weight: 400;
  font-family: var(--playfair);
}

.tipovi-button{
  background-color: transparent;
  border: 1px solid #FFFFFF33;
  display: flex;
  justify-content: center;
  gap: 0.42vw;
  align-items: center;
  width: 8.75vw;
  height: 2.40vw;
  margin: 0;
  cursor: pointer;
}

.tipovi-button p{
  color: white;
  font-family: var(--manrope);
font-weight: 500;

font-size: var(--d16);

line-height: 100%;



}

.tipovi-button img{
    width:0.42vw;
}
.tipovi-button:hover{
  background: #FFFFFF33;

}

.tipovi .right p{
  color: #F6F1EB;
  width: 26.56vw;
  font-family: var(--manrope);
font-weight: 600;

font-size: var(--d16);

line-height: var(--d24);
letter-spacing: var(--dvojka);
text-align: right;

  


}




  @media screen and (max-width:900px){
    .projekat{
      width: var(--landing-width-mobile);
      flex-direction: column;
          padding-top: var(--m64);
    padding-bottom: var(--m64);
    }
    .projekat .left  h1{
  font-size: var(--m14);
  margin-top: 0;
}

  
.projekat .left  h2{
  font-size:var(--m32);
  margin-top: var(--m16);
  margin-bottom: 0;
  line-height: var(--m34);
}

.projekat .left  h3{
  font-size:var(--m32);
  margin-top: 0;
  margin-bottom: var(--m34);
  line-height: var(--m34);
}
.projekat .left p{
  width: var(--landing-width-mobile);
  font-size: var(--m16);
  line-height: var(--m24);
}
.projekat .left h4{
  font-size: var(--m24);
  line-height: var(--m24);
  margin-top: var(--m24);
  margin-bottom: var(--m16);

}
.projekat .left span img {
    width: var(--m11);
    margin-right: var(--m12);
}
.projekat .left span p{
  font-size: var(--m16);
  line-height: var(--m24);
}
.projekat .right{
  display: flex;
  flex-direction: column-reverse;
}
.projekat .right .projekatimg{
  width: var(--landing-width-mobile);
  margin-top: var(--m34);
}
    

.projekat .right .mapa{
  width: 37.78vw;
  height:9.72vw;
  margin-top: var(--m24);
  gap: 2.22vw;

}
.projekat .right .mapa p{
  font-size: var(--m14);
}
.projekat .right .mapa .arrow{
  width: 2.22vw;
}

.garaze{
  padding-top: var(--m64);
  padding-bottom: var(--m64);

}
.garaze .container{
  width: var(--landing-width-mobile);
  flex-direction: column;
}


 .garaze .container .left h1{
  font-size: var(--m14);
  margin-top: 0;
}

  
.garaze .container .left h2{
  font-size:var(--m32);
  margin-top: var(--m16);
  margin-bottom: 0;
  line-height: var(--m34);
}
.garaze .container .left p{
  width: var(--landing-width-mobile);
  font-size: var(--m16);
  line-height: var(--m24);
  margin-top: var(--m34);
  margin-bottom: var(--m24);
}




.garaze .container .left .mapa{
  width: 37.78vw;
  height:9.72vw;
  margin-top: var(--m24);
  gap: 2.22vw;

}
.garaze .container .left .mapa p{
  font-size: var(--m14);
}
.garaze .container .left .mapa .arrow{
  width: 2.22vw;
}

    .btb, .bb{
      border: none;
    }
    .btb{
      margin-top: var(--m44);
    }


.garaze .container .right .row{
  width: var(--landing-width-mobile);
  border-top: 1px solid #BCBFC3;
  padding-top: var(--m24);
  padding-bottom: var(--m24);


}

.row img{
  height: var(--m34);
}
.row p{
  width: 38.89vw;
  font-size: var(--m16);
  line-height: var(--m22);

}
.bbb{
    border-bottom: 1px solid #BCBFC3;

}

.standard{
    padding-top: var(--m64);
  padding-bottom: var(--m64);
  width: var(--landing-width-mobile);
}



 .standard h1{
  font-size: var(--m14);
  margin-top: 0;
}

  .standard .top{
    flex-direction: column;
    margin: 0;
  }
.standard .top h2{
  font-size:var(--m32);
  margin-top: var(--m16);
  margin-bottom: 0;
  line-height: var(--m34);
  width: var(--landing-width-mobile);
}
.standard .top p{
  width: var(--landing-width-mobile);
  font-size: var(--m16);
  line-height: var(--m24);
  margin-top: var(--m34);
  margin-bottom: var(--m24);
  text-align: left;
}


.standard .bottom{
  gap: var(--m20);
}
.standard .bottom .card{
  width: var(--landing-width-mobile);
  padding: var(--m20);

}
.standard .bottom .card img{
  height: 7.22vw;

}

.standard .bottom .card h3{
  font-size: var(--m20);
  line-height: var(--m28);
  margin-top: var(--m12);
  margin-bottom: 2.22vw;

}
.standard .bottom .card p{
  font-size: var(--m14);
  line-height: var(--m22);
  width: 73.33vw;
}


.tipovi{
  height: 116.39vw;
  background-image: url(./img/tipovibgmobile.png);

}



.tipovi .container{
  flex-direction: column;
  padding-top: var(--m64);
  padding-bottom: var(--m64);
  width: var(--landing-width-mobile);
}

.tipovi .container h1 {
    font-family: var(--manrope);
    font-weight: 600;
    font-size: var(--m14);
    line-height: 100%;
    color: white;
    margin: 0;
    text-transform: uppercase;
}

.tipovi .container  h2 {
    font-family: var(--manrope);
    font-weight: 600;
    font-size: var(--m32);
    line-height: var(--m34);
    letter-spacing: var(--sestica);
    color: white;
    margin-top: var(--m16);
    margin-bottom: var(--m34);
    width: 100%;
}

.tipovi .container h2 strong{
  font-family: var(--playfair);
  font-weight: 400;
  font-style:italic;
}


.tipovi-button {
    background-color: transparent;
    border: 1px solid #FFFFFF33;
    display: flex;
    justify-content: center;
    gap: 2.22vw;
    align-items: center;
    width:38.61vw;
    height: 9.72vw;
    margin: 0;
    cursor: pointer;
}


.tipovi-button img {
    width: 2.22vw;
}
    .tipovi  p {
    color: #F6F1EB;
    width: 100%;
    font-family: var(--manrope);
    font-weight: 500;
    font-size: var(--m16);
    line-height: var(--m24);
    letter-spacing: var(--dvojka);
    text-align: left;
    margin-bottom:var(--m34) ;
    margin-top: 0;
}

.tipovi-button p {
    color: white;
    font-family: var(--manrope);
    font-weight: 500;
    font-size: var(--m14);
    line-height: 100%;
    width: fit-content;
    margin: 0;
}




  }