/**
 * Template: Babic
 * Osnovni stilovi - ti dodaješ svoje preko ovoga
 */

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* ===== LAYOUT ===== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }

@media (min-width: 768px) {
    .col-md-3 { flex: 0 0 25%; max-width: 25%; padding: 0 15px; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; padding: 0 15px; }
    .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; padding: 0 15px; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; padding: 0 15px; }
}

/* ===== NAVIGACIJA ===== */
#main-nav {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 0;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    text-decoration: none;
}

/* ===== MAIN CONTENT ===== */
/*#main-content {

    min-height: 60vh;
}*/

/* ===== SIDEBARS ===== */
aside#left,
aside#right {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ===== FOOTER ===== */
#footer {
    background: #212529;
    color: #adb5bd;

    margin-top: auto;
}

/* ===== ERROR PAGE ===== */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.error-page .display-1 {
    font-size: 6rem;
    font-weight: 300;
    color: #dc3545;
}

/* ===== UTILITY ===== */
.text-center { text-align: center; }
.justify-content-center { justify-content: center; }

/* ===== BOOTSTRAP OVERRIDE PRIMER ===== */
/* .btn-primary {
    background-color: tvoja-boja;
    border-color: tvoja-boja;
} */

/* ===== UIKIT OVERRIDE PRIMER ===== */
/* .uk-button-primary {
    background-color: tvoja-boja;
} */
/* 1. Podešavanje kontejnera */
.moj-kontejner {
    position: relative; /* OVO JE OBAVEZNO da bi absolute pozicioniranje radilo u odnosu na njega */
    height: 100vh;      /* Primer visine, prilagodi po potrebi */
    width: 100%;
    overflow: hidden;   /* Sprečava da se element vidi ako izađe van okvira */
}

/* 2. Pozicioniranje elementa na dno i desno */
.hilite-title {
    position: absolute;
    bottom: 30px; /* Razmak od dna */
    right: 50px;  /* Razmak od desne strane (zamenjuje tvoj p-r50) */
    /* text-right ti više ne treba jer je element već uz desnu ivicu */
    color: #999!important;
}

/* 3. Tvoja animacija (ostavio sam tvoju putanju) */
.text-pop-up-top {
    animation: text-pop-up-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
}
strong.uk-text-stroke {
    color: #efefef;
}
/* 4. DEFINICIJA ANIMACIJE (Gore-dole) */
@keyframes text-pop-up-top {
    0% {
        transform: translateY(0);
        transform-origin: 50% 50%;
        text-shadow: none;
    }
    100% {
        transform: translateY(-50px);
        transform-origin: 50% 50%;
        text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
}