/* ==========================================================================
           OSNOVNE POSTAVKE (RESET)
           ========================================================================== */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

   

        /* ==========================================================================
           NAVIGACIJA (NAVBAR)
           ========================================================================== */
        .navbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
        }

        .navbar-brand {
            font-size: 1.25rem;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }

    

        /* ==========================================================================
           GRID SUSTAV (PO UZORU NA BOOTSTRAP)
           ========================================================================== */
        
        /* 1. Kontejneri */
        .container {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        .container-fluid {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        /* 2. Red */
        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
            row-gap: 2rem;
        }

        /* 3. Osnovne postavke kolumni (zajedničko za sve) */
        [class*="col-"], .col {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
        }

        /* Automatska kolumna */
        .col {
            flex-basis: 0;
            flex-grow: 1;
            max-width: 100%;
        }

        /* XS (Extra Small) Ekran (Uvijek se primjenjuje) */
        .col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
        .col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
        .col-3 { flex: 0 0 25%; max-width: 25%; }
        .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
        .col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
        .col-6 { flex: 0 0 50%; max-width: 50%; }
        .col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
        .col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
        .col-9 { flex: 0 0 75%; max-width: 75%; }
        .col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
        .col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
        .col-12 { flex: 0 0 100%; max-width: 100%; }

        /* SM (Small) Ekran: >= 576px */
        @media (min-width: 576px) {
            .container { max-width: 540px; }
            .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; }
            .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
            .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
            .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
            .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
            .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
            .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
            .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
            .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
            .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
            .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
            .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
            .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
        }

        /* MD (Medium) Ekran: >= 768px */
        @media (min-width: 768px) {
            .container { max-width: 720px; }
            .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; }
            .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
            .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
            .col-md-3 { flex: 0 0 25%; max-width: 25%; }
            .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
            .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
            .col-md-6 { flex: 0 0 50%; max-width: 50%; }
            .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
            .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
            .col-md-9 { flex: 0 0 75%; max-width: 75%; }
            .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
            .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
            .col-md-12 { flex: 0 0 100%; max-width: 100%; }
        }

        /* LG (Large) Ekran: >= 992px */
        @media (min-width: 992px) {
            .container { max-width: 960px; }
            .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; }
            .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
            .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
            .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
            .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
            .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
            .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
            .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
            .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
            .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
            .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
            .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
            .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
        }

        /* XL (Extra Large) Ekran: >= 1200px */
        @media (min-width: 1200px) {
            .container { max-width: 1140px; }
            .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
            .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
            .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
            .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
            .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
            .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
            .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
            .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
            .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
            .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
            .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
            .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
            .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
        }

    .img-fluid {
        width: 100%;
        height: auto;
    }