/** @format */

:root {
    --sekundarna: #7c00fe;
    --primarna: #f5004f;
}

* {
    font-family: "Nunito", sans-serif;
}

body {
    position: relative;
    min-height: 100vh;
}

#strana {
    min-height: calc(100vh - 300px);
}

/* **** NAVBAR *** */

.navbar-traka {
    min-height: 36px;
    height: auto;
    background-color: var(--primarna);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.navbar-traka .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.navbar-traka .dostava {
    color: black;
}

.navbar-traka .kontakt {
    color: black;
}

nav.navbar {
    height: 99px;
    background-color: white !important;
    flex: 0 0 auto;
}

.navbar-linkovi {
    margin-left: 24px;
    flex: 1 1 auto;
}

.navbar-linkovi .nav-link {
    margin: 0 16px;
    font-weight: 600;
    color: #000000de;
    font-size: 15px;
}

.navbar .navbar-brand img {
    height: 80px;
}
.navbar .search-bar {
    flex: 1;
}
.navbar .dropdown-menu-end {
    right: 0;
    left: auto;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
}

.navbar-pretraga {
    width: 250px;
    display: flex;
    margin-left: 24px;
    /* flex: 0 0 250px; */
}

.navbar-akcije {
    flex: 0 0 auto;
    margin-left: auto;
}

.navbar-ikonica {
    width: 22px;
    height: 22px;
    /* margin: 0 16px; */
}

.navbar-nav {
    flex-direction: row;
}

/********** MEGA MENI **********/

.mega-menu {
    position: absolute; /* Fixirano u odnosu na ekran, ne na roditelja */
    left: 0;
    right: 0;
    width: 100vw; /* Cela širina ekrana */
    max-width: 100%;
    background-color: #f8f9fa; /* Svetlo siva pozadina */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 20px 0;
    opacity: 0; /* Početna vrednost nevidljivosti */
    visibility: hidden; /* Kako bi se element uklonio iz toka stranice kad je nevidljiv */
    transition: all 0.3s ease;
    border-top: 1px dashed lightgray;
    padding: 0;
    margin-top: 10px;
}

/* Puni sadržaj od leve do desne ivice */
.mega-menu .container {
    max-width: 100%;
    padding: 0 20px; /* Dodaj padding unutar kontejnera za margine */
}

.nav-item:hover .mega-menu {
    opacity: 1; /* Vidljivost postaje potpuna pri hoveru */
    visibility: visible; /* Element postaje vidljiv */
}

.navbar-nav .nav-item {
    /* position: relative; */
}

.mega-menu h4 {
    text-align: center;
    font-size: 18px;
    margin: 0;
}

.megameni-element {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.megameni-element:hover .megameni-element-naslov {
    color: var(--sekundarna);
}

.megameni-element-slika img {
    width: 96px;
    height: 96px;
    margin-top: 16px;
    border-radius: 50%;
}

.megameni-element-naslov {
    font-size: 16px;
    margin-top: 10px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ograničava tekst na maksimalno 2 reda */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 40px; /* Obezbeđuje visinu za dva reda */
    font-weight: bold;
    color: black;
    cursor: pointer;
    text-align: center;
}

/******** OFFCANVAS MENI ********/

#mobilni-meni ul {
    /* color: inherit !important; */
}

.offcanvas-header {
    font-size: 16px;
}

/* .offcanvas-header .btn-close {
    font-size: 10px;
} */

/*******************************/

.korpa-broj {
    position: absolute;
    right: 0;
    background: var(--sekundarna);
    color: white;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: bold;
    top: -5px;
    right: -10px;
}

.pretraga-input {
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-inline: 2.5rem;
    border-radius: 1.25rem;
    font-size: 0.875rem;
    border-radius: 1.25rem;
    height: 2.5rem;
    width: 100%;
    transition: background-color 150ms linear 0s;
    box-shadow: transparent 0px 0px 0px 3px;
    background: #f5f5f5;
    border-color: #f5f5f5;
}

.pretraga-pogledaj-sve {
    color: var(--primarna);
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.pretraga-input:focus {
    box-shadow: none !important;
    outline: 0 !important;
    border-color: #dedfe0;
}

.pretraga-container {
    width: 100%;
    position: relative;
}

.pretraga-container:before {
    background-image: url(/assets/search.png);
    background-size: contain;
    background-repeat: no-repeat;
    content: "";
    height: 19px;
    left: 13px;
    position: absolute;
    top: 10px;
    width: 19px;
    z-index: 3;
}

.pretraga-lista {
    display: none;
    position: absolute;
    width: 100%;
    background: white;
    box-shadow: rgb(0 0 0 / 10%) 0px 3px 12px;
    z-index: 5;
    list-style: none;
    padding: 10px;
    border-radius: 15px;
    z-index: 100;
}

.pretraga-lista li {
    margin: 10px 0;
    padding: 5px 10px;
    cursor: pointer;
}

.pretraga-lista li:hover {
    background-color: #bcbdc1;
    border-radius: 6px;
}

.dropdown-menu {
    font-size: 14px;
    margin: 0;
    padding: 4px 0;
    top: 36px !important;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 0;
}

.ikonica {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.responsive-centered-column {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/******* UTILITIES ********/

@media (min-width: 992px) {
    .col-lg-25 {
        flex: 0 0 20%; /* Postavi širinu na 20% */
        max-width: 20%; /* Postavi maksimalnu širinu na 20% */
    }
}

.mb-100 {
    margin-bottom: 100px;
}

.sape-ikonica {
    width: 32px;
    height: 27px;
    margin-left: 4px;
    margin-top: -6px;
}

.shapedividers_com-4183 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 56px;
}
.shapedividers_com-4183::before {
    content: "";
    font-family: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw;
    background-size: 293% 77px;
    background-position: 50% 100%;
    background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><g fill="%23ffffff"><path d="M998 29c-4-3-11-3-15 0-3 4-5 9-9 11-5 2-12 0-16-3l-5-7a18 18 0 00-6-4 12 12 0 00-13 4c-2 3-4 9-8 8-3-1-5-4-7-6-7-7-17-2-21 6-2 3-5 6-8 5a7 7 0 01-5-3c0-3-2-7-5-9-5-2-12-3-16 1-3 3-5 8-9 10-5 2-11 0-15-3l-5-7a19 19 0 00-7-4 12 12 0 00-13 4c-2 3-4 9-8 8-3-1-4-4-6-6-8-6-18-2-22 6-2 3-4 6-8 5s-5-4-7-7a13 13 0 00-7-7c-6-1-9 6-11 9-5 6-10 0-13-4s-11-4-14 0c-2 2-2 5-3 7-6 7-12-10-15-12-4-5-9-6-14-2-4 2-6 8-8 12-2 2-4 5-7 4l-6-7a19 19 0 00-5-8c-4-3-11-3-15 1-4 3-5 8-10 10s-11 0-15-3l-5-7a18 18 0 00-7-4 12 12 0 00-13 4c-2 3-3 9-8 8-3-1-4-4-6-6-7-6-18-2-22 6-1 3-4 6-8 5s-5-4-6-7a13 13 0 00-8-6c-6-2-8 5-11 9-5 5-9 0-12-5-3-3-11-4-15 0-1 2-1 5-3 7-6 7-12-9-14-12-4-4-9-6-14-2-4 3-6 8-9 12-4 7-9 0-13-4-3-8-13-13-20-6-3 3-5 8-9 10-5 2-12 0-16-3l-5-7a19 19 0 00-6-3 12 12 0 00-13 3c-2 3-4 9-8 8-3-1-5-4-7-6-7-6-17-1-21 6-2 3-5 6-8 5s-6-4-7-7a13 13 0 00-8-6c-6-2-8 5-11 9-5 5-9 0-12-4s-11-5-14-1l-4 7c-6 7-11-9-14-12-4-4-9-5-14-2-4 3-6 8-8 12-2 2-4 6-7 4l-6-6a19 19 0 00-5-9c-4-3-12-3-15 1-4 3-6 8-10 10-5 2-11 0-15-3l-5-7a18 18 0 00-7-3 12 12 0 00-13 3c-2 3-4 9-8 8-3-1-4-4-6-6-8-6-18-1-22 6-2 3-4 6-8 5s-5-4-7-7a13 13 0 00-7-6c-6-2-8 5-11 9-5 5-9 0-13-4-3-4-11-5-14-1-2 2-2 5-3 7-6 7-12-9-15-12-4-4-9-5-14-2-4 3-6 8-8 12-4 6-11 1-14-3-1-2-3-3-5-3s-6 3-6 6v12c0-3 4-6 6-7s4 2 5 4c3 4 10 9 14 3 2-5 4-10 8-12 5-4 11-3 14 2 3 2 9 19 15 12 1-2 1-5 3-7 3-4 11-4 14 0 4 4 8 10 13 4 3-3 5-10 11-9a13 13 0 017 7c2 3 3 6 7 7s6-2 8-5c4-8 14-12 22-6 2 2 3 5 6 6 4 1 6-5 8-8a12 12 0 0113-4 18 18 0 017 4l5 7c4 3 10 5 15 3 4-2 6-7 10-10 4-4 11-5 15-1a19 19 0 015 8c1 3 3 5 6 7 3 1 5-2 7-4 2-5 4-10 8-12 5-4 10-3 14 2 3 2 8 19 14 12l4-7c3-4 11-4 14 0s7 10 12 4c3-3 5-10 11-9a13 13 0 018 7c1 3 3 6 7 7s6-2 8-5c4-8 14-13 21-6 2 2 4 5 7 6 4 1 6-5 8-8a12 12 0 0113-4 19 19 0 016 4l5 7c4 3 11 5 16 3 4-2 6-7 9-11 7-6 17-1 20 7 4 4 9 11 13 4 3-5 5-10 9-12 5-4 10-3 14 1 2 3 8 20 14 12l3-6c4-4 12-4 15 0s7 10 12 4c3-3 5-10 11-9a13 13 0 018 7c1 2 3 6 6 7s7-3 8-5c4-8 15-13 22-6 2 2 3 5 6 6 5 1 6-5 8-8a12 12 0 0113-4 18 18 0 017 4l5 7c4 3 10 5 15 3s6-7 10-11c4-3 11-4 15 0a19 19 0 015 8c2 3 3 5 6 6 3 2 6-1 7-3 2-5 4-10 8-12 5-4 10-3 14 1 3 3 9 20 15 12l3-6c3-4 11-4 14 0s8 10 13 4c2-3 5-10 11-9a13 13 0 017 7c2 2 3 6 7 7s6-3 8-5c4-8 14-13 22-6 2 2 3 5 6 6 4 1 6-6 8-8a12 12 0 0113-4 19 19 0 017 4l5 7c4 3 10 5 15 3 4-2 6-7 10-11 3-3 10-3 15 0 3 2 5 5 5 9a7 7 0 005 3c3 1 6-2 8-5 4-8 14-13 21-6 2 2 4 5 7 6 4 1 6-6 8-8a12 12 0 0113-4 18 18 0 016 4l5 7c4 3 11 5 16 3 4-2 6-7 9-11 4-3 11-3 15 0 4 2 6 6 6 10v-8c0-5-1-11-6-14z" opacity=".3"/><path d="M998 41c-4-3-11-4-15 0-3 3-5 9-9 11-5 2-12 0-16-3l-5-7a18 18 0 00-6-4 12 12 0 00-13 4c-2 2-4 9-8 8-3-1-5-4-7-6-7-7-17-2-22 6-1 3-4 6-7 5a7 7 0 01-5-3c0-4-2-7-5-9-5-3-12-3-16 0-3 3-5 9-9 10-5 3-12 1-15-3l-5-6a19 19 0 00-7-4 12 12 0 00-13 4c-2 2-4 9-8 8-3-1-4-4-6-6-8-7-18-2-22 6-2 2-4 6-8 5s-5-5-7-8a13 13 0 00-8-6c-5-1-8 6-11 9-4 6-9 0-12-4s-11-4-14 0l-3 6c-7 8-12-9-15-12-4-4-9-5-14-2-4 3-6 8-8 12-2 3-4 6-7 4-3-1-4-3-6-6a19 19 0 00-5-8c-4-4-11-3-15 0-4 4-5 9-10 11s-11 0-15-3l-5-7a18 18 0 00-7-4 12 12 0 00-13 4c-2 2-3 9-8 8-3-1-4-4-6-6-7-7-18-2-22 6-1 3-4 6-8 5s-5-4-6-7a13 13 0 00-8-7c-6-1-8 6-11 9-5 6-9 0-12-4s-11-4-15 0c-1 2-1 5-3 7-6 7-12-10-14-12-4-5-9-6-14-2-4 2-6 7-9 12-4 7-9 0-13-4-3-8-13-13-20-6-3 3-5 8-9 10-5 2-12 0-16-3l-5-7a19 19 0 00-6-4 12 12 0 00-13 4c-2 3-4 9-8 8-3-1-5-4-7-6-7-6-17-2-21 6-2 3-5 6-8 5s-6-4-7-7a13 13 0 00-8-7c-6-1-8 6-11 9-5 6-9 0-12-4s-11-4-14 0l-4 7c-6 7-11-10-14-12-4-5-9-6-14-2-4 2-6 8-8 12-2 2-4 5-7 4-3-2-5-4-6-7a19 19 0 00-5-8c-4-3-12-3-15 1-4 3-6 8-10 10-5 2-11 0-15-3l-5-7a18 18 0 00-7-4 12 12 0 00-13 4c-2 3-4 9-8 8-3-1-4-4-6-6-8-6-18-2-22 6-2 3-4 6-8 5s-5-4-7-7a13 13 0 00-7-7c-6-1-8 6-11 9-5 6-9 0-13-4-3-4-11-4-14 0-2 2-2 5-3 7-6 7-12-10-15-12-4-5-9-6-14-2-4 2-6 7-8 12-4 6-11 1-14-3-1-2-3-4-5-4s-6 4-6 7v50h1006v-5-25-19c0-4-2-8-6-10z"/></g></svg>');
}

@media (min-width: 2100px) {
    .shapedividers_com-4183::before {
        background-size: 100% calc(2vw + 90px);
    }
}

.text-primary {
    color: var(--primarna) !important;
}

.text-secondary {
    color: var(--sekundarna) !important;
}

.nema-rezultata-slika {
    margin-top: 16px;
    width: 128px;
    height: 128px;
    display: flex;
    text-align: center;
    margin: 0 auto;
}

.nema-rezultata-tekst {
    font-size: 20px;
    font-weight: 500;
    color: #303031;
    margin-top: 16px;
}

/******* DODAJ FIRMU ********/
.dodaj-firmu-forma {
    padding: 50px;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    width: 60%;
    font-size: 14px;
}

.dodaj-firmu-forma input:focus,
textarea:focus,
select:focus {
    box-shadow: none !important;
    outline: 0 !important;
}

/******* PRODAVNICA ********/

#prijava-slika {
    width: 128px;
    height: 128px;
    object-fit: cover;
    margin-top: 24px;
}

#prijava-poruka {
    font-size: 20px;
    font-weight: 500;
    color: #303031;
}

.prodavnica-container {
    position: relative;
    height: 350px;
}

.prodavnica-container .okvir {
    height: 350px;
    position: relative;
}

.prodavnica-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    z-index: 1;
}

.prodavnica-hero-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.prodavnica-container .naziv {
    z-index: 3;
    color: white;
    text-align: center;
    font-weight: 700;
}

.prodavnica-container .overlay {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.05) 8.1%,
        rgba(0, 0, 0, 0.1) 15.5%,
        rgba(0, 0, 0, 0.18) 22.5%,
        rgba(0, 0, 0, 0.25) 29%,
        rgba(0, 0, 0, 0.32) 35.3%,
        rgba(0, 0, 0, 0.38) 41.2%,
        rgba(0, 0, 0, 0.43) 47.1%,
        rgba(0, 0, 0, 0.48) 52.9%,
        rgba(0, 0, 0, 0.53) 58.8%,
        rgba(0, 0, 0, 0.55) 64.7%,
        rgba(0, 0, 0, 0.55) 71%,
        rgba(0, 0, 0, 0.6) 77.5%,
        rgba(0, 0, 0, 0.6) 84.5%,
        rgba(0, 0, 0, 0.6) 91.9%,
        rgba(0, 0, 0, 06) 100%
    );

    position: absolute;
}

.objekat-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #f4f4f4;
}

/* .objekt-card-container:first-child,
.objekt-card-container:last-child {
    padding-left: 0;
    padding-right: 0;
} */

.objekt-card-container {
    padding-left: 8px;
    padding-right: 8px;
}

.objekat-card-red {
    padding: 8px 8px 8px 8px;
    display: flex;
    align-items: center;
}

.objekat-card-red:nth-child(even) {
    padding-top: 6px;
}

.objekat-card-red:nth-child(odd) {
    padding-bottom: 6px;
}

.objekat-card-red img {
    width: 40px;
    height: 40px;
    margin-right: 16px;
}

.objekat-card-red .tekst {
    font-size: 16px;
    margin: 0;
    margin-left: 8px;
}

.firma-logo img {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: contain;
    background-color: white;
}

/******* INDEX.PHP ********/

/* Slajder */

.hero-slider-container {
    width: 100%;
    position: relative;
    height: calc(100vh - 135px);
}

.hero-slider {
    width: 100%;
    position: relative;
}

.hero {
    position: relative;
    height: calc(100vh - 135px);
    display: flex !important;
    align-items: center;
    justify-content: left;
    padding: 32px 64px;
    overflow: hidden;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        131deg,
        rgb(0 0 0 / 86%) 0%,
        rgb(3 1 1 / 18%) 56%,
        rgb(0 0 0 / 66%) 100%
    );
    z-index: -1;
}

.hero-content {
    position: relative;
    /* max-width: 600px; */
    color: #fff;
    z-index: 1;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-description {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.hero-button {
    background-color: var(--primarna);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px;
    display: inline-block;
}

/* OSTALE STRANICE KONTAKT... */
p.pasus {
    font-size: 18px;
}

/* Animacije slajdera */

/* Početno sakrivanje elemenata */
.hero-title,
.hero-description,
.hero-button {
    opacity: 0;
    visibility: hidden;
    position: relative; /* Neophodno za translate animacije */
}

/* Kada je slajd aktivan */
.slick-active .hero-title,
.slick-active .hero-description,
.slick-active .hero-button {
    opacity: 1;
    visibility: visible;
}

/* Slajder strelice */

.slick-prev,
.slick-next {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: 3px solid rgba(255, 255, 255, 0.5);
}

.slick-prev:hover,
.slick-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 1);
}

.slick-prev::before,
.slick-next::before {
    font-family: "slick";
    font-size: 25px;
    line-height: 1;
    opacity: 1;
    color: white;
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

.slick-prev::before {
    content: "←";
}

.slick-next::before {
    content: "→";
}

/* Proizvod stranica */
.slika-velika {
    width: 100%;
    position: relative;
    height: 400px;
}

.slika-velika .proizvod-popust-oznaka {
    left: 20px;
}

.slika-velika-img {
    width: 100%;
    height: 100%;
    height: min-content;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
}

.slika-mala-okvir {
    display: flex;
    justify-content: center;
}

.slika-mala-okvir div {
    display: flex;
    justify-content: center;
}

.slika-mala,
.video-mali {
    margin-top: 1rem;
}

.video-mali {
    position: relative;
    cursor: pointer;
}

.video-mali video {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.video-dugme {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #a4a4a4ab;
    border-radius: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.padding-bs {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
}

.slika-mala-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px;
}

.uvelicaj {
    background-color: var(--sekundarna);
    position: absolute;
    width: 36px;
    height: 36px;
    top: 16px;
    right: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.uvelicaj-slika {
    width: 22px;
    height: 22px;
}

.uvelicaj-link {
    width: 100%;
    height: 100%;
}

.proizvod-samo-licno {
    padding: 8px;
    color: white;
    font-size: 16px;
    background: var(--primarna);
    border-radius: 8px;
    width: fit-content;
}

.proizvod-desno {
    padding-left: 32px;
}

.proizvod-desno .proizvod-naslov {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 12px 0;
    height: initial;
}

.proizvod-desno .proizvod-brend-okvir {
    font-size: 15px;
    display: flex;
    margin-bottom: 8px;
}

.proizvod-desno .proizvod-kategorija {
    font-size: inherit;
    margin-top: inherit;
    text-align: inherit;
    white-space: inherit;
    color: inherit;
    display: flex;
}

.proizvod-desno .proizvod-brend {
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid #e5e5e5;
}

.proizvod-desno .brend-naziv,
.proizvod-desno .sifra-naziv,
.proizvod-desno .kategorija-naziv {
    color: #999;
}

.proizvod-desno .sifra-vrednost {
    color: black;
}

.proizvod-desno .brend-vrednost,
.proizvod-desno .kategorija-vrednost {
    color: black;
    transition: color 0.3s ease;

    &:hover {
        color: var(--primarna);
    }
}

.proizvod-desno .varijanta-okvir {
    display: flex;
    flex-direction: row;
    margin: 8px 0;
}

.proizvod-desno .varijanta {
    min-width: 40px;
    padding: 0 8px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
    cursor: pointer;
    transition: 0.3s ease;
}

.proizvod-desno .varijanta.aktivna {
    background: #000000;
    color: white;
}

.proizvod-desno .opis {
    margin: 16px 0;
    font-size: 14px;
    color: #999;
}

.proizvod-desno .cena-okvir {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.proizvod-desno .proizvod-cena,
.proizvod-desno .proizvod-stara-cena {
    margin: 0;
}

.proizvod-desno .proizvod-cena {
    font-size: 18px;
    color: var(--sekundarna);
    font-weight: 800;
    text-align: left;
    transition: 0.3s ease;
}

.proizvod-desno .proizvod-stara-cena {
    text-decoration: line-through;
    color: #999;
    font-weight: normal;
    margin-right: 8px;
}

.kolicina-okvir input {
    outline: 0;
    box-shadow: none;
    /* pointer-events: none; */
    text-align: center;
    height: 44px;
    width: 44px;
    background-color: white;
    border: 1px solid #e5e5e5;
    border-left: none;
    border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: black;
}

.korpa-okvir {
    display: flex;
    flex-direction: row;
    margin: 16px 0;
}

.kolicina-okvir {
    display: flex;
    flex-direction: row;
    margin-right: 16px;
}

.kolicina-okvir .minus {
    height: 44px;
    width: 44px;
    border: 1px solid #e5e5e5;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: white;
    border-right: none;
}

.kolicina-okvir .plus {
    height: 44px;
    width: 44px;
    border: 1px solid #e5e5e5;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: white;
    border-left: none;
}

.dodatan-info-okvir {
    display: flex;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
}

.dodatan-info-naslov {
    font-size: 14px;
    font-weight: bold;
    width: fit-content;
    padding: 12px 24px;
    transition: 0.3s ease;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid var(--sekundarna);
    color: var(--sekundarna);

    &:hover {
        color: white;
        background-color: var(--sekundarna);
    }
}

.dodatan-info-naslov.aktivan {
    color: white;
    background-color: var(--sekundarna);
}

.dodatan-info-sadrzaj-okvir {
    display: flex;
    justify-content: center;
}

.dodatan-info-sadrzaj {
    width: 80%;
    background: white;
    border-radius: 8px;
    padding: 24px;
}

/* Paginacija */
.pagination {
    display: flex;
    justify-content: center;
    padding-left: 0;
    list-style: none;
}

.pagination li {
    margin: 0 5px;
}

.pagination a {
    color: var(--sekundarna);
    background-color: white;
    border: 1px solid var(--sekundarna);
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background-color: var(--sekundarna);
    color: white;
}

.pagination .active a {
    background-color: var(--sekundarna);
    color: white;
    border: 1px solid var(--sekundarna);
}

.page-link:focus {
    z-index: 3;
    /* color: var(--bs-pagination-focus-color); */
    /* background-color: var(--bs-pagination-focus-bg); */
    outline: 0;
    box-shadow: none;
}

/******* Korpa *******/

.alert-korpa {
    border-color: var(--sekundarna);
    background-color: white;
    color: var(--sekundarna);
}

.korpa {
    padding: 20px;
}

.ukloni-proizvod {
    background: transparent;
    border: none;
    color: red;
    font-weight: bold;
    display: flex;
    justify-content: center;
}

.korpa-proizvodi,
.korpa-podaci {
    border-radius: 20px;
    border: 1px dashed;
    border-color: #e5e5e5;
    padding: 20px;
}

.korpa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.korpa-clear {
    color: red;
    cursor: pointer;
    font-size: 14px;
    border: none;
    background: none;
}

.korpa-proizvod {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 10px;
    border: 1px dashed;
    border-color: #e5e5e5;
}

.korpa-proizvod img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
}

.korpa-proizvod-info {
    flex: 1;
    padding-left: 16px;
    padding-right: 8px;
}

.korpa-proizvod-naziv {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.korpa-proizvod-velicina {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.korpa-proizvod-kontrole {
    display: flex;
    align-items: center;
}

.korpa-proizvod-kontrole button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #ddd;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.korpa-proizvod-kontrole span {
    margin: 0 10px;
}

.korpa-proizvod-cene {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.korpa-proizvod-cene .proizvod-cena {
    font-size: 16px;
    margin: 0;
    color: black;
    font-weight: bold;
    min-height: initial;
}

.korpa-proizvod-cene .proizvod-stara-cena {
    font-size: 13px;
    color: #999;
    margin: 0;
    text-decoration: line-through;
    margin-left: 10px;
    line-height: 16px;
}

.korpa-promo-okvir {
    position: relative;
}

.promo-greska {
    color: red;
    font-size: 14px;
    font-weight: bold;
}

.promo-uspesno {
    color: var(--sekundarna);
    font-size: 14px;
    font-weight: bold;
}

.promo-kod {
    background: black;
    border-radius: 10px;
    padding: 4px 8px;
    font-size: 14px;
    color: white;
}

@keyframes pulsiranje {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.toast-korpa {
    background-color: var(--sekundarna);
    color: white;
    font-weight: bold;
}

.toast-error {
    background-color: var(--primarna);
    color: white;
    font-weight: bold;
}

.korpa-animacija {
    animation: pulsiranje 1s ease-in-out infinite;
}

.korpa-promo input {
    background: transparent;
    font-size: 14px;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 20px !important;
    position: relative;
    transition: ease-in 0.3s;

    &:focus {
        outline: 0;
        box-shadow: none;
        border-color: #ddd;
    }
}

.korpa-cena-okvir div {
    display: flex;
    justify-content: space-between;
}

.korpa-cena-okvir div p {
    margin: 6px 0;
    color: #999;
}

.korpa-cena-okvir div p.total {
    font-weight: bold;
    color: black;
    font-size: 20px !important;
}

.korpa-cena-okvir div p.total-vrednost {
    font-size: 20px;
    color: black;
    font-weight: bold;
}

.korpa-summary hr {
    color: #999;
    margin: 25px 0;
}

.korpa-promo button {
    position: absolute;
    right: 4px;
    border-radius: 20px;
    width: 80px;
    font-size: 13px;
    top: 50%;
    transform: translateY(-50%);
}

.korpa-promo p,
.korpa-nacin-isporuke p {
    font-size: 18px;
    font-weight: bold;
}

#Licno {
    margin-left: 8px;
}

.korpa-nacin-isporuke label {
    font-size: 16px;
}
.korpa-nacin-isporuke input[type="radio"] {
    border: 2px solid var(--sekundarna);
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    outline: none; /* Uklanja plavi outline */
    box-shadow: none; /* Uklanja Bootstrap box-shadow */
    background: #ecedff;
}

.korpa-nacin-isporuke input[type="radio"]:checked::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--sekundarna);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Uklanja Bootstrap fokus efekat */
.korpa-nacin-isporuke input[type="radio"]:focus {
    outline: none;
    box-shadow: none;
}

#Poruci {
    background: var(--sekundarna);
    color: white;
    border-radius: 10px;
    padding: 12px 16px;
    border: none;
    font-size: 16px;
    font-weight: bold;
}

.korpa-dostava-info {
    font-size: 16px;
    color: #171717;
}

.korpa-summary {
    padding: 20px;
    border-radius: 10px;
    background: #ecedff;
}

.korpa-summary h5,
.korpa-summary p {
    margin: 0;
}

.korpa-summary .total {
    font-size: 24px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .korpa-proizvod {
        flex-direction: column;
        text-align: center;
    }

    .korpa-proizvod-kontrole {
        justify-content: center;
        margin-top: 10px;
    }

    .korpa-summary {
        margin-top: 20px;
    }
}

/* Korpa podaci */

.uslovi-link {
    color: var(--sekundarna);
}

.korpa-podaci input:focus {
    border-color: var(--sekundarna);
    box-shadow: none;
}

/* .was-validated .form-check-input:valid:checked {
    border-color: var(--sekundarna) !important;
    background-color: var(--sekundarna) !important;
} */

.uslovi-input {
    &:checked {
        border-color: var(--sekundarna) !important;
        background-color: var(--sekundarna) !important;
    }

    &:focus {
        box-shadow: none !important;
        border-color: #dee2e6 !important;
    }
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #dee2e6;
    padding-right: 0;
    background-image: none;

    &:focus {
        border-color: var(--sekundarna);
        box-shadow: none;
    }
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--bs-form-invalid-border-color);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: none;
}

.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
    color: inherit;
}

/* Proizvodi na pocetnoj */

.proizvod {
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
}

/* Stil za sliku */
.proizvod-slika-omot {
    position: relative;
    border: 1px dashed;
    border-color: #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.proizvod:hover .proizvod-slika-omot {
    transition: all 0.3s;
    border-color: var(--primarna);
}

.proizvod-slika {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Stil za popust blob */
.proizvod-popust-oznaka {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--primarna);
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 30% 70% 50% 50%;
    /* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); */
    z-index: 1;
    text-align: center;
}

/* Stil za naslov proizvoda */
.proizvod-naslov {
    /* font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 14px;
    margin: 0;
    margin-top: 16px;
    text-align: left;
    color: #000000;
    font-weight: bold; */
    min-height: 20px;
    font-size: 16px;
    white-space: normal; /* Omogućava višeredni prikaz */
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
    margin: 0;
    margin-top: 16px;
    text-align: left;
    color: #000000;
    font-weight: bold;

    /* Omogućava maksimalno dva reda sa ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Cena proizvoda */
.proizvod-cena {
    font-size: 16px;
    color: var(--sekundarna);
    font-weight: 800;
    text-align: left;
    margin: 0;
    margin-top: 4px;
}

/* Precrtana stara cena */
.proizvod-stara-cena {
    text-decoration: line-through;
    color: gray;
    font-weight: normal;
    margin-right: 8px;
}

/* Kategorije na pocetnoj */

/* Osnovna postavka kategorije */
.kategorija {
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
}

/* Stil za sliku kategorije (krug) */
.kategorija-slika-omot {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
}

.kategorija-slika {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: white;
    border-radius: 50%;
}

/* Stil za naslov kategorije */
.kategorija-naslov {
    font-size: 16px;
    margin-top: 10px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ograničava tekst na maksimalno 2 reda */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 40px; /* Obezbeđuje visinu za dva reda */
    font-weight: bold;
    color: black;
    cursor: pointer;
    transition: color 0.3s ease;
}

.kategorija-naslov:hover {
    color: var(--sekundarna);
}

.kategorija-slika-omot:hover + .kategorija-naslov {
    color: var(--sekundarna) !important;
}

/* Postavljanje minimalne visine kako bi okviri bili iste visine */
.kategorija {
    min-height: 200px; /* Možeš prilagoditi ovu vrednost prema visini kategorije */
}

/* Promocije na pocetnoj */

/* Osnovna postavka promocije */
/* Osnovna postavka promocije */
.promocija {
    padding: 10px;
}

.promocija-sadrzaj {
    position: relative;
    overflow: hidden;
    height: 300px !important;
    height: 100%;
    border-radius: 4px;
}

/* Stil za sliku */
.promocija-slika {
    position: absolute;
}

.promocija-slika-1 {
    height: 75%;
    right: 8px;
    position: absolute;
    bottom: 8px;
}

.promocija-slika-2 {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.promocija-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(105deg, #2d3436b5 0%, #17171761 74%);
    z-index: 3;
}

/* Stil za tekst preko slike */
.promocija-tekst {
    padding: 24px;
    color: white;
    z-index: 4;
    position: relative;
}

.promocija-naslov {
    font-size: 26px;
    font-weight: bold;
    margin: 0;
}

.promocija-opis {
    font-size: 18px;
    margin: 5px 0;
}

.promocija-dodatno {
    font-size: 14px;
}

.promocija-dugme {
    background-color: #673ab7;
    color: white;
    border: none;
    padding: 6px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
}

.promocija-dugme-secondary {
    background-color: var(--primarna);
    color: white;
    border: none;
    padding: 6px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
}

/* Stilizacija za različite ekrane */
@media (max-width: 768px) {
    .promocija-naslov {
        font-size: 24px;
    }
    .promocija-opis,
    .promocija-dodatno {
        font-size: 16px;
    }
}

/* Baner na pocetnoj */

/* Baner osnovna postavka */
.baner {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 180px;
    border-radius: 4px;
    padding: 0 20px;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
}

@media (max-width: 768px) {
    .baner {
        justify-content: space-around;
    }
}

/* Slika preko celog diva */
.baner-slika {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Slika pokriva ceo prostor banera */
    z-index: -1; /* Postavljamo sliku ispod teksta i dugmeta */
}

/* Tekst sa leve strane */
.baner-tekst {
    color: black;
    z-index: 1; /* Tekst je iznad slike */
}

.baner-naslov {
    font-size: 28px;
    font-weight: bold;
    margin: 0;
}

@media (max-width: 768px) {
    .baner-naslov {
        font-size: 22px;
    }
}

.baner-opis {
    font-size: 16px;
    margin: 4px 0 0;
}

/* Dugme sa desne strane */
.baner-dugme {
    z-index: 1; /* Dugme je iznad slike */
    margin-top: 10px;
}

.baner-dugme-stilizovano {
    background-color: #673ab7;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.baner-dugme-stilizovano:hover {
    background-color: #482e9f;
}

.baner-ljubimci {
    z-index: 1;
    bottom: 0 !important;
    right: 0 !important;
    left: initial;
    right: initial;
    object-fit: initial;
    height: 230px;
    width: initial;
}

@media (max-width: 768px) {
    .baner-ljubimci {
        height: 100px;
    }
}

/* Blog na pocetnoj */

/* Blog item postavka */
.blog-item {
    margin-bottom: 30px;
    cursor: pointer;
    border-radius: 4px;
}

.blog-card {
    border-radius: 4px;
    /* border: 1px dashed #e5e5e5; */
    background-color: white;
    transition: all 0.6s ease;
}

.blog-item:hover .blog-image img {
    scale: 1.1;
}

.blog-item:hover .blog-content {
    border-color: var(--primarna);
}

/* Slika bloga */
.blog-image {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.blog-image img {
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* Labeli preko slike */
.blog-labels {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 10px;
}

.blog-label {
    background-color: var(--primarna);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

/* Sadržaj blog posta */
.blog-content {
    padding: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 1px dashed;
    border-color: #e5e5e5;
    border-top: none;
    transition: all 0.3s ease;
}

.blog-meta {
    font-size: 14px;
    color: gray;
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.blog-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.blog-opis {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/* Breadcrumb */

.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.breadcrumb-item {
    color: #999;
    font-weight: normal;
}

.breadcrumb-item.active {
    color: black;
    font-weight: normal;
}

/* Dugme za akciju */
.blog-button {
    background-color: var(--primarna);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.blog-button:hover {
    background-color: #482e9f;
}

/* Kategorija proizvoda */
.proizvod-kategorija {
    display: none;
    font-size: 14px;
    margin-top: 4px;
    text-align: left;
    white-space: nowrap;
    color: gray;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Slike različitih veličina po veličini ekrana */
@media (min-width: 1200px) {
    .proizvod-slika {
        height: 296px;
    }
}

@media (max-width: 1199px) {
    .proizvod-slika {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .proizvod-slika {
        height: 320px;
    }
}

@media (max-width: 576px) {
    .proizvod-slika {
        height: 250px;
    }
}

@media (max-width: 460px) {
    .proizvod-slika {
        height: 180px;
    }

    .proizvod-cena {
        font-size: 13px;
    }
}

@media (max-width: 320px) {
    .proizvod-slika {
        height: 130px;
    }
}

/* Osiguraj iste veličine okvira */
.proizvod-naslov,
.proizvod-kategorija {
    min-height: 36px; /* Minimalna visina za svaki element */
}

/* Proizvodi slajder */

.proizvodi-slajder .proizvod {
    margin: 0 20px; /* Horizontalni razmak između proizvoda */
}

.slick-dots {
    bottom: -45px;
}

.slick-dots li.slick-active button:before {
    color: var(--sekundarna);
}

.custom-strelica {
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    color: black;
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
}

.custom-strelica:hover {
    background-color: var(--sekundarna);
    color: white;
    border-color: var(--sekundarna);
}

/******* FIRME ********/

.firma-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    overflow: hidden;
}

.firma-card:hover .firma-card-overlay {
    opacity: 1;
}

.firma-card-slika {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    z-index: 1;
    transition: all 0.3s;
    height: 170px;
}

.firma-card-slika-okvir {
    overflow: hidden;
}

.firma-card:hover .firma-card-slika {
    transform: scale(1.05);
    overflow: hidden;
}

.firma-card-info {
    padding: 10px;
    background: #fff;
    overflow: hidden;
}

.firma-card-naziv {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    display: inline;
    width: fit-content;
}

.firma-card-objekti {
    margin-left: auto;
    font-size: 14px;
    display: inline;
    width: fit-content;
}

/* 
.firma-card {
    min-width: 200px;
    height: 200px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.firma-card-izgled {
    width: 100%;
    height: 100%;
    max-height: 170px;
}

.firma-card-podaci {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 16px;
}

.firma-card img {
    max-height: 170px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    z-index: 1;
    transition: all 0.3s;
}

.firma-card:hover img {
    transform: scale(1.05);
} */

/* 
.firma-card-naslov {
    position: absolute;
    margin: 0;
    bottom: 8px;
    left: 16px;
    color: white;
    font-size: 18px;
    font-weight: 500;
    z-index: 3;
} */

/************ MAPA ************/

.marker {
    width: 250px;
    padding: 8px 16px;
}

.marker img {
    object-fit: cover;
    width: 100%;
    border-radius: 8px;
}

.marker h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    margin-top: 8px;
}

.marker p {
    font-size: 14px;
    margin: 0;
    margin-top: 8px;
}

.marker button {
    margin-top: 8px;
    padding: 8px 16px;
    background-color: var(--primarna);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.gm-style-iw-chr {
    height: 6px;
}

.gm-style-iw-d {
    overflow: inherit !important;
    max-height: inherit !important;
}

.gm-style-iw.gm-style-iw-c {
    padding: 0;
}

button.gm-ui-hover-effect {
    margin-right: 8px !important;
    margin-top: 4px !important;
}

.gm-style-iw.gm-style-iw-c {
    max-height: fit-content !important;
}

/******* LANDING PAGE ********/

.krug-1 {
    width: 128px;
    height: 128px;
    position: absolute;
    left: 12%;
    top: 6%;
    animation: float 4s ease-in-out infinite;
    cursor: pointer;
}

.krug-2 {
    width: 96px;
    height: 96px;
    position: absolute;
    left: 71%;
    top: 24%;
    animation: float 6s ease-in-out infinite;
    cursor: pointer;
}

.krug-3 {
    width: 64px;
    height: 64px;
    position: absolute;
    left: 85%;
    top: 11.5%;
    animation: float-diagonal 7s ease-in-out infinite;
    cursor: pointer;
}

.krug-4 {
    width: 96px;
    height: 96px;
    position: absolute;
    left: 14%;
    top: 21%;
    animation: float-circle 9s ease-in-out infinite;
    cursor: pointer;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Alternative keyframes for horizontal movement */
@keyframes float-horizontal {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(20px);
    }
}

@keyframes float-diagonal {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(20px, 20px);
    }
}

@keyframes float-circle {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(20px, -20px);
    }
    50% {
        transform: translate(40px, 0);
    }
    75% {
        transform: translate(20px, 20px);
    }
    100% {
        transform: translate(0, 0);
    }
}

.shapedividers_com-9921 {
    overflow: hidden;
    position: relative;
    height: 57px;
}
.shapedividers_com-9921::before {
    content: "";
    font-family: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw;
    background-size: 293% 77px;
    background-position: 50% 0%;
    background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><g fill="%23ecedff"><path d="M0 72c4 2 11 3 15-1 3-3 5-8 10-10 5-3 11-1 15 3l5 6a18 18 0 007 4 12 12 0 0013-4c2-2 3-9 8-8 3 1 4 4 6 6 7 7 18 2 22-6 1-2 4-6 8-5a7 7 0 014 3c0 4 2 7 6 9 4 3 11 3 15 0 3-3 5-8 9-10 5-2 12-1 16 3 2 1 2 4 5 6a19 19 0 006 4 12 12 0 0013-4c2-2 4-9 8-8 3 1 5 4 7 6 7 7 17 2 21-5 2-3 5-6 8-6s5 5 7 8a13 13 0 008 6c5 2 8-5 11-9 5-6 9 0 12 4s11 4 14 0l4-6c6-8 11 9 14 12 4 4 9 5 14 2 4-3 6-8 8-12 2-3 4-6 7-4 3 1 5 4 6 6a19 19 0 005 8c4 4 11 3 15 0s5-8 10-10 11-1 15 3l5 6a18 18 0 007 4 12 12 0 0013-4c2-2 4-9 8-8 3 1 4 4 6 6 8 7 18 2 22-5 2-3 4-6 8-6s5 5 7 8a13 13 0 007 6c6 1 8-6 11-9 5-6 9 0 13 4 3 4 11 4 14 0l3-6c6-8 12 9 14 12 4 4 10 5 15 2 4-3 6-8 8-12 4-8 9-1 14 3 3 8 12 13 19 7 4-3 5-9 10-10 5-3 11-1 15 3l5 6a19 19 0 007 4 12 12 0 0013-4c2-2 3-9 8-8 3 1 4 4 6 6 7 7 18 2 22-6 1-2 4-6 8-5s5 5 6 8a13 13 0 008 6c6 1 8-6 11-9 5-6 9 0 12 4s11 4 15 0l3-6c6-8 12 9 14 12 4 4 9 5 14 2 4-3 6-8 9-12 1-3 3-6 7-4 2 1 4 3 5 6a19 19 0 005 8c4 4 12 3 16 0 3-4 5-9 9-11 5-2 12 0 15 3 3 2 3 5 5 7a18 18 0 007 4 12 12 0 0013-4c2-2 4-9 8-8 3 1 4 4 7 6 7 7 17 2 21-6 2-2 5-6 8-5s5 5 7 7a13 13 0 008 7c5 1 8-6 11-9 5-6 9 0 12 4s11 4 14 0c2-2 2-5 4-6 6-8 11 9 14 12 4 4 9 5 14 2 4-3 6-8 8-12 4-7 11-2 14 3 1 1 3 3 5 3s6-4 6-7V51c1 2-4 6-6 6s-4-2-5-3c-3-4-10-10-14-3-2 4-4 9-8 12-5 3-10 2-14-2-3-3-8-20-14-12l-4 6c-3 4-11 4-14 0s-7-10-12-4c-3 3-6 11-11 9a13 13 0 01-8-6c-2-3-3-7-7-8s-6 3-8 6c-4 7-14 12-21 5-3-2-4-5-7-5-4-2-6 5-8 7a12 12 0 01-13 4 18 18 0 01-7-4c-2-2-2-5-5-6-3-4-10-5-15-3-4 2-6 7-9 10-4 3-12 4-16 0a19 19 0 01-5-8l-5-6c-4-2-6 1-7 4-3 4-5 9-9 12-5 3-10 2-14-2-2-3-8-20-14-12-2 2-2 5-3 7-4 3-12 3-15-1s-7-10-12-4c-3 4-5 11-11 9a13 13 0 01-8-6c-1-3-3-7-6-8s-7 3-8 6c-4 7-15 12-22 5-2-2-3-5-6-5-5-2-6 5-8 7a12 12 0 01-13 4 19 19 0 01-7-4l-5-6c-4-4-11-5-15-3-5 2-7 7-10 10-7 6-17 1-19-7-5-4-10-11-14-3-2 4-4 9-8 12-5 3-11 2-15-2-2-3-8-20-14-12-2 2-2 5-3 7-4 3-11 3-14-1-4-4-8-10-13-4-3 4-5 11-11 9a13 13 0 01-7-6c-2-3-4-7-7-8s-7 3-8 6c-4 7-15 12-22 5-2-1-3-5-6-5-5-2-6 5-8 7a12 12 0 01-13 4 18 18 0 01-7-4l-5-6c-4-4-10-5-15-3s-6 7-10 10c-4 4-11 4-15 1a19 19 0 01-5-9c-1-2-3-5-6-6-3-2-5 1-7 4-2 4-4 9-8 12-5 3-10 2-14-2-3-3-8-19-14-12l-4 7c-3 4-11 3-14-1s-7-10-12-4c-3 4-5 11-11 9a13 13 0 01-8-6c-2-3-3-7-7-8s-6 3-8 6c-4 7-14 12-21 5-3-1-4-5-7-5-4-1-6 5-8 7a12 12 0 01-13 4 19 19 0 01-7-4c-2-1-2-4-5-6-3-3-10-5-15-3-4 2-6 7-9 10-4 4-11 3-16 1-3-2-5-6-5-10a7 7 0 00-5-3c-3-1-6 3-7 6-4 7-15 12-22 6-2-2-3-6-6-6-5-2-6 5-8 8a12 12 0 01-13 3 18 18 0 01-7-4l-5-6c-4-4-10-5-15-3s-7 7-10 10c-4 4-11 3-15 1s-5-6-6-10v7c0 6 1 12 6 15z" opacity=".3"/><path d="M0 60c4 2 11 3 15-1 3-3 5-8 10-10s11-1 15 3l5 6a18 18 0 007 5 12 12 0 0013-4c2-3 3-10 8-8 3 0 4 4 6 6 7 6 18 1 22-6 1-3 4-6 8-6a7 7 0 014 3c0 4 2 8 6 10s11 3 15-1c3-3 5-8 9-10 5-2 12 0 16 3 2 2 2 5 5 7a19 19 0 006 3 12 12 0 0013-3c2-3 4-9 8-8 3 1 5 4 7 6 7 6 17 1 21-6 2-3 5-6 8-5s5 4 7 7a13 13 0 008 6c5 2 8-5 11-9 5-6 9 0 12 4s11 5 14 1c2-2 2-5 3-7 7-7 12 9 15 12 4 4 9 5 14 2 4-3 6-8 8-12 2-3 4-6 7-4 3 1 5 4 6 6a19 19 0 005 9c4 3 11 3 15-1 4-3 5-8 10-10s11-1 15 3l5 6a18 18 0 007 4 12 12 0 0013-4c2-2 3-9 8-7 3 0 4 4 6 5 7 7 18 2 22-5 2-3 4-6 8-6s5 5 7 8a13 13 0 007 6c6 2 8-5 11-9 5-6 9 0 13 4 3 4 10 4 14 1 1-2 1-5 3-7 6-8 12 9 14 12 4 4 10 5 15 2 4-3 6-8 8-12 4-8 9-1 14 3 3 8 12 13 19 7 3-3 5-8 10-10 4-2 11-1 15 3l5 6a19 19 0 007 4 12 12 0 0013-4c2-2 3-9 8-7 3 0 4 3 6 5 7 7 18 2 22-5 1-3 4-6 8-6s5 5 6 8a13 13 0 008 6c6 2 8-5 11-9 5-6 9 0 12 4s11 4 15 1c1-2 1-5 3-7 6-8 12 9 14 12 4 4 9 5 14 2 4-3 6-8 9-12 1-3 3-6 7-4l5 6a19 19 0 005 8c4 4 12 3 16 0 3-3 5-8 9-10 5-2 12-1 15 3 3 2 3 4 5 6a18 18 0 007 4 12 12 0 0013-4c2-2 4-9 8-8 3 1 4 4 7 6 7 7 17 2 21-5 2-3 5-6 8-6s5 5 7 8a13 13 0 008 6c5 2 8-5 11-9 5-6 9 0 12 4s11 4 14 0l3-6c7-8 12 9 15 12 4 4 9 5 14 2 4-3 6-8 8-12 4-7 11-1 14 3 1 2 3 3 5 3s6-4 6-6V0H-6v5l1 25-1 20c1 4 2 8 6 10z"/></g></svg>');
}

@media (min-width: 2100px) {
    .shapedividers_com-9921::before {
        background-size: 293% calc(2vw + 77px);
    }
}

.shapedividers_com-2658 {
    overflow: hidden;
    position: relative;
    height: 57px;
}
.shapedividers_com-2658::before {
    content: "";
    font-family: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw;
    background-size: 293% 77px;
    background-position: 50% 100%;
    background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><g fill="%23ecedff"><path d="M998 29c-4-3-11-3-15 0-3 4-5 9-9 11-5 2-12 0-16-3l-5-7a18 18 0 00-6-4 12 12 0 00-13 4c-2 3-4 9-8 8-3-1-5-4-7-6-7-7-17-2-21 6-2 3-5 6-8 5a7 7 0 01-5-3c0-3-2-7-5-9-5-2-12-3-16 1-3 3-5 8-9 10-5 2-11 0-15-3l-5-7a19 19 0 00-7-4 12 12 0 00-13 4c-2 3-4 9-8 8-3-1-4-4-6-6-8-6-18-2-22 6-2 3-4 6-8 5s-5-4-7-7a13 13 0 00-7-7c-6-1-9 6-11 9-5 6-10 0-13-4s-11-4-14 0c-2 2-2 5-3 7-6 7-12-10-15-12-4-5-9-6-14-2-4 2-6 8-8 12-2 2-4 5-7 4l-6-7a19 19 0 00-5-8c-4-3-11-3-15 1-4 3-5 8-10 10s-11 0-15-3l-5-7a18 18 0 00-7-4 12 12 0 00-13 4c-2 3-3 9-8 8-3-1-4-4-6-6-7-6-18-2-22 6-1 3-4 6-8 5s-5-4-6-7a13 13 0 00-8-6c-6-2-8 5-11 9-5 5-9 0-12-5-3-3-11-4-15 0-1 2-1 5-3 7-6 7-12-9-14-12-4-4-9-6-14-2-4 3-6 8-9 12-4 7-9 0-13-4-3-8-13-13-20-6-3 3-5 8-9 10-5 2-12 0-16-3l-5-7a19 19 0 00-6-3 12 12 0 00-13 3c-2 3-4 9-8 8-3-1-5-4-7-6-7-6-17-1-21 6-2 3-5 6-8 5s-6-4-7-7a13 13 0 00-8-6c-6-2-8 5-11 9-5 5-9 0-12-4s-11-5-14-1l-4 7c-6 7-11-9-14-12-4-4-9-5-14-2-4 3-6 8-8 12-2 2-4 6-7 4l-6-6a19 19 0 00-5-9c-4-3-12-3-15 1-4 3-6 8-10 10-5 2-11 0-15-3l-5-7a18 18 0 00-7-3 12 12 0 00-13 3c-2 3-4 9-8 8-3-1-4-4-6-6-8-6-18-1-22 6-2 3-4 6-8 5s-5-4-7-7a13 13 0 00-7-6c-6-2-8 5-11 9-5 5-9 0-13-4-3-4-11-5-14-1-2 2-2 5-3 7-6 7-12-9-15-12-4-4-9-5-14-2-4 3-6 8-8 12-4 6-11 1-14-3-1-2-3-3-5-3s-6 3-6 6v12c0-3 4-6 6-7s4 2 5 4c3 4 10 9 14 3 2-5 4-10 8-12 5-4 11-3 14 2 3 2 9 19 15 12 1-2 1-5 3-7 3-4 11-4 14 0 4 4 8 10 13 4 3-3 5-10 11-9a13 13 0 017 7c2 3 3 6 7 7s6-2 8-5c4-8 14-12 22-6 2 2 3 5 6 6 4 1 6-5 8-8a12 12 0 0113-4 18 18 0 017 4l5 7c4 3 10 5 15 3 4-2 6-7 10-10 4-4 11-5 15-1a19 19 0 015 8c1 3 3 5 6 7 3 1 5-2 7-4 2-5 4-10 8-12 5-4 10-3 14 2 3 2 8 19 14 12l4-7c3-4 11-4 14 0s7 10 12 4c3-3 5-10 11-9a13 13 0 018 7c1 3 3 6 7 7s6-2 8-5c4-8 14-13 21-6 2 2 4 5 7 6 4 1 6-5 8-8a12 12 0 0113-4 19 19 0 016 4l5 7c4 3 11 5 16 3 4-2 6-7 9-11 7-6 17-1 20 7 4 4 9 11 13 4 3-5 5-10 9-12 5-4 10-3 14 1 2 3 8 20 14 12l3-6c4-4 12-4 15 0s7 10 12 4c3-3 5-10 11-9a13 13 0 018 7c1 2 3 6 6 7s7-3 8-5c4-8 15-13 22-6 2 2 3 5 6 6 5 1 6-5 8-8a12 12 0 0113-4 18 18 0 017 4l5 7c4 3 10 5 15 3s6-7 10-11c4-3 11-4 15 0a19 19 0 015 8c2 3 3 5 6 6 3 2 6-1 7-3 2-5 4-10 8-12 5-4 10-3 14 1 3 3 9 20 15 12l3-6c3-4 11-4 14 0s8 10 13 4c2-3 5-10 11-9a13 13 0 017 7c2 2 3 6 7 7s6-3 8-5c4-8 14-13 22-6 2 2 3 5 6 6 4 1 6-6 8-8a12 12 0 0113-4 19 19 0 017 4l5 7c4 3 10 5 15 3 4-2 6-7 10-11 3-3 10-3 15 0 3 2 5 5 5 9a7 7 0 005 3c3 1 6-2 8-5 4-8 14-13 21-6 2 2 4 5 7 6 4 1 6-6 8-8a12 12 0 0113-4 18 18 0 016 4l5 7c4 3 11 5 16 3 4-2 6-7 9-11 4-3 11-3 15 0 4 2 6 6 6 10v-8c0-5-1-11-6-14z" opacity=".3"/><path d="M998 41c-4-3-11-4-15 0-3 3-5 9-9 11-5 2-12 0-16-3l-5-7a18 18 0 00-6-4 12 12 0 00-13 4c-2 2-4 9-8 8-3-1-5-4-7-6-7-7-17-2-22 6-1 3-4 6-7 5a7 7 0 01-5-3c0-4-2-7-5-9-5-3-12-3-16 0-3 3-5 9-9 10-5 3-12 1-15-3l-5-6a19 19 0 00-7-4 12 12 0 00-13 4c-2 2-4 9-8 8-3-1-4-4-6-6-8-7-18-2-22 6-2 2-4 6-8 5s-5-5-7-8a13 13 0 00-8-6c-5-1-8 6-11 9-4 6-9 0-12-4s-11-4-14 0l-3 6c-7 8-12-9-15-12-4-4-9-5-14-2-4 3-6 8-8 12-2 3-4 6-7 4-3-1-4-3-6-6a19 19 0 00-5-8c-4-4-11-3-15 0-4 4-5 9-10 11s-11 0-15-3l-5-7a18 18 0 00-7-4 12 12 0 00-13 4c-2 2-3 9-8 8-3-1-4-4-6-6-7-7-18-2-22 6-1 3-4 6-8 5s-5-4-6-7a13 13 0 00-8-7c-6-1-8 6-11 9-5 6-9 0-12-4s-11-4-15 0c-1 2-1 5-3 7-6 7-12-10-14-12-4-5-9-6-14-2-4 2-6 7-9 12-4 7-9 0-13-4-3-8-13-13-20-6-3 3-5 8-9 10-5 2-12 0-16-3l-5-7a19 19 0 00-6-4 12 12 0 00-13 4c-2 3-4 9-8 8-3-1-5-4-7-6-7-6-17-2-21 6-2 3-5 6-8 5s-6-4-7-7a13 13 0 00-8-7c-6-1-8 6-11 9-5 6-9 0-12-4s-11-4-14 0l-4 7c-6 7-11-10-14-12-4-5-9-6-14-2-4 2-6 8-8 12-2 2-4 5-7 4-3-2-5-4-6-7a19 19 0 00-5-8c-4-3-12-3-15 1-4 3-6 8-10 10-5 2-11 0-15-3l-5-7a18 18 0 00-7-4 12 12 0 00-13 4c-2 3-4 9-8 8-3-1-4-4-6-6-8-6-18-2-22 6-2 3-4 6-8 5s-5-4-7-7a13 13 0 00-7-7c-6-1-8 6-11 9-5 6-9 0-13-4-3-4-11-4-14 0-2 2-2 5-3 7-6 7-12-10-15-12-4-5-9-6-14-2-4 2-6 7-8 12-4 6-11 1-14-3-1-2-3-4-5-4s-6 4-6 7v50h1006v-5-25-19c0-4-2-8-6-10z"/></g></svg>');
}

@media (min-width: 2100px) {
    .shapedividers_com-2658::before {
        background-size: 293% calc(2vw + 77px);
    }
}

.custom-shape-divider-top-1720779502 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1720779502 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 45px;
}

.custom-shape-divider-top-1720779502 .shape-fill {
    fill: #ffffff;
}

.custom-shape-divider-bottom-1720779747 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1720779747 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 40px;
}

.custom-shape-divider-bottom-1720779747 .shape-fill {
    fill: #ffffff;
}

.naslov-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.naslov-ikonica {
    width: 40px;
    height: 40px;
    margin-right: 8px;
}

.naslov-sekcije {
    font-size: 32px;
    font-weight: 700;
    /* margin: 0 0 24px 0; */
}

.firma-naslov-sekcije {
    font-size: 36px;
    font-weight: 700;
    margin: 0;
}

.prikazi-sve {
    text-decoration: none;
    color: var(--sekundarna);
    color: var(--sekundarna);
    padding: 8px 14px;
    background-color: #dff4ff;
    border-radius: 8px;
    font-size: 14px;
}

.kategorija-card {
    min-width: 200px;
    height: 200px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.kategorija-card img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    z-index: 1;
    transition: all 0.3s;
}

.kategorija-card:hover img {
    transform: scale(1.05);
}

.kategorija-card-overlay {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.008) 8.1%,
        rgba(0, 0, 0, 0.024) 15.5%,
        rgba(0, 0, 0, 0.05) 22.5%,
        rgba(0, 0, 0, 0.086) 29%,
        rgba(0, 0, 0, 0.125) 35.3%,
        rgba(0, 0, 0, 0.173) 41.2%,
        rgba(0, 0, 0, 0.22) 47.1%,
        rgba(0, 0, 0, 0.27) 52.9%,
        rgba(0, 0, 0, 0.318) 58.8%,
        rgba(0, 0, 0, 0.365) 64.7%,
        rgba(0, 0, 0, 0.404) 71%,
        rgba(0, 0, 0, 0.44) 77.5%,
        rgba(0, 0, 0, 0.467) 84.5%,
        rgba(0, 0, 0, 0.482) 91.9%,
        rgba(0, 0, 0, 0.49) 100%
    );
    position: absolute;
}

.kategorija-card-naslov {
    position: absolute;
    margin: 0;
    bottom: 8px;
    left: 16px;
    color: white;
    font-size: 18px;
    font-weight: 500;
    z-index: 3;
}

.mapa-container {
    margin-top: 96px;
    position: relative;
}

#map {
    height: 400px;
    width: 100%;
    border-radius: 8px;
}

/******* FOOTER ********/

.footer-tekst {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    font-size: 20px;
    background-color: var(--primarna);
    color: white;
    text-align: center;
    padding: 16px;
}

/* Footer osnovna postavka */
.footer {
    padding: 40px 0 30px 0;
    border-top: 1px dashed #e5e5e5;
    margin-top: 80px;
}

.footer-logo {
    max-width: 150px;
    margin-bottom: 20px;
}

.footer-text {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
}

.footer-hotline {
    color: #333;
    font-size: 16px;
}

.footer-phone {
    font-size: 20px;
    color: var(--primarna);
    font-weight: bold;
}

.footer-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    color: #333;
}

.footer-links,
.footer-social {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links li a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.footer-links li a:hover {
    color: var(--primarna);
}

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social li a {
    font-size: 20px;
    color: #666;
}

.footer-social li a:hover {
    color: var(--primarna);
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dashed #e5e5e5;
    text-align: center;
}

.footer-bottom p {
    font-size: 14px;
    color: black;
    margin: 1px 0;
}

.footer-bottom-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-size: 14px;
    color: #666;
}

.footer-bottom-links a:hover {
    color: var(--primarna);
}

.footer-bottom-links li a:hover {
    color: #f25c05;
}

.footer-social-ikonica {
    width: 24px;
    height: 24px;
}

/******** FIRME ********/

.filter-ikonica {
    width: 28px;
    height: 28px;
    margin-left: auto;
    margin-right: 8px;
}

.filter-container {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    display: block;
}

.filter-section {
    margin-bottom: 20px;
}

.filter-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.form-check-label {
    font-size: 14px;
}

/******** ELEMENTI ********/

.link-fix {
    text-decoration: none;
    color: inherit;

    &:hover {
        text-decoration: none;
        color: inherit;
    }
}

.dugme-secondary {
    color: white;
    padding: 8px 16px;
    background-color: var(--sekundarna);
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.dugme-primary {
    background-color: var(--primarna);
    padding: 10px 16px;
    color: white;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
}

.dugme-primary-invert {
    color: var(--primarna);
    padding: 10px 16px;
    background-color: #ffebeb;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
}

.prostor {
    height: 100vh;
}

/******* MEDIA QUERY *******/

@media (max-width: 1399.98px) {
    .kategorija-slika-omot {
        width: 150px;
        height: 150px;
    }

    .firma-card-slika {
        height: 140px;
    }
    .slika-mala-img,
    .video-mali video {
        width: 64px;
        height: 64px;
    }
    .slika-velika {
        height: 300px;
    }
    .slika-velika-img {
        max-height: 300px;
    }
}

@media (max-width: 1199.98px) {
    .firma-card-slika {
        height: 115px;
    }
}

@media (max-width: 991.98px) {
    .slika-mala-img,
    .video-mali video {
        width: 50px;
        height: 50px;
    }
    .navbar-pretraga {
        margin-left: 0;
    }
    .navbar-pretraga {
        flex: 0 0 200px;
    }
}

@media (max-width: 767.98px) {
    .navbar-meni {
        height: 32px;
        width: 32px;
    }
    .proizvod-desno {
        padding-left: calc(var(--bs-gutter-x) * 0.5);
    }
    .korpa-zbir {
        padding: 0;
    }
    .korpa-proizvod-cene,
    .korpa-proizvod-info {
        margin-top: 8px;
    }
    .korpa-proizvod-info {
        padding: 0 8px;
    }
    /* .proizvodi-slajder .proizvod {
        margin: 0;
    } */
    .proizvod-desno .proizvod-naslov {
        margin-top: 32px;
    }
    .slika-velika {
        height: 300px;
    }
    .slika-velika-img {
        max-height: 300px;
    }
    .footer-title {
        margin-top: 24px;
    }
    .sape-ikonica {
        margin-top: 6px;
        margin-left: -6px;
    }
    .navbar-traka .dostava {
        width: 100%;
        text-align: center;
    }
    .navbar-traka .kontakt {
        display: none;
    }
    nav.navbar {
        height: 86px;
        background-color: white !important;
        flex: 0 0 auto;
    }
    .hero-slider-container,
    .hero {
        width: 100%;
        position: relative;
        height: calc(100vh - 102px);
    }
    .filter-container {
        display: none;
    }
    .naslov-sekcije {
        margin-top: 24px;
    }
    .firma-naslov-sekcija {
        margin-top: 0;
    }
    .responsive-centered-column {
        align-items: center;
    }
    .firma-card-slika {
        height: 170px;
    }

    .navbar-pretraga {
        display: none;
    }
    .navbar-linkovi {
        display: none;
    }

    /* Slajder item */
    .hero {
        text-align: center;
        justify-content: center;
    }

    .hero-content {
        padding: 16px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 1.2rem;
    }

    .hero-button {
        font-size: 1rem;
        padding: 10px 20px;
    }
}

@media (max-width: 575.98px) {
    .slika-velika {
        height: 250px;
    }
    .slika-velika-img {
        max-height: 250px;
    }
    .kategorija-slika-omot {
        width: 200px;
        height: 200px;
    }
    .naslov-container {
        flex-direction: column;
    }
    .dugme-primary-invert {
        padding: 6px 10px;
    }
    .pretraga-lista {
        padding: 0;
    }
    .marker {
        width: 200px;
    }
    .navbar-akcije {
        width: 60px;
        display: flex;
        justify-content: flex-end;
    }
    .firma-card-slika {
        height: auto;
    }
    .navbar-pretraga {
        max-width: 160px;
    }
    .navbar .navbar-brand img {
        height: 60px;
    }

    .pretraga-input {
        height: 2.2rem;
    }

    #navbar-meni {
        width: 32px;
        height: 32px;
        margin-top: 2px;
    }

    .naslov-sekcije {
        font-size: 26px;
    }

    .firma-naslov-sekcije {
        font-size: 26px;
    }

    .prikazi-sve {
        font-size: 10px;
        background: none;
        padding: 0;
    }

    .kategorija-card-naslov {
        font-size: 20px;
        bottom: 16px;
    }

    @media (max-width: 350px) {
        .dugme-secondary {
            padding: 4px 8px;
        }
        .sape-ikonica {
            display: none;
        }
        .naslov-sekcije {
            font-size: 24px;
            text-align: center;
        }
        /* .kategorija-slika-omot {
            width: 100px;
            height: 100px;
        } */
    }
}

/* Modal za obaveštenje o radnom vremenu */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.modal-overlay.show {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-in-out;
}

.modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease-in-out;
}

.modal-header {
    padding: 20px 24px 0 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h4 {
    margin: 0;
    color: var(--primarna);
    font-weight: 700;
    font-size: 20px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background-color: #f5f5f5;
    color: #333;
}

.modal-body {
    padding: 20px 24px;
    line-height: 1.6;
}

.modal-body p {
    margin-bottom: 12px;
    color: #333;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-footer {
    padding: 0 24px 24px 24px;
    text-align: center;
}

.btn-modal-close {
    background-color: var(--primarna);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.btn-modal-close:hover {
    background-color: #d6003e;
    transform: translateY(-1px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: scale(0.9) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Responsive design za modal */
@media (max-width: 480px) {
    .modal-content {
        width: 95%;
        margin: 10px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .modal-header h4 {
        font-size: 18px;
    }

    .btn-modal-close {
        width: 100%;
        padding: 14px 24px;
    }
}