.tf-banner {
    position: relative;
    overflow: hidden;
}

.video-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust the overlay color and opacity as needed */
}

.themeflat-container {
    position: relative;

}

/* Additional styles for text and other elements */
.flat-sub-slider, .flat-title-slider, .flat-description-slider, .flat-button, .box-events-slide, .new-event, .content-event {
    /* Your existing styles */
}
.swiper-slide{
    height: 100%;
}

.small-image {
    width: 200px;!important;
    margin-bottom: 26px;
}
@media only screen and (max-width:767px) {
    .small-image {
        width: 376px;!important;
        margin-bottom: 26px;
    }
}
.accordion-button:not(.collapsed) {
    color: #000000;
    background-color: var(--white);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}
.accordion-button::after {
    margin-right: unset;
    background-image: unset;
    content: "+";
}

.accordion-button:not(.collapsed)::after {
    margin-right: unset;
    background-image: unset;
    content: "";
}
.tf-widget-event {
    background-image: url(../images/bg/bg-3.jpg);
}
.event-white-wiget .item .item-event-price-bg::before {
    background: repeating-linear-gradient(0deg, var(--primary) 0px, var(--primary) 20px, var(--primary) 20px, var(--primary) 40px);
}
.event-white-wiget .item .item-event-price-bg::after {
    background: repeating-linear-gradient(0deg, var(--primary) 0px, var(--primary) 20px, var(--primary) 20px, var(--primary) 40px);
}
.tf-product-category.style2 .category-thumbnail:after {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    width: calc(100% - 13px);
    height: calc(100% - 13px);
    border-radius: 50%;
    box-shadow: 0 0 0 7px var(--primary);
    outline: dashed 7px var(--primary);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-animation: rotate-ani 20s infinite linear;
    animation: rotate-ani 20s infinite linear;
}
.tf-widget-form-contact {
    background-image: url(../images/materials/slika6.webp);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 0;
    width: 100%;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    border-color: var(--primary);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    border-radius: 50px;
}
.owl-theme .owl-dots .owl-dot span {
    border-radius: 50px;
    margin-top: 1rem;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
.image-wraper .media>img {
    margin-left: unset;
}
.bg-black{
    background-color: black;!important;
}
.collection-item {
    position: relative;
    height: 555px; /* Set explicit height for visibility */
    overflow: hidden;
}

.collection-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the container without distortion */
}

.collection-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); /* Dark background for readability */
    color: white;
    padding: 10px;
    z-index: 1; /* Ensure it appears above the image */
}

.content-slide h3,
.content-slide a {
    color: white; /* Ensure text is visible */
}
/* Sakrij jezične opcije na desktopu */
.lang-switch-mobile {
    display: none;
}

/* Prikazuj jezične opcije samo na uređajima do 768px širine */
@media (max-width: 768px) {
    .lang-switch-mobile {
        display: flex;
        justify-content: center;
        gap: 8px; /* Razmak između stavki */
        padding: 10px 0;
        background-color: #db4444; /* Crvena pozadina topbara */
        border-bottom: 2px solid black; /* Crna linija ispod topbara */
    }

    .lang-switch-mobile .list-inline-item {
        border: 1px solid black;
        border-radius: 5px; /* Zaobljeni uglovi */
        overflow: hidden; /* Da zadrži oblik */
    }

    .lang-switch-mobile .list-inline-item a {
        text-decoration: none;
        padding: 5px 10px;
        color: black; /* Crni tekst */
        transition: background-color 0.3s ease, color 0.3s ease; /* Glatka tranzicija za hover */
    }

    .lang-switch-mobile .list-inline-item a:hover {
        background-color: #db4444; /* Crvena na hover */
        color: white; /* Beli tekst na hover */
    }

    .lang-switch-mobile .list-inline-item a.active {
        font-weight: bold; /* Podebljan aktivni jezik */
    }
}