header {
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding-top: var(--d48);
  width: 100vw;
}

.onscroll {
  backdrop-filter: blur(30px);
  background: #FFFFFF14;
  width: 79.17vw;
  height: 4.11vw;
  margin-left: 10.22vw;
  border-radius: var(--d44);
  display: flex;
  position: fixed;
  z-index: 6;
  top: var(--d48);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease-in, visibility 0.1s ease-in;
 
}



.onscroll.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease-out, visibility 0.9s ease-out;
}



.onscroll .logo{
  margin-left: var(--d44);
   width: 8.69vw;
   margin-right: 3.33vw;
}

.onscroll .lang{
  margin-right: var(--d44);
   margin-right:var(--d20);
  

}

.lang{
  background: #FFFFFF17;
  height: 2.34vw;
  border-radius: var(--d24);
  display: flex;
  justify-content: center;
  padding-left: var(--d25);
  padding-right: var(--d25);
  place-self: center;
  gap: var(--d30);
      align-items: center;
      margin-left: auto;
      visibility:hidden;

  
}

.lang-icon{
  width: var(--d20);
}



header .logo{
  width: 8.69vw;
  margin-left: 12.7vw;
  margin-right: 3.33vw;
}
header .lang{

  margin-right:3.33vw;
}

header .iskazi, .onscroll .iskazi{
  width:12.18vw ;
  margin-left: 3.3vw;
  cursor:pointer;

}


.lang:hover  a{
  display: block;
}

.lang:hover  img{
  display: none;
}


.mainlang a {
  display: none; /* sakrij sve linkove u startu */
}

.mainlang:hover a {
  display: block; /* prika弔i na hover */
}

.mainlang:hover img {
  display: none; /* sakrij ikonu na hover */
}


.lang a{

    display: none;

font-weight: 400;

font-size: var(--d15);

line-height: 100%;
color: #FFFFFFE5;
text-decoration: none;


}

.lang a.active{
  font-weight: 600;

}

header nav , .onscroll nav{

  display: flex;
  width: 48.33vw;
  
  justify-content: space-between;
  align-items: center;
  
}
header nav a , .onscroll nav a{

font-weight: 600;

font-size: var(--d15);

line-height: 100%;
letter-spacing: 0%;
color:  #FFFFFFE5;

text-decoration: none;



}





/*------HEADER-------*/


/*-------FOOTER-------*/




.contact-landing{
  background: linear-gradient(90deg, #111214 0%, #17191C 100%);

margin-top: var(--d156);

}

.contant-container{
  width: var(--landing-width);
  margin: auto;
  display: flex;
}

.contant-container .contact-left h1{
  
font-weight: 500;

font-size:var(--d80);

line-height: var(--d110);
margin: 0;
margin-top: var(--d110);
margin-bottom: var(--d84);
color: white;
width: 27.19vw;
}

.contant-container .contact-left span{
  display: block;
  align-items: center;
  margin-bottom: var(--d16);
}
.contant-container .contact-left span img{
  width: var(--d20);
  margin-right:var(--d20) ;

}

.contant-container .contact-left span a{

font-weight: 500;

font-size: var(--d20);

line-height:var(--d30);

color: #FFFFFFCC;
text-decoration: none;

}
.contant-container .contact-left .contact-item {
    display: flex;
    align-items: flex-start; /* ikona će biti poravnata sa vrhom prvog reda */
    gap: 0.5rem; /* razmak između ikone i teksta */
}

.contant-container .contact-left .contact-text {
    display: flex;
    flex-direction: column; /* tekst u dva reda */
}

.contant-container .contact-left .first-line {
  font-weight: 500;

font-size: var(--d20);

line-height:var(--d30);

color: #FFFFFFCC;
text-decoration: none;
margin:0;
}

.contant-container .contact-left .second-line {
   font-weight: 500;

font-size: var(--d20);

line-height:var(--d30);

color: #FFFFFFCC;
text-decoration: none;
margin:0;
}


.contact-item-phone {
    display: flex;
    align-items: flex-start; /* ikona centrira prvi red */
    
}

.contact-text-phone {
    display: flex;
    flex-direction: column; /* tekst u dva reda */
}

.first-line-phone {
    font-weight: 500;
    font-size: var(--d16);
    line-height: var(--d30);
    color: #FFFFFFCC;
    margin: 0;
}

.second-line-phone {
    font-weight: 500;
    font-size: var(--d16);
    line-height: var(--d30);
    color: #FFFFFFCC;
    margin: 0;
   
}



form { 
  width: 39.79vw;
  margin-left: 12.19vw;
  margin-top: var(--d156);

}



form span input,
form span textarea {
  width: 100%; /* da se lijepo rastegnu unutar spana */
  box-sizing: border-box;
}

.contact-right form span label{

font-weight: 500;
font-style: Medium;
font-size: var(--d16);

line-height:var(--d30);
color: white;


}

.contact-right form span input
{
  border: none; /* makni sve bordere */
  border-bottom: 1px solid var(--Card-stroke, #E0DBCE33); /* samo donji */
  background: transparent;
  outline: none;
  width: 100%;
  padding: 8px 0; /* malo prostora za ljep分i izgled */

  display: block;

font-weight: 500;
font-style: Medium;
font-size: var(--d14);

line-height: var(--d30);
letter-spacing: 0%;
color: #FFFFFFA6;

}

.contact-right form span textarea {
  border: none; /* makni sve bordere */
  border-bottom: 1px solid var(--Card-stroke, #E0DBCE33); /* samo donji */
  background: transparent;
  outline: none;
  width: 100%;
  padding: 8px 0; /* malo prostora za ljep分i izgled */

  display: block;

font-weight: 500;
font-style: Medium;
font-size: var(--d14);

line-height: var(--d12);
letter-spacing: 0%;
color: #FFFFFFA6;

}

.span-double{
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--d34);
}


form .span-double span input{
  width: 18.23vw;
}


form button{
  width: 18.23vw;
  height: 2.66vw;
 
font-weight: 500;

font-size: var(--d16);

line-height: 100%;
letter-spacing: 0%;
color: white;
backdrop-filter: blur(80px);
background: #FFFFFF14;
border: 1px solid #FFFFFF30;
outline: none;
border-radius: var(--d12);
margin-top: var(--d64);
margin-bottom: var(--d156);



}

footer{
  display: flex;
  width: var(--landing-width);
  margin: auto;
  margin-top: var(--d110);
  margin-bottom: var(--d110);
}

footer .footer-logo{
  margin-right:23.85vw;
}

footer .footer-logo img{
  width: 15.73vw;

}

footer .footer-links h1{

font-weight: 500;
font-style: Medium;
font-size: var(--d20);

line-height: var(--d30);
letter-spacing: 0%;
color: white;
margin-top: 0;
margin-bottom: var(--d44);

}
footer .footer-links a{
  
font-weight: 500;

font-size: var(--d16);

line-height: var(--d30);

color:#FFFFFFCC;
display: block;
text-decoration: none;
margin-top: 0;
margin-bottom: var(--d14);

}

.footer-links.central{
  margin-left: 6.4vw;
  margin-right: 6.4vw;

}

.footer-links span{
  display: flex;
      align-items: center;
}

.footer-links.wspan a{
  margin: 0;
  
}

.footer-links.wspan span{
  margin-bottom: var(--d14);
}

.footer-links.wspan img{
  width: var(--d20);
  margin-right: var(--d20);
}

.footer-copy{
  display: flex;
  justify-content: center;
 padding-top: var(--d34);
  margin-bottom: var(--d34);
  gap: var(--d34);
  border-top: 1px solid #FFFFFF33

}

.footer-copy img{
  width: var(--d64);
}


.ovr{
background: linear-gradient(180deg, #111214B5 0%, #17191CB5 100%);

  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}


.popup{
  background-image: url('https://theaddress.ba/v2/static/img/pop-up.svg');

 position: fixed; /* Ključno: postavlja element fiksno na ekranu */
    
    /* 1. Definira početnu točku za centar elementa (u centar ekrana) */
    top: 50%;
    left: 50%; 
    
    /* 2. Pomakne element nazad za pola njegove širine/visine */
    transform: translate(-50%, -50%); 
z-index: 12;
width:49.27vw;

height:37.65vw;
background-size: cover;
background-repeat: no-repeat;
display: none;

}





form { 
  width: 39.79vw;
  margin-left: 5.2vw;
  margin-top: 14vw;

}



form span input,
form span textarea {
  width: 100%; /* da se lijepo rastegnu unutar spana */
  box-sizing: border-box;
}

.popup form span label{

font-weight: 500;
font-style: Medium;
font-size: var(--d16);

line-height:var(--d30);
color: white;


}

.popup form span input
{
  border: none; /* makni sve bordere */
  border-bottom: 1px solid var(--Card-stroke, #E0DBCE33); /* samo donji */
  background: transparent;
  outline: none;
  width: 100%;
  padding: 8px 0; /* malo prostora za ljep分i izgled */

  display: block;

font-weight: 500;
font-style: Medium;
font-size: var(--d14);

line-height: var(--d30);
letter-spacing: 0%;
color: #FFFFFFA6;

}

.popup form span textarea {
  border: none; /* makni sve bordere */
  border-bottom: 1px solid var(--Card-stroke, #E0DBCE33); /* samo donji */
  background: transparent;
  outline: none;
  width: 100%;
  padding: 8px 0; /* malo prostora za ljep分i izgled */

  display: block;

font-weight: 500;
font-style: Medium;
font-size: var(--d14);

line-height: var(--d12);
letter-spacing: 0%;
color: #FFFFFFA6;

}

.span-double{
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--d34);
}


form .span-double span input{
  width: 18.23vw;
}


form button{
  width: 18.23vw;
  height: 2.66vw;
 
font-weight: 500;

font-size: var(--d16);

line-height: 100%;
letter-spacing: 0%;
color: white;
backdrop-filter: blur(80px);
background: #FFFFFF14;
border: 1px solid #FFFFFF30;
outline: none;
border-radius: var(--d12);
margin-top: 2vw;
margin-bottom: var(--d156);
margin-left: 10.78vw;



}

.popup .close{
  width:2vw;
  cursor: pointer;
  position: absolute;
  top: 1.56vw;
  right:1.56vw
}