/* Resetovanje osnovnih stilova */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: url('asfalt-textura.jpg') no-repeat center center fixed; /* Tvoja slika */
    background-size: cover; /* Slika će pokriti celu pozadinu */
}

/* Galerija container */
.gallery-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    width: 100%;
}

/* Raspored slika (5 u prvom redu) */
.gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 slika u svakom redu */
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Svaka stavka u galeriji */
.gallery-item {
    position: relative;
    width: 100%;
    height: 250px; /* Visina može biti dinamična, ali kontrolisano */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column; /* Svi sadržaji unutar .gallery-item idu u vertikalni raspored */
    justify-content: center; /* Poravnanje slike i opisa u centru */
}

/* Stilizacija slika u galeriji */
.gallery-item img {
    width: 100%;
    height: 100%; /* Omogućava da slika popuni visinu */
    object-fit: contain; /* Slika se prilagođava proporcionalno unutar okvira */
    transition: transform 0.3s ease;
}

/* Efekat uvećanja prilikom hover-a */
.gallery-item:hover img {
    transform: scale(1.05); /* Manje povećanje, da ne bi prešlo izvan okvira */
}

/* Opis ispod slike */
.image-description {
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Mala senka za bolju vidljivost */
}

/* Lightbox (otvorena slika) */
.lightbox-modal {
    display: none; /* Modal je sakriven dok nije aktiviran */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Polu-providna pozadina */
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    position: relative;
    width: 90%; /* Širina lightbox-a je fleksibilna */
    max-width: 80%; /* Slika ne prelazi 80% širine ekrana */
    height: auto;
    background: url('asfalt-textura.jpg') no-repeat center center;
    background-size: cover;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Slika u Lightbox-u */
#lightbox-image {
    max-width: 100%; /* Omogućava sliku da bude širina ekrana, ali ne veća od toga */
    max-height: 80vh; /* Ograničavamo visinu na 80% visine ekrana */
    width: auto; /* Širina može da bude automatska */
    height: auto; /* Visina je automatska, proporcionalno širini */
    object-fit: contain; /* Slika se prilagođava proporcionalno */
    border-radius: 15px;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.lightbox-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.lightbox-controls button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 30px;
    padding: 10px;
    cursor: pointer;
}

/* Responzivnost za mobilne uređaje */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr); /* 3 slika u svakom redu na tabletima */
    }
}

@media (max-width: 480px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* 2 slika u svakom redu na mobilnim uređajima */
    }
}
.gallery-header {
  text-align: left;
  padding: 20px 30px;
  background-color: rgba(0, 0, 0, 0.5);
}

.home-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  font-size: 1.1em;
  color: #000;
  background: linear-gradient(145deg, #ffd633, #e6b800);
  border: 2px solid #ffcc00;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  font-weight: bold;
}

.home-button:hover {
  background: linear-gradient(145deg, #ffe066, #e6c300);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

.roller-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}