/* Hero Slider Styles */

/* Osiguraj da pagewrap nema padding-top koji odmiče navbar i hero od vrha */
#pagewrap,
body #pagewrap,
body.full_width #pagewrap,
#pagewrap.hfeed.site,
body.full_width #pagewrap.hfeed.site {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    top: 0 !important;
}

body.transparent-header #pagewrap,
body.transparent-header.themify_builder_active #pagewrap,
body.transparent-header.themify_builder_active #pagewrap.hfeed.site,
body.fixed-header-on #pagewrap,
body.full_width.fixed-header-on #pagewrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    top: 0 !important;
}

/* Osiguraj da body nema margin-top */
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Specifično za home page - ukloni sve padding/margin koji odmiče od vrha */
body.home,
body.home.transparent-header,
body.home.transparent-header.themify_builder_active,
body.home.page-template-default,
body.home.page-id-2256 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.home #pagewrap,
body.home.transparent-header #pagewrap,
body.home.transparent-header.themify_builder_active #pagewrap,
body.home #pagewrap.hfeed.site {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.home #body,
body.home #layout,
body.home #content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Osiguraj da html element nema margin/padding */
html {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Osiguraj da body nema margin/padding koji odmiče headerwrap */
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Osiguraj da #desktop-navbar nema margin/padding */
#desktop-navbar {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Osiguraj da navbar nema margin-top i počinje na vrhu */
#desktop-navbar,
#mobile-navbar,
#headerwrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
    position: absolute !important;
}

/* Override sve druge stilove koji mogu odmicati headerwrap od vrha */
#headerwrap,
body #headerwrap,
body.full_width #headerwrap,
#pagewrap #headerwrap,
#desktop-navbar #headerwrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    top: 0 !important;
    left: 0 !important;
    position: absolute !important;
    width: 100% !important;
}

/* Desktop navbar - fixed na vrhu */
@media (min-width: 1101px) {
    #desktop-navbar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }
    
    #headerwrap {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Override sve druge stilove */
    body #headerwrap,
    body.full_width #headerwrap,
    #pagewrap #headerwrap,
    #desktop-navbar #headerwrap {
        top: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Mobile navbar - fixed na vrhu */
@media (max-width: 1100px) {
    #mobile-navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
    }
}

/* Osiguraj da body i #body nema margin-top */
#body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Osiguraj da layout i content nema margin-top */
#layout,
#content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Osiguraj da themify builder row nema margin-top */
.themify_builder_row.module_row_0,
.module_row_0 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Osiguraj da row_inner_wrapper nema margin-top */
.module_row_0 .row_inner_wrapper,
.module_row_0 .row_inner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Osiguraj da page-content nema margin-top */
.page-content,
.entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hero-slider-container {
    position: relative !important;
    width: 100% !important;
    height: 800px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    clear: both !important;
}

/* Desktop - Hero ispod navbara */
@media (min-width: 1101px) {
    /* Navbar je absolute na vrhu (130px visina), hero počinje odmah ispod */
    /* Za sve stranice - hero blizu navbara */
    .hero-slider-container {
        margin-top: 130px !important;
        position: relative !important;
        top: 0 !important;
    }
}

/* Mobile - Hero ispod mobilnog navbara (60px visina) */
@media (max-width: 1100px) {
    .hero-slider-container {
        margin-top: 60px !important;
        position: relative !important;
        top: 0 !important;
    }
}

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

.hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.hero-slide.active {
    opacity: 1 !important;
}

.hero-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 30% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-content {
    position: relative !important;
    text-align: center !important;
    color: #ffffff !important;
    z-index: 3 !important;
    width: 90% !important;
    max-width: 1200px !important;
    font-family: 'Raleway', Arial, sans-serif !important;
}

.hero-title {
    font-family: 'Raleway', Arial, sans-serif !important;
    font-size: 4.5em !important;
    font-weight: 800 !important;
    margin: 0 0 20px 0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    text-align: center !important;
    letter-spacing: 1px !important;
}

.hero-subtitle {
    font-family: 'Raleway', Arial, sans-serif !important;
    font-size: 2em !important;
    font-weight: 500 !important;
    margin: 0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
}

/* Override sve druge stilove koji mogu utjecati na hero tekst */
.hero-content h1,
.hero-content h2,
.hero-slide h1,
.hero-slide h2,
.hero-slider-container h1,
.hero-slider-container h2,
.hero-slider h1,
.hero-slider h2 {
    font-family: 'Raleway', Arial, sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    margin: inherit !important;
    text-shadow: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-align: inherit !important;
    padding: 0 !important;
    letter-spacing: inherit !important;
    word-wrap: normal !important;
}

/* Override opća h1 i h2 pravila unutar hero sekcije - NAJVIŠA SPECIFIČNOST */
.hero-slider-container h1.hero-title,
.hero-slider-container h2.hero-subtitle,
.hero-slider-container .hero-title,
.hero-slider-container .hero-subtitle,
.hero-content h1.hero-title,
.hero-content h2.hero-subtitle,
.hero-content .hero-title,
.hero-content .hero-subtitle,
.hero-slide h1.hero-title,
.hero-slide h2.hero-subtitle,
.hero-slide .hero-title,
.hero-slide .hero-subtitle {
    font-family: 'Raleway', Arial, sans-serif !important;
    font-size: 4.5em !important;
    font-weight: 800 !important;
    margin: 0 0 20px 0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 0 !important;
    letter-spacing: 1px !important;
}

.hero-slider-container h2.hero-subtitle,
.hero-slider-container .hero-subtitle,
.hero-content h2.hero-subtitle,
.hero-content .hero-subtitle,
.hero-slide h2.hero-subtitle,
.hero-slide .hero-subtitle {
    font-family: 'Raleway', Arial, sans-serif !important;
    font-size: 2em !important;
    font-weight: 500 !important;
    margin: 0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 0 !important;
    letter-spacing: 0.5px !important;
}

/* Override sve globalne h1 i h2 stilove unutar hero sekcije */
.hero-slider-container h1,
.hero-slider-container h2,
.hero-content h1,
.hero-content h2,
.hero-slide h1,
.hero-slide h2,
.hero-slider h1,
.hero-slider h2 {
    font-family: 'Raleway', Arial, sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    word-wrap: normal !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-shadow: inherit !important;
    text-align: inherit !important;
}

/* Override specifično za hero-title */
.hero-title,
h1.hero-title,
.hero-slider-container .hero-title,
.hero-content .hero-title,
.hero-slide .hero-title {
    font-family: 'Raleway', Arial, sans-serif !important;
    font-size: 4.5em !important;
    font-weight: 800 !important;
    margin: 0 0 20px 0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 0 !important;
    letter-spacing: 1px !important;
}

/* Override specifično za hero-subtitle */
.hero-subtitle,
h2.hero-subtitle,
.hero-slider-container .hero-subtitle,
.hero-content .hero-subtitle,
.hero-slide .hero-subtitle {
    font-family: 'Raleway', Arial, sans-serif !important;
    font-size: 2em !important;
    font-weight: 500 !important;
    margin: 0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 0 !important;
    letter-spacing: 0.5px !important;
}

.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.3);
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 2.5em;
    color: #ffffff;
    cursor: pointer;
    z-index: 3;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.hero-nav:hover {
    background: rgba(255, 255, 255, 0.5);
}

.hero-prev {
    left: 2%;
}

.hero-next {
    right: 2%;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .hero-slider-container {
        height: 600px !important;
    }
    
    .hero-overlay {
        height: 30% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero-content {
        position: relative !important;
        text-align: center !important;
        color: #ffffff !important;
        font-family: 'Raleway', Arial, sans-serif !important;
        z-index: 3 !important;
        width: 90% !important;
        max-width: 1200px !important;
    }
    
    /* Override sve stilove za hero-title na mobilnim uređajima */
    .hero-title,
    h1.hero-title,
    .hero-slider-container .hero-title,
    .hero-content .hero-title,
    .hero-slide .hero-title,
    .hero-slider-container h1.hero-title,
    .hero-content h1.hero-title,
    .hero-slide h1.hero-title {
        font-family: 'Raleway', Arial, sans-serif !important;
        font-size: 2.5em !important;
        font-weight: 800 !important;
        margin: 0 0 15px 0 !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
        line-height: 1.2 !important;
        color: #ffffff !important;
        text-align: center !important;
        padding: 0 !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Override sve stilove za hero-subtitle na mobilnim uređajima */
    .hero-subtitle,
    h2.hero-subtitle,
    .hero-slider-container .hero-subtitle,
    .hero-content .hero-subtitle,
    .hero-slide .hero-subtitle,
    .hero-slider-container h2.hero-subtitle,
    .hero-content h2.hero-subtitle,
    .hero-slide h2.hero-subtitle {
        font-family: 'Raleway', Arial, sans-serif !important;
        font-size: 1.3em !important;
        font-weight: 500 !important;
        margin: 0 !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
        line-height: 1.3 !important;
        color: #ffffff !important;
        text-align: center !important;
        padding: 0 !important;
        letter-spacing: 0.3px !important;
    }
    
    .hero-nav {
        width: 50px;
        height: 50px;
        font-size: 2em;
    }
    
    .hero-prev {
        left: 1%;
    }
    
    .hero-next {
        right: 1%;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hero-slider-container {
        height: 500px !important;
    }
    
    .hero-overlay {
        height: 30% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero-content {
        position: relative !important;
        text-align: center !important;
        color: #ffffff !important;
        font-family: 'Raleway', Arial, sans-serif !important;
        z-index: 3 !important;
        width: 90% !important;
        max-width: 1200px !important;
    }
    
    /* Override sve stilove za hero-title na malim mobilnim uređajima */
    .hero-title,
    h1.hero-title,
    .hero-slider-container .hero-title,
    .hero-content .hero-title,
    .hero-slide .hero-title,
    .hero-slider-container h1.hero-title,
    .hero-content h1.hero-title,
    .hero-slide h1.hero-title {
        font-family: 'Raleway', Arial, sans-serif !important;
        font-size: 2em !important;
        font-weight: 800 !important;
        margin: 0 0 15px 0 !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
        line-height: 1.2 !important;
        color: #ffffff !important;
        text-align: center !important;
        padding: 0 !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Override sve stilove za hero-subtitle na malim mobilnim uređajima */
    .hero-subtitle,
    h2.hero-subtitle,
    .hero-slider-container .hero-subtitle,
    .hero-content .hero-subtitle,
    .hero-slide .hero-subtitle,
    .hero-slider-container h2.hero-subtitle,
    .hero-content h2.hero-subtitle,
    .hero-slide h2.hero-subtitle {
        font-family: 'Raleway', Arial, sans-serif !important;
        font-size: 1.1em !important;
        font-weight: 500 !important;
        margin: 0 !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
        line-height: 1.3 !important;
        color: #ffffff !important;
        text-align: center !important;
        padding: 0 !important;
        letter-spacing: 0.3px !important;
    }
}

/* FINAL OVERRIDE - Najviša specifičnost za sve font-related stilove - override sve druge CSS fajlove */
body .hero-slider-container .hero-title,
body .hero-slider-container .hero-subtitle,
body .hero-content .hero-title,
body .hero-content .hero-subtitle,
body .hero-slide .hero-title,
body .hero-slide .hero-subtitle,
body .hero-slider-container h1.hero-title,
body .hero-slider-container h2.hero-subtitle,
body .hero-content h1.hero-title,
body .hero-content h2.hero-subtitle,
body .hero-slide h1.hero-title,
body .hero-slide h2.hero-subtitle,
body h1.hero-title,
body h2.hero-subtitle {
    font-family: 'Raleway', Arial, sans-serif !important;
    font-weight: inherit !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    word-wrap: normal !important;
}

/* Override sve globalne h1 stilove za hero-title */
body .hero-title,
body h1.hero-title,
body .hero-slider-container .hero-title,
body .hero-content .hero-title,
body .hero-slide .hero-title {
    font-size: 4.5em !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Override sve globalne h2 stilove za hero-subtitle */
body .hero-subtitle,
body h2.hero-subtitle,
body .hero-slider-container .hero-subtitle,
body .hero-content .hero-subtitle,
body .hero-slide .hero-subtitle {
    font-size: 2em !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Mobile - Final override */
@media (max-width: 768px) {
    body .hero-title,
    body h1.hero-title,
    body .hero-slider-container .hero-title,
    body .hero-content .hero-title,
    body .hero-slide .hero-title {
        font-size: 2.5em !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    }
    
    body .hero-subtitle,
    body h2.hero-subtitle,
    body .hero-slider-container .hero-subtitle,
    body .hero-content .hero-subtitle,
    body .hero-slide .hero-subtitle {
        font-size: 1.3em !important;
        font-weight: 500 !important;
        letter-spacing: 0.3px !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    }
}

/* Small Mobile - Final override */
@media (max-width: 480px) {
    body .hero-title,
    body h1.hero-title,
    body .hero-slider-container .hero-title,
    body .hero-content .hero-title,
    body .hero-slide .hero-title {
        font-size: 2em !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    }
    
    body .hero-subtitle,
    body h2.hero-subtitle,
    body .hero-slider-container .hero-subtitle,
    body .hero-content .hero-subtitle,
    body .hero-slide .hero-subtitle {
        font-size: 1.1em !important;
        font-weight: 500 !important;
        letter-spacing: 0.3px !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    }
}