@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;
    --d12:0.63vw;
    --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;
       --m44:12.22vw;
    --m48:13.33vw;
    --m64:17.78vw;
    --m100:27.78vw;

    
 





   

}


body{
    background-color: var(--primary);
}
.kontakt-home{
    margin-bottom: var(--d120);
}


.stanovi-main{
    width: 100vw;
    background-color:#F6F8EB ;
    padding-bottom: 5.68vw;
}

.stan-picker{
    width: var(--landing-width);
    display: flex;
    justify-content: space-between;
    margin: auto;
   padding-top: var(--d120);
   padding-bottom: var(--d64);
}
.stan-picker a {
  position: relative; /* VAŽNO */
  text-decoration: none;
  font-family: var(--outfit);
  font-weight: 400;
  font-size: var(--d24);
  line-height: 110%;
  width: 17.45vw;
  color: #1F363C;
  text-align: center;
}

.stan-picker a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;          /* start iz sredine */
  width: 0;           /* početno stanje - skrivena */
  height: 3px;
  background-color: #878F57;
  transition: width 0.5s ease, left 0.5s ease;
  transform-origin: center;
}

.stan-picker a.active::after {
  width: 100%;  /* proširena do krajeva */
  left: 0;
  bottom:-1vw;
  padding-bottom:1px; /* možeš i padding staviti ako treba */
}


.stan-galerija{
    width: var(--landing-width);
    margin: auto;
}

.stan-galerija .slider-for img,.stan-galerija .slider-for3 img,.stan-galerija .slider-for2 img{
    width: var(--landing-width)!important;
    height:42.53vw ;
      object-fit: cover;       /* ispunjava okvir bez deformacije */
  object-position: center; /* centrira sliku u okviru */
  border-radius:var(--d12);
  cursor:pointer;

}
.stan-galerija .slider-nav img,.stan-galerija .slider-nav2 img,.stan-galerija .slider-nav3 img{
    width: 16.67vw!important;
    height:9.17vw;
      object-fit: cover;       /* ispunjava okvir bez deformacije */
  object-position: center; /* centrira sliku u okviru */
  border-radius:var(--d12);
   cursor:pointer;
   

}
.slider-for,.slider-for2,.slider-for3{
    margin-bottom: var(--d20);
}

.slider-nav,.slider-nav2, .slider-nav3{
    height:9.17vw;
     width:71vw;
}
.slider-nav .slick-slide,.slider-nav2 .slick-slide,.slider-nav3 .slick-slide {
  margin:0 0.5vw; 
}

.slider-nav .slick-list .slick-track,.slider-nav2 .slick-list .slick-track,.slider-nav3 .slick-list .slick-track{
    min-width: 180vw;
   
}







.stan-tekst{
    display: flex;
    width: var(--landing-width);
    margin: auto;
    margin-top: 5.68vw;
    justify-content: space-between;
}
.st-left h1{
    font-family: var(--outfit);
font-weight: 700;
font-size: var(--d48);
line-height: 110%;
letter-spacing: 0%;
color:#1F363C;

}

.st-left p{
    font-family: var(--inter);
font-weight: 400;
font-size: var(--d18);
line-height: 140%;
letter-spacing: 0%;
color: #4f4f4f;
width: 34.43vw;
margin-bottom:0;


}

.st-right img{
    width: 28.44vw;
}





  @media screen and (max-width:900px){
    .stanovi-main{
        padding-top: var(--m44);
        padding-bottom: var(--m64);
        margin-top:22.22vw;
    }
    .stan-galerija{
        width: var(--landing-width-mobile);
    }
    .stan-picker{
        width: var(--landing-width-mobile);
        flex-wrap: wrap;
        padding:0;
        
        
    }
    .stan-picker a{
        width: 40.56vw;
        font-size:var(--m16) ;
        font-weight: 300;
        margin-bottom: var(--m44);
         
     
    }
    .stan-picker a.active{
        font-weight: 400;
        
         padding-bottom:1.67vw ;
    }

    .stan-galerija .slider-for img, .stan-galerija .slider-for3 img, .stan-galerija .slider-for2 img {
    width: var(--landing-width-mobile) !important;
    height: 61.11vw;
    object-fit: cover;
    object-position: center;
    border-radius: var(--m12);
}

.slider-for .slick-list .slick-track,.slider-for2 .slick-list .slick-track,.slider-for3 .slick-list .slick-track{
    min-width: 5000px;
}


.stan-galerija .slider-nav img,.stan-galerija .slider-nav2 img,.stan-galerija .slider-nav3 img{
    width: 41.94vw!important;
    height:23.33vw;
      object-fit: cover;       /* ispunjava okvir bez deformacije */
  object-position: center; /* centrira sliku u okviru */
  border-radius: var(--m12);
   

}
.slider-for,.slider-for2,.slider-for3{
    margin-bottom: var(--d20);
}

.slider-nav,.slider-nav2, .slider-nav3{
    height:23.33vw;
    margin-top: var(--m10);
    width:86vw;
}
.slider-nav .slick-slide,.slider-nav2 .slick-slide,.slider-nav3 .slick-slide {
  margin:0 0.5vw; /* ili koliko 弔eli分 razmaka */
}

.slider-nav .slick-list .slick-track,.slider-nav2 .slick-list .slick-track,.slider-nav3 .slick-list .slick-track{
    min-width: 5000px;
}



.stan-tekst{
    display: block;
    width: var(--landing-width-mobile);

}
.st-left h1{
    width: var(--landing-width-mobile);
    text-align: left;
    font-size: var(--m32);
    margin-top: var(--m48);
    margin-bottom: var(--m24);
}
.st-left p{
    font-size:var(--m15) ;
    width: var(--landing-width-mobile);
}
.st-right img{
    width: var(--landing-width-mobile);
    margin-top: var(--m44);
}

.slider-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* za smooth scroll na mobilnim uređajima */
  
    display: flex;
    scroll-behavior: smooth;
}

.stan-picker {

 
  min-width: max-content;
  margin-left:var(--m25);
  gap:var(--m10);
 
}

.stan-picker a {
  flex: 0 0 auto;
  width: fit-content; /* tako da 2 stanu i malo trećeg na ekranu */
  padding-left:1.11vw;
  padding-right:1.11vw;
  
 

  text-align: center;
  text-decoration: none;
 
}


.slider-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  width: 92vw;
}

.slider-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.kontakt-home{
    margin-bottom: var(--m100);
}

   








    

    
  }