:root {
    --primary-color: #d32f2f !important;
    --accent-color: #d32f2f !important;
    --theme-color: #d32f2f !important;
}
/* =========================================
   1. REVOLUTION SLIDER TEKST (Boje i senke)
   ========================================= */
#welcome .tp-caption[data-type="text"] {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

#welcome .tp-caption[data-type="text"].title-white {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#welcome .tp-caption[data-type="text"].description {
    color: #ffffff !important;
}

/* =========================================
   2. TOP BAR (Gornja traka sa kontaktom)
   ========================================= */
.top-bar-wraper {
    background-color: #1a1a1a;
    color: #ffffff;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.top-bar-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-bar-list li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-bar a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-bar a:hover {
    color: #fd0303;
}

.top-bar-right .social-list a {
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease, color 0.3s ease;
}

.top-bar-right .social-list a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Sakrij top bar na mobilnim uređajima */
@media (max-width: 767px) {
    .top-bar-wraper {
        display: none !important;
    }
}

/* =========================================
   3. STICKY HEADER & SHRINK EFEKAT
   ========================================= */
/* Osiguraj da je header uvek iznad svega (slidera, panela) */
.main-bar-wraper {
    z-index: 99999 !important;
    position: relative;
}

/* Glatka tranzicija za elemente koji se menjaju */
.main-bar-wraper .main-bar,
.main-bar-wraper .logo-header img,
.main-bar-wraper .header-nav ul li a {
    transition: all 0.3s ease-in-out;
}

/* Fleksibilan raspored u headeru */
.header-flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* --- STANJE KADA SE SKROLUJE (UIkit dodaje .shrink-header) --- */
.shrink-header .main-bar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.shrink-header .logo-header img {
    max-height: 90px !important;
    width: auto !important;
}

.shrink-header .header-nav ul li a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* =========================================
   4. IKONE (Search i Kontakt) - KOCKASTI OBLIK
   ========================================= */
/* Forsiramo vidljivost celog bloka */
.extra-nav-wrapper,
.extra-nav-wrapper .extra-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
    gap: 10px !important;
    z-index: 100000 !important;
}

/* Stil za KOCKASTO dugme */
.header-icon-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important;
    height: 45px !important;
    background-color: transparent !important; /* Promeni u #f0f0f0 !important ako i dalje ne vidiš ikone */


    color: #222222 !important;
    font-size: 18px !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
}

/* Hover efekat na ikone */
.header-icon-btn:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
    border-color: #bbbbbb !important;
    transform: translateY(-2px);
}

/* Smanjivanje ikona kada se skroluje */
.shrink-header .header-icon-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
}

/* =========================================
   5. MOBILNI PRIKAZ (Hamburger meni)
   ========================================= */
.mobile-only {
    display: none;
    background: transparent;
    border: none;
    font-size: 22px;
    color: #333;
    padding: 5px;
    flex-shrink: 0;
    z-index: 100000;
}

@media (max-width: 991px) {
    .header-nav {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
        align-items: center;
        justify-content: center;
        order: 3; /* Skroz desno */
    }

    .extra-nav-wrapper {
        order: 2; /* Ikone levo od hamburger menija */
        gap: 5px !important;
    }
}
/* =========================================
   6. POPRAVKA KONTAKT PANELA (Iznad header-a)
   ========================================= */

/* Glavni kontejner bočnog panela mora biti iznad svega */
.contact-slide-hide {
    z-index: 999999 !important; /* Veći od header-ovih 99999 */
}

/* Dugme za zatvaranje (X) mora biti sigurno klikabilno */
.contact-slide-hide .contact_close {
    z-index: 1000000 !important; /* Najviši mogući prioritet */
    position: relative; /* Osigurava da z-index radi */
    cursor: pointer;
    color: #ffffff !important; /* Bela boja da se vidi na tamnoj pozadini panela */
    font-size: 32px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

/* Hover efekat na X dugme za bolji UX */
.contact-slide-hide .contact_close:hover {
    color: #fd0303 !important; /* Žuta boja na hover (kao u top bar-u) */
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}
/* =========================================
   7. UIKIT OFF-CANVAS KONTAKT PANEL STILOVI
   ========================================= */

/* Pozadina panela (Tamna, elegantna) */
.custom-contact-panel {
    background-color: #1a1a1a !important;
    color: #f5f5f5 !important;
    width: 350px !important; /* Širina panela */
}

/* Naslovi i tekst unutar panela */
.custom-contact-panel h3,
.custom-contact-panel h5 {
    color: #ffffff !important;
}

.custom-contact-panel a {
    color: #e0e0e0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.custom-contact-panel a:hover {
    color: #fd0303 !important; /* Zlatna boja na hover */
}

/* Glavno X dugme za zatvaranje (UIkit generiše ovo, mi ga samo ulepšavamo) */
.custom-contact-panel .uk-offcanvas-close {
    top: 15px !important;
    right: 15px !important;
    color: #ffffff !important;
    z-index: 1000001 !important; /* Apsolutno najviši prioritet */
}

.custom-contact-panel .uk-offcanvas-close:hover {
    color: #fd0303 !important;
    transform: rotate(90deg); /* Mala animacija pri hoveru */
    transition: all 0.3s ease;
}

/* Društvene mreže dugmići */
.social-links-offcanvas .uk-icon-button {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

.social-links-offcanvas .uk-icon-button:hover {
    background-color: #fd0303 !important;
    color: #1a1a1a !important;
    border-color: #ec0342 !important;
}

/* Linije za razdvajanje (Divider) */
.custom-contact-panel .uk-divider-icon > * {
    background-color: #1a1a1a !important;
}
.custom-contact-panel .uk-divider-icon::before,
.custom-contact-panel .uk-divider-icon::after {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Prilagođavanje za mobilne uređaje */
@media (max-width: 767px) {
    .custom-contact-panel {
        width: 85% !important; /* Zauzima 85% ekrana na mobilnom */
    }
}
/* =========================================
   8. POPRAVKA: OFF-CANVAS IZNAD HEADER-A
   ========================================= */

/* Glavni kontejner off-canvas-a */
.uk-offcanvas {
    z-index: 9999999 !important; /* Mora biti veći od header-ovih 99999 */
}

/* Sam panel (bar) koji klizi sa strane */
.uk-offcanvas-bar {
    z-index: 9999999 !important;
}

/* Overlay (zatamnjenje pozadine) */
.uk-offcanvas-overlay::before {
    z-index: 9999998 !important;
}

/* Osiguraj da overlay pokriva sve, uključujući header */
.uk-offcanvas-overlay.uk-offcanvas-flip::before {
    z-index: 9999998 !important;
}

/* Dodatno osiguranje za body kada je off-canvas otvoren */
body.uk-offcanvas-page {
    overflow: hidden !important;
}
.top-bar-wraper {
    position: relative !important;
    z-index: 100 !important;

    color: #ffffff !important;
    font-size: 13px;
    padding: 5px 0;
}
/* =========================================
   TOP BAR - SPOJENA VERZIJA
   ========================================= */
.top-bar-wraper {
    background-color: #4b4b4b !important; /* bg-gray ekvivalent (svetlo siva) */
    /* Ili stavi #1a1a1a !important; ako želiš tamnu traku */
    color: #333333 !important;
    font-size: 13px;
    padding: 8px 0;
    position: relative !important;
    z-index: 100 !important;
}

/* Leva strana - lista */
.e-p-bx {
    display: flex;
    align-items: center;
    gap: 15px;
}

.e-p-bx li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #dc3545;
}

.e-p-bx li a {
    color: #dc3545;
    text-decoration: none;
    transition: color 0.3s ease;
}

.e-p-bx li a:hover {
    color: #ffffff; /* Zlatna boja na hover */
}

/* Desna strana - društvene mreže */
.social-list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.05);
    color: #fd0303;
    transition: all 0.3s ease;
}

.social-list a:hover {
    background-color: #fd0303;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Dugme za zakazivanje */
.appint-btn .site-button {
    background-color: #fd0303 !important; /* Zlatna/žuta boja */
    color: #fff !important;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none;
}

.appint-btn .site-button:hover {
    background-color: #fd0303 !important; /* Tamnija žuta na hover */
    color: #1a1a1a !important;
    transform: translateY(-1px);
}

/* Mobilno prilagođavanje */
@media (max-width: 767px) {
    .top-bar-wraper {
        display: none !important; /* Sakrij na mobilnom da ne zauzima prostor */
    }
}
/* ============================================
   HERO SEKCIJA
   ============================================ */
.article-hero-fullwidth {
    position: relative;
    width: 100vw;
    height: 400px;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
}

/* ============================================
   NASLOV SA ZAGRADAMA
   ============================================ */
.banner-title-outer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.banner-title-name {
    display: inline-block;
    max-width: 90%;
}

.m-b0 {
    margin-bottom: 0 !important;
}

.title-with-brackets {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Leva zagrada */
.bracket-left {
    display: inline-block;
    font-size: 4rem;
    font-weight: 300;
    color: #FFD700; /* Zlatna boja */
    margin-right: 20px;
    line-height: 1;
}

/* Desna zagrada */
.bracket-right {
    display: inline-block;
    font-size: 4rem;
    font-weight: 300;
    color: #FFD700; /* Zlatna boja */
    margin-left: 20px;
    line-height: 1;
}

/* Tamne zagrade za fallback (bez slike) */
.bracket-left.dark-bracket,
.bracket-right.dark-bracket {
    color: #333333;
}

/* ============================================
   BREADCRUMBS STILIZACIJA
   ============================================ */
.hero-breadcrumbs .moduletable {
    margin-bottom: 0;
}

.hero-breadcrumbs .uk-breadcrumb {
    justify-content: center;
}

.hero-breadcrumbs .uk-breadcrumb > * > :not([hidden]) ~ :not([hidden]) {
    color: rgba(255, 255, 255, 0.7);
}

.hero-breadcrumbs .uk-breadcrumb > :last-child > span {
    color: #ffffff;
    font-weight: 600;
}

.hero-breadcrumbs .uk-breadcrumb > :nth-last-child(2) > a {
    color: #FFD700; /* Zlatna boja za linkove */
}

.hero-breadcrumbs .uk-breadcrumb > :nth-last-child(2) > a:hover {
    color: #ffffff;
    text-decoration: underline;
}
a.uk-link-heading.blog-post-title {
    font-weight: 600;
}
.breadcrumb {

    --bs-breadcrumb-divider-color: #b33963;

    --bs-breadcrumb-item-active-color: #f14848;

}
/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 960px) {
    .article-hero-fullwidth {
        height: 450px;
    }

    .uk-heading-medium {
        font-size: 2.5rem;
    }

    .bracket-left,
    .bracket-right {
        font-size: 3rem;
    }
}

@media (max-width: 640px) {
    .article-hero-fullwidth {
        height: 350px;
    }

    .uk-heading-medium {
        font-size: 1.5rem;
    }

    .bracket-left,
    .bracket-right {
        font-size: 2rem;
        margin-right: 10px;
        margin-left: 10px;
    }

    .title-with-brackets {
        font-size: 1rem;
    }
}
/* ============================================
   NASLOV SA DIJAGONALNIM ZAGRADAMA
   ============================================ */
.banner-title-outer {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px 0;
}

.banner-title-name {
    position: relative;
    display: inline-block;
    max-width: 800px; /* Ograničava širinu da se tekst lomi u 2 reda */
    padding: 20px 60px; /* Prostor za zagrade sa strane */
}

.title-with-brackets {
    display: block;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.3;
    text-align: center;
    margin: 0;
    /* Osigurava da se tekst lomi na približno dva reda */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* LEVA ZAGRADA - pozicionirana gore-levo */
.banner-title-name::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 50%;
    border-top: 7px solid #FFD700;
    border-left: 7px solid #FFD700;
    border-bottom: 7px solid #FFD700;
    box-sizing: border-box;
}

/* DESNA ZAGRADA - pozicionirana dole-desno */
.banner-title-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 50%;
    border-top: 7px solid #FFD700;
    border-right: 7px solid #FFD700;
    border-bottom: 7px solid #FFD700;
    box-sizing: border-box;
}

/* Tamne zagrade za fallback (bez slike) */
.uk-container .banner-title-name::before,
.uk-container .banner-title-name::after {
    border-color: #333333;
}

/* ============================================
   BREADCRUMBS STILIZACIJA
   ============================================ */
.hero-breadcrumbs .moduletable {
    margin-bottom: 0;
}

.hero-breadcrumbs .uk-breadcrumb {
    justify-content: center;
}

.hero-breadcrumbs .uk-breadcrumb > * > :not([hidden]) ~ :not([hidden]) {
    color: rgba(255, 255, 255, 0.7);
}

.hero-breadcrumbs .uk-breadcrumb > :last-child > span {
    color: #ffffff;
    font-weight: 600;
}

.hero-breadcrumbs .uk-breadcrumb > :nth-last-child(2) > a {
    color: #FFD700;
}

.hero-breadcrumbs .uk-breadcrumb > :nth-last-child(2) > a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 960px) {
    .banner-title-name {
        max-width: 600px;
        padding: 15px 50px;
    }

    .banner-title-name::before,
    .banner-title-name::after {
        width: 15px;
    }
}

@media (max-width: 640px) {
    .banner-title-name {
        max-width: 100%;
        padding: 10px 40px;
    }

    .banner-title-name::before,
    .banner-title-name::after {
        width: 12px;
        border-width: 5px;
    }

    .title-with-brackets {
        font-size: 1.5rem !important;
        letter-spacing: 1px;
    }
}
/* ============================================
   KONTEJNER ZA NASLOV
   ============================================ */
.banner-title-outer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.banner-title-name {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 45px; /* Veći razmak za veće zagrade */
    max-width: 750px;
}

/* ============================================
   MALI NASLOV
   ============================================ */
.custom-small-title {
    font-size: 1.5rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    letter-spacing: 1px;
    font-weight: 600 !important;
    margin: 0 !important;
    width: 100%;
}

/* ============================================
   VELIKE, DEBELE ZAGRADE U ISTOJ RAVNI
   ============================================ */
.bracket {
    position: absolute;
    width: 30px;   /* Veća širina kraka */
    height: 90px;  /* Veća visina */
    top: 50%;      /* CENTRIRANO - obe u istoj ravni */
    transform: translateY(-50%);
    box-sizing: border-box;
    z-index: 10;
    opacity: 1 !important;
}

/* Leva zagrada - ISTA VISINA KAO DESNA */
.bracket-left {
    left: 0;
    border-top: 10px solid #fd0303 !important;
    border-bottom: 10px solid #fd0303 !important;
    border-left: 10px solid #fd0303 !important;
    border-right: none !important;
}

/* Desna zagrada - ISTA VISINA KAO LEVA */
.bracket-right {
    right: 0;
    border-top: 10px solid #fd0303 !important;
    border-bottom: 10px solid #fd0303 !important;
    border-right: 10px solid #fd0303 !important;
    border-left: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .custom-small-title {
        font-size: 0.9rem !important;
    }
    .banner-title-name {
        padding: 10px 35px;
    }
    .bracket {
        width: 20px;
        height: 60px;
        border-width: 7px !important;
    }
}
/* ========================================
   BREAK OUT OF UK-CONTAINER - FULL WIDTH
   ======================================== */

.specialization-fullwidth {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* ili koristi padding ako želiš unutrašnji razmak */
    padding-left: 15px;
    padding-right: 15px;
}

.specialization-inner {
    max-width: 1320px; /* ili željena max širina */
    margin: 0 auto;
    padding: 0 15px;
}

/* Alternativno rešenje sa calc() */
/*
.specialization-fullwidth {
    width: calc(100% + 2 * var(--container-padding));
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
*/
.uk-dotnav>*>* {
    display: block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    /* border-radius: 50%; */
    background: 0 0;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid rgba(102, 102, 102, .4);
    transition: .2s ease-in-out;
    transition-property: background-color, border-color;
}
.color-red{
    color: red!important;
}
.uk-dotnav>*>* {
    display: block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;

    background: 0 0;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid rgba(102, 102, 102, .4);
    transition: .2s ease-in-out;
    transition-property: background-color, border-color;
}