@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:86vw;
  --boxshadow:0px 3px 4.4px 0px #00000017;

  --dvojka: -0.02em;
  --sestica: -0.06em;



    --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;



  






 

}
/* width */
::-webkit-scrollbar {
    width: 5px;
   
    
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: white;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--primary);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
  }

body{
    margin: 0;
    padding: 0;
    font-family: var(--manrope);
    overflow-x: hidden;
    background-color: var(--clight);
 
    width: 100vw;
}




/*PROJEKTI*/



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

.projekti-landing .top{
  display: flex;
  justify-content: space-between;
}

.projekti-landing .top .left{
  width: 38.49vw;
}


.projekti-landing .top .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-top: var(--d16);
margin-bottom: var(--d34);
text-align: left;

}

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

}




.projekti-landing .top .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;
margin-top: var(--d100);

}

.projekti-landing .top .left p{
    font-family: var(--manrope);
    font-weight: 400;

font-size: var(--d16);

line-height: var(--d24);
letter-spacing: 0;
color: #4B4948;
margin-bottom: 0;
width: 38.49vw;


}

.projektv{
    width:40.83vw ;
}

.projekti-landing .top .right p{
  font-family:var(--manrope);
font-weight: 400;

font-size: var(--d20);

line-height: var(--d30);
letter-spacing: var(--dvojka);
text-align: left;
width: 19.79vw;
margin-top: 11.80vw;
color: #4B4948;
margin-bottom: 0;


}

.right .read-more{

  width:7.50vw;
  height: 2.40vw;
  border: 1px solid #4B494833;
  display: flex;
  justify-content: center;
  gap: 0.42vw;
  float: right;
  align-items: center;
  cursor: pointer;
  margin-top: var(--d24);
}

.projekti-landing .top .right .read-more p{
  font-family:var(--manrope);
font-weight: 500;

font-size: var(--d16);

line-height: 100%;
margin: 0;
text-align: unset;
width: auto;
color: var(--primary);
background-color: transparent;
cursor: pointer;




}
.projekti-landing .top .right .read-more.hovered{
  background-color: #5B4B3E;
}
.projekti-landing .top .right .read-more.hovered p{
  font-family:var(--manrope);
font-weight: 500;

font-size: var(--d16);

line-height: 100%;
margin: 0;
text-align: unset;
width: auto;
color: white;




}

.projekti-landing .bottom{
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--d100);
  margin-top: var(--d56);
}
.projektm{
  position: relative;
  width:19.79vw;
  height:20.83vw ;
  cursor: pointer;
}

.projekt-hovered{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background: #21252933;
  backdrop-filter: blur(34.599998474121094px);
    width:19.79vw;
  height:20.83vw ;
  display: none;



}

.projekt-hovered.hovered{

  display: block;



}

.projekt-hovered img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

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

    

.projekti-landing{
  width: var(--landing-width-mobile);
}


.projekti-landing .top .left h1{
  font-size: var(--m14);
  margin-top: var(--m64);
}

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

.projekti-landing .top{
  flex-direction: column;
}

.projekti-landing .top .left{
  width: var(--landing-width-mobile);
}

    .projekti-landing .top .left p{
      font-size: var(--m16);
      line-height: var(--m24);
      width: var(--landing-width-mobile);
    }

    .projekti-landing .top .right p{
      font-size: var(--m20);
      line-height: var(--m30);
      width: var(--landing-width-mobile);
      margin-top: var(--m34);
    }
    .projekti-landing .bottom{
      flex-direction: column;
      margin-top:var(--m44) ;
      margin-bottom:var(--m64) ;
    }
    .projektv{
      width: var(--landing-width-mobile);
    }
    .projektm{
      display: none;
    }

    
  }