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



:root {
  --inter:"Inter", sans-serif;
  
  



  --primary:#77815B;
  --siva:#FFFFFF17;
  --light:#878F57;
  --bijela:#EFF3F4;
  --textwhite:#F6F8EB;
  --landing-width:89.17vw;
  --landing-width-mobile:78.24vw;
  --boxshadow:0px 0px 30px 0px #0000000F;


--d10:0.52vw;
   --d11:0.57vw;
 
   --d12:0.63vw;
   --d13:0.68vw;
    --d14:0.73vw;
    --d15:0.78vw;
    --d16:0.83vw;
    --d18:0.94vw;
       --d19:0.99vw;
    --d20:1.04vw;
    --d22:1.15vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d28:1.46vw;
    --d30:1.56vw;
    --d32:1.67vw;
    --d34:1.77vw;
    --d36:1.88vw;
    --d44:2.29vw;
    --d40:2.08vw;
    --d48:2.5vw;
    --d54:2.81vw;
    --d56:2.92vw;
    --d64:3.33vw;
    --d70:3.65vw;
       --d75:3.91vw;
    --d80:4.17vw;
    --d84:4.38vw;
    --d100:5.21vw;
    --d110:5.73vw;
    --d120:6.25vw;
    --d128:6.67vw;
    --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;
    --mmt: 27.78vw;

  






 

}
/* width */
::-webkit-scrollbar {
    width: 10px;
   
    
  }
  
  /* 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(--inter);
    overflow-x: hidden;
    background-color: #efefef;
    
}

.hero{
  background-image: url('./img/landing.png');
  background-size: cover;
  position: relative;
  width: 100vw;
  height: 56.25vw;
}

.hero .first{
  position: absolute;
  bottom: 10.83vw;
  right: 5.00vw;
  width: 45.83vw;
  box-sizing: border-box;
  height:16.93vw ;
  background: var(--primary);
  border-radius: var(--d24);
  padding: var(--d34) var(--d40);
}

.hero .first h1{
  color: var(--bijela);
  font-size:4.69vw;
  font-weight: 900;
  margin: 0;
  line-height: 90%;
}
.hero .first h2{
  color: var(--bijela);
  font-size:var(--d22);
  font-weight: 400;
  margin: 0;
  margin-top: var(--d25);
}

.hero .second{

    position: absolute;
  bottom: 6.51vw;
  right: 25.47vw;
  width: 25.36vw;
  box-sizing: border-box;
  height:3.49vw ;
  background: #384028;
  border-radius: var(--d24);
  padding: var(--d18) var(--d20);
  text-align:center;

}
.hero .second a{
  color: #efefef;
  font-size:var(--d32);
  font-weight: 700;
  margin: 0;
  line-height: 90%;
}

.info{
  width: var(--landing-width);
  margin: auto;
  margin-top: 3.13vw;
  margin-bottom: 4.79vw;
  display: flex;
  justify-content: center;
}

.info .card{
  text-align: center;
}

.info .card h1{
  color: #384028;
  font-size:var(--d64);
  font-weight: 900;
  margin: 0;
}

.info .card h2{
  color:#384028;
  font-weight: 900;
  font-size: var(--d20);
  margin: 0;
  margin-top: var(--d10);
}

.info .card p{
  max-width: 16.56vw;
  color: #8a9068;
  font-weight: 500;
  margin: auto;
  margin-top: var(--d22);
}

.info .card1{
  width: 20.94vw;
  position: relative;


}

.card1::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 0;
    width: 4px; /* Debljina tvoje linije */
    background-color: #CBBC9D; /* Boja linije */
    border-radius: 10px; /* Ovo zaobljuje vrh i dno linije */
    height: 7.45vw;
    
}

.card1 p{
  width: 14vw;

}

.info .card2{
  width: 22.34vw;
  position: relative;


}



.card2::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 0;
    width: 4px; /* Debljina tvoje linije */
    background-color: #CBBC9D; /* Boja linije */
    border-radius: 10px; /* Ovo zaobljuje vrh i dno linije */
    height: 7.45vw;
    
}

.card2 p{
  width: 12vw;

}




.info .card3{
  width: 24.48vw;
  position: relative;


}



.card3::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 0;
    width: 4px; /* Debljina tvoje linije */
    background-color: #CBBC9D; /* Boja linije */
    border-radius: 10px; /* Ovo zaobljuje vrh i dno linije */
    height: 7.45vw;
    
}

.card3 p{
  width: 12.3vw;

}


.info .card4{
  width: 24.48vw;
  position: relative;


}





.card4 p{
  width: 12.3vw;

}

.slikafull{
  width:var(--landing-width);
  margin-left: 6.04vw;
}


.location{
  width: var(--landing-width);
    margin: auto;
  margin-top: var(--d100);

  display: flex;
  justify-content: space-between;
}

.location .left{
  position: relative;
  width: 39.64vw;
}

.location .left .icon{
  position: absolute;
  top: 0;
  left: 0;
  width:6.20vw ;
  z-index: 9;
  
   

}

.location .left h1{
  margin: 0;
  margin-left:6.72vw ;
  margin-top: var(--d30);
  color: #384028;
  font-weight: 900;

}




.location .left .text{
  width: 36.51vw;
  margin-left:3.73vw ;
  margin-top: 0.15vw;
  background-color: var(--primary);
  border-radius: var(--d25);
}

.location .left .text h2{
  color:var(--bijela);
  font-weight: 900;
  font-size: var(--d36);
  margin: 0;
  padding-top:var(--d36);
  padding-left: 3.65vw;
}


.location .left .text p{
  color: var(--bijela);
  font-weight: 500;
  font-size: var(--d20);
  margin-top: var(--d10);
  padding-left: 3.65vw;
  padding-bottom: var(--d24);
  width: 30.42vw;

}




.location .right{
  position: relative;
  width: 39.64vw;
}

.location .right .icon{
  position: absolute;
  top: 0;
  right: 0;
  width:6.20vw ;
  z-index: 9;
  
   

}

.location .right h1{
  margin: 0;
  margin-right:7vw ;
  margin-top: var(--d30);
  color: #384028;
  font-weight: 900;
  text-align: right;

}




.location .right .text{
  width: 36vw;
  margin-right:3.13vw ;
  margin-top: 0.15vw;
  background-color: var(--primary);
  border-radius: var(--d25);
}

.location .right .text h2{
  color:var(--bijela);
  font-weight: 900;
  font-size: var(--d36);
  margin: 0;
  padding-top:var(--d36);
  padding-right: 3.65vw;
  text-align: right;
}


.location .right .text p{
  color: var(--bijela);
  font-weight: 500;
  font-size: var(--d20);
  margin-top: var(--d10);
  padding-right: 1.65vw;
  padding-bottom: 3.65vw;
  width: 32.42vw;
  text-align: right;

}


.gallery{
  width: var(--landing-width);
  margin: auto;
  margin-top: var(--d34);
}

.gallery .upper{
  display: flex;
  
}

.gallery .upper h1{
  color: #384028;
  font-weight: 900;
  font-size:5.00vw ;
  position: relative;

  margin: 0;
  padding-right: var(--d40);
  margin-left: var(--d80);
  line-height: 90%;

}


.gallery .upper h1::after {
    content: "";
    position: absolute;
    right: 0;
    top:-20%;
    bottom: 0;
    width: 4px; /* Debljina tvoje linije */
    background-color: #CBBC9D; /* Boja linije */
    border-radius: 10px; /* Ovo zaobljuje vrh i dno linije */
    height: 7.45vw;
    
}


.gallery-switch{
  position: relative;
  display: flex;
      place-items: center;
      width: 21.72vw;
      height: 3.49vw;
      place-self: center;
      background-color: var(--primary);
      border-radius: var(--d24);
      margin-left: var(--d40);
}



.gallery-switch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #384028;
  border-radius: var(--d24);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.gallery-switch a {
  width: 100%;
  text-align: center;
  color: #efefef;
  font-size: var(--d32);
  font-weight: 700;
  position: relative;
  z-index: 2;
  border-radius: var(--d24);
  align-content: center;
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0.8em 1em;
}

.gallery-switch a.active {
  background: transparent;
  color: #fff;
}

/* kad je aktivan drugi link */
.gallery-switch:has(a:nth-child(2).active)::before {
  transform: translateX(100%);
}


.interior, .exterior {
    display: none;
    
}


.interior.show, .exterior.show {
    display: flex; flex-wrap: wrap;
    gap: var(--d25);
}


.images{
  margin-top: var(--d80);
}


.interior img ,.exterior img{
  width:36.39vw ;

}


.interior img.wide ,.exterior img.wide{
  width:50.63vw ;

}

.gallery{
  position: relative;
}

.see-more{
  position: absolute;
  bottom: 0;
  cursor: pointer;
  width:100vw;
}


/* Sakrij sve slike od sedme pa nadalje unutar galerija */
.interior img:nth-child(n+7),
.exterior img:nth-child(n+7) {
    display: none;
}

/* Kada div dobije klasu 'expanded', prikaži sve slike */
.interior.expanded img,
.exterior.expanded img {
    display: block; /* Ili inline-block / grid, zavisno od tvog stila */
}


footer{
  background: var(--primary);
  border-top-left-radius: var(--d24);
  border-top-right-radius: var(--d24);
  padding-top:3.13vw ;
  padding-bottom: 4.69vw;
  padding-left: var(--d100);
  padding-right: var(--d100);
  display: flex;
  place-items: center;
  margin-top:var(--d64);
}

footer .left p{
  color: var(--bijela);
    font-size: 4.69vw;
    font-weight: 900;
    margin: 0;
    line-height: 90%;
    width: 46.93vw;
    position: relative;
}

footer .left p::after{
     content: "";
    position: absolute;
    right: 0;
    top:0%;
    bottom: 0;
    width: 2px; /* Debljina tvoje linije */
    background-color: var(--bijela); /* Boja linije */
    border-radius: 10px; /* Ovo zaobljuje vrh i dno linije */
    height: 9.58vw;
}

footer .center a{
 
    
    width: 25.36vw;
    box-sizing: border-box;
    height: 3.49vw;
    background: #384028;
    border-radius: var(--d24);
    padding: var(--d18) var(--d20);
        color: #efefef;
    font-size: var(--d32);
    font-weight: 700;
    margin: 0;
    line-height: 90%;
    margin-left: var(--d100);
    margin-right: var(--d100);
}

footer .right img{
  width: 6.20vw;
  cursor:pointer;
}



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

    


.hero{
      background-image: url(./img/landinmobile.png);
    background-size: cover;
    position: relative;
    width: 100vw;
    height:176.62vw;
}

.hero .first{
  position: static;
  width: 100vw;
  height: auto;
  top:0;
  background-color: transparent;
}

.hero .first h1{
  font-size:9.25vw;
  top:11.11vw;
  position: absolute;
        text-align: center;
        width: 97vw;
   


}


.hero .first h2 {
    color: var(--bijela);
    font-size: 4.16vw;
    font-weight: 400;
    margin: 0;
    margin-top: var(--d25);
    position: absolute;
    top: 140vw;
    width: 95vw;
    text-align: center;
    margin-left: 0vw;
}


.hero .second {
    position: absolute;
    bottom: 6.51vw;
    right: 21.3vw;
    width: 57.40vw;
    box-sizing: border-box;
    height: 9vw;
    background: #77815B;
    border-radius: 5.32vw;
    padding-top:1.5vw;
    text-align: center;
}

.hero .second a{
  font-size: 3.47vw;
  
}
.info{
  flex-direction: column;
  margin-top:4.62vw;
  margin-bottom:6.48vw ;
  width: 77vw;
}

.info .card{
  width: 77vw;
}


.info .card h1{
  font-size: 11.11vw;
}

.info .card h2{
  font-size: 3.7vw;
}


.info .card p {
    max-width: 73.6vw;
    width: 73.6vw;
    color: #8a9068;
    font-weight: 500;
    margin: auto;
    margin-top: 3vw;
    font-size: 3.7vw;
}


.card::after {
    display: none;
}

.card{
  border-bottom: 1px solid #CBBC9D;
  padding-bottom: 3.7vw;
  margin-top: 3.7vw;
}

.slikafull{
  width: var(--landing-width-mobile);
  margin-left: 10.88vw;
  border-radius:5.55vw ;
}

.location {
    width: var(--landing-width-mobile);
    margin: auto;
    margin-top: var(--d100);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
   
}

 .location .left, .location .right{
      width: 100%;
    }


    .location .left h1 {
    margin: 0;
    margin-left: 6.72vw;
    margin-top: var(--d30);
    color: #384028;
    font-weight: 900;
    font-size: 3.70vw;
    text-align: center;
}


.location .left .icon {
    position: absolute;
    top: 0;
    left: 12.5vw;
    width: 5.86vw;
    z-index: 9;
}


.location .left .text {
    width: var(--landing-width-mobile);
    background-color: var(--primary);
    border-radius: var(--d25);
    margin: auto;
    margin-top: 3vw;
}


.location .left .text h2 {
    color: var(--bijela);
    font-weight: 900;
    font-size: 4.16vw;
    margin: 0;
    padding-top: 3.24vw;
    padding-left: 3.24vw;
}


.location .left .text p {
    color: var(--bijela);
    font-weight: 400;
    font-size: 3.7vw;
    margin-top: 4.18vw;
    padding-left: 3.24vw;
    padding-bottom: 4.12vw;
    width: 71.68vw;
}






    .location .right h1 {
    margin: 0;
    margin-left: 0vw;
    margin-top: 0vw;
    color: #384028;
    font-weight: 900;
    font-size: 3.70vw;
    text-align: center;
}




.location .right .icon {
    position: absolute;
    top: 0;
    right: 12.5vw;
    width: 5.86vw;
    z-index: 9;
}


.location .right .text {
    width: var(--landing-width-mobile);
    background-color: var(--primary);
    border-radius: var(--d25);
    margin: auto;
    margin-top: 3vw;
}


.location .right .text h2 {
    color: var(--bijela);
    font-weight: 900;
    font-size: 4.16vw;
    margin: 0;
    padding-top: 3.24vw;
    padding-left: 3.24vw;
    text-align: left;
}


.location .right .text p {
    color: var(--bijela);
    font-weight: 400;
    font-size: 3.7vw;
    margin-top: 4.18vw;
    padding-left: 3.24vw;
    padding-bottom: 4.12vw;
    width: 71.68vw;
    text-align: left;
}
.location .right{
  margin-top:5vw;
}
.gallery {
  width: var(--landing-width-mobile);
  margin-top: 5vw;
}
.gallery .upper{
  flex-direction: column;
}



.gallery .upper h1 {
    color: #384028;
    font-weight: 900;
    font-size: 11.11vw;
    position: relative;
    margin: 0;
    padding-right: 0;
    margin-left: 0;
    line-height: 90%;
    text-align: center;
}

.gallery .upper h1::after{
  display: none;
}


.gallery-switch {
    position: relative;
    display: flex;
    place-items: center;
    width: var(--landing-width-mobile);
    height: 9.95vw;
    place-self: center;
    background-color: var(--primary);
    border-radius: 3vw;
    margin-left: 0;
    margin-top: 5vw;
}

.gallery-switch a {
    width: 100%;
    text-align: center;
    color: #efefef;
    font-size: 4.62vw;
    font-weight: 700;
   
    border-radius: 3vw;
   
}

.images{margin-top: 5vw;}

.interior img.wide, .exterior img.wide, .interior img, .exterior img{
  width: var(--landing-width-mobile);
}

.interior.show, .exterior.show{
  gap: 3vw;
}



.pcshow{
  display: none;
}

.pchide{
  display: block;
}

.see-more2{
  width: 80vw;
  position: absolute;
    bottom: 0;
    cursor: pointer;
    margin-left: -1vw;
}

.see-more{
    width:89vw;
}

footer {
    background: var(--primary);
    border-top-left-radius: 3vw;
    border-top-right-radius: 3vw;
    padding-top: 7.87vw;
    padding-bottom: 11.34vw;
    padding-left: 3.93vw;
    padding-right: 3.93vw;
    display: flex;
    place-items: center;
    margin-top: 0;
    flex-direction: column;
    margin-top:3vw;
}


footer .left p {
    color: var(--bijela);
    font-size: 9.25vw;
    font-weight: 900;
    margin: 0;
    line-height: 90%;
    width: 100%;
    position: static;
    text-align: center;
    border-bottom: 1px solid #EFF3F4;
    padding-bottom: 5.55vw;
}


footer .center a {
    width: 25.36vw;
    box-sizing: border-box;
    height: 3.49vw;
    background: #384028;
    border-radius: 5.55vw;
    padding: 3.47vw 2.77vw;
    color: #efefef;
    font-size: 3.7vw;
    font-weight: 700;
    margin: 0;
    line-height: 90%;
    margin-left: var(--d100);
    margin-right: var(--d100);
    margin-top: 5.55vw;
}
footer .center{
  margin-top: 11vw;
}

footer .right img {
    width: 15.2vw;
    cursor: pointer;
    margin-top: 11vw;
}

















}