@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;
    --m24:6.67vw;
    --m25:6.94vw;
    --m32:8.89vw;
    --m36:10vw;
    --m40:11.11vw;
    --m48:13.33vw;
    --m64:17.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;
}




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

/* Svi redovi su flex po defaultu (kako si i definisao u svom kodu) */
.row {
    display: flex;
    gap: var(--d24);
    margin-bottom: var(--d24);
}

/* Dodajemo klasu koja će sakriti redove koje ne želimo odmah */
.row.skriveno {
    display: none;
}
.row.tri img{
    width:19.79vw;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
}

.row.dvije img{
    width: 30.31vw;
    object-fit: cover;
    object-position: center;
      cursor: pointer;
}
.rdbtn{
    width: var(--landing-width-mobile);
    justify-content: center;
    display: flex;
    align-items: center;
    margin: auto;
}



.btnm{
        display: flex;
    justify-content: center;
    margin-bottom: var(--d100);
    
}

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


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

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

font-weight: 500;

font-size: var(--d16);

line-height: 100%;




}


#overlay2 {
    display: none; /* Sakriveno po defaultu */
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

#slider-img {
    max-width: 80%;
    max-height: 80%;
    border: 3px solid white;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Stilovi za komande */
.close, .prev, .next {
    position: absolute;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.close { top: 20px; right: 35px; }
.prev { left: 5vw; }
.next { right: 5vw; }

.prev:hover, .next:hover, .close:hover { color: #bbb; }

#overlay2{
   background: #212529CC;
   z-index: 99;


}


















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

    




.galerija-main{
    width: var(--landing-width-mobile);
    margin-top: var(--m64);
    margin-bottom: var(--m64);
}

.row{
    gap: var(--m16);
    margin-bottom: var(--m16);
    flex-direction: column;
}

.row.tri img, .row.dvije img{
    width: var(--landing-width-mobile);
    height: 59.44vw;
}
    .mapa{
        width: var(--mmt);
        height: 9.72vw;
        margin-top: 7.22vw;
        
    }
    .mapa p{
        font-size:var(--m14) ;
    }
    .next {
    right: 2vw;
}
.prev {
    left:2vw;
}

    
  }