/* Standardna podešavanja */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 550px; /* Fiksna visina kartica da budu ujednačene */
    overflow: hidden;
}

.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-title {
    font-size: 20px;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    text-shadow: 1px 1px 1px red;
    text-align: center;
    z-index: 10;
}

/* Ograničenje visine za carousel */
.carousel {
    width: 100%;
    height: 400px; /* Fiksna visina za sve carousel-e */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Osnovni stil za slike u carousel-u */
.carousel-item img {
    width: auto; /* Osigurava da slike popune širinu okvira */
    max-width: 100%; /* Sprečava da slike pređu okvir */
    height: auto; /* Održava proporcije */
    max-height: 400px; /* Sve slike iste maksimalne visine */
    min-height: 400px; /* Sprečava varijacije u visini */
    display: block;
    margin: auto;
}

/* Ako slika ima veću širinu od visine, koristimo contain */
.carousel-item img.wide {
    object-fit: contain;
}

/* Ako slika ima veću visinu od širine, koristimo cover 
.carousel-item img.tall {
    object-fit: cover;
}*/

/* Dugmad za prev/next */
.carousel-control-prev, .carousel-control-next {
    filter: invert(100%);
    width: 10%;
}

/* Sakrivanje ghost slika */
.carousel-item img:not([src]), 
.carousel-item img[src=""] {
    display: none !important;
    visibility: hidden;
}

 .filter-btn {
            font-family: 'Caudex', serif;
        }
       
        /* Glavni stil dugmadi */
        .button-55 {
            background-color: #b3b3b3;
            color: #41403e;
            font-family: 'Great Vibes', cursive;
            font-size: 1.5rem;
            border-radius: 30px;
            border: 2px solid #d9534f;
            box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
            padding: .75rem;
            text-decoration: none;
            text-shadow: 1px 1px 2px firebrick;
            transition: all 235ms ease-in-out;
            user-select: none;
            width: 100%;
            max-width: 180px;
        }
        .button-55:hover {
            box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
            transform: translate3d(0, 2px, 0);
            background-color: #a9a9a9;
            color: #fff;
            text-shadow: 1px 1px 2px #d9534f;
        }
        .button-55:focus {
            box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
        }
        /* Flex stil za dugmad */
        .filter-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

/* Stil za carousel-indicators */
.carousel-indicators li {
  width: 15px; /* Veličina kružića */
  height: 15px; /* Veličina kružića */
  margin: 0 5px; /* Razmak između kružića */
  border-radius: 50%; /* Pravimo kružiće */
  background-color: rgba(0, 0, 0, 0.5); /* Boja za neaktivne indikatore */
  transition: background-color 0.3s ease; /* Glatka promena boje */
  display: inline-block; /* Osiguravamo da indikatori budu u istom redu */
}

/* Stil za aktivni indikator */
.carousel-indicators .active {
  background-color: #007bff; /* Aktivni indikator - možeš promeniti boju */
}

/* Opcionalno: sakrij ikone koje se možda koriste (ako ih imaš) */
.carousel-indicators i {
  display: none;
}



/* Stilovi za mobilne uređaje */
@media (max-width: 768px) {
 .carousel {
        width: 100% !important;
        height: auto !important;
    }

   carousel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px; /* Osigurava istu visinu za sve slajdove */
    overflow: hidden; /* Sprečava da sledeća slika viri ispod */
}

.carousel-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Sprečava sečenje slike */
}
    
    .button-55 {
        font-size: 1.2rem;
        max-width: 150px;
        padding: 0.5rem;
    }
}