{"id":7129,"date":"2026-01-01T12:57:22","date_gmt":"2026-01-01T11:57:22","guid":{"rendered":"https:\/\/nsbi.org.rs\/?page_id=7129"},"modified":"2026-07-31T15:39:42","modified_gmt":"2026-07-31T14:39:42","slug":"programi","status":"publish","type":"page","link":"https:\/\/nsbi.org.rs\/sr\/programi","title":{"rendered":"Programi"},"content":{"rendered":"\n<!-- STILOVI -->\n<style>\n  :root {\n    \/* NSBI VIZUELNI IDENTITET *\/\n    --nsbi-primary: #296a45;       \/* Glavna NSBI zelena *\/\n    --nsbi-primary-hover: #1e4f33; \/* Tamnija zelena za hover *\/\n    --nsbi-dark: #1e293b;          \/* Tamno-siva za naslove *\/\n    --nsbi-gray: #475569;          \/* Neutralni sivi tekst *\/\n    --nsbi-bg-card: #ffffff;       \/* Bela pozadina kartice *\/\n    --nsbi-badge-bg: #eaf4ef;      \/* Svetlo zelena pozadina za oznake *\/\n    --nsbi-badge-text: #296a45;    \/* Tekst na oznakama *\/\n    --nsbi-border: #e2e8f0;        \/* Diskretna boja ivica *\/\n    --nsbi-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n    --nsbi-shadow-hover: 0 12px 24px -4px rgba(41, 106, 69, 0.18), 0 4px 6px -2px rgba(0, 0, 0, 0.04);\n  }\n\n  \/* KONTENJER ZAGLAVALJA SA TABOVIMA *\/\n  .programs-wrapper {\n    font-family: inherit;\n    padding: 20px 0;\n  }\n\n  \/* RE\u0160ENO: POPRAVLJENA NAVIGACIJA BEZ SKROLERA *\/\n  .tab-navigation {\n    display: flex;\n    justify-content: center;\n    gap: 16px;\n    border-bottom: 2px solid var(--nsbi-border);\n    margin-bottom: 28px;\n    overflow: hidden;\n    flex-wrap: wrap;\n  }\n\n  \/* POVE\u0106ANI TAB DUGMI\u0106I SA IKONICAMA *\/\n  .tab-btn {\n    background: none;\n    border: none;\n    padding: 14px 24px;\n    font-size: 1.2rem;\n    font-weight: 700;\n    color: var(--nsbi-gray);\n    cursor: pointer;\n    position: relative;\n    transition: all 0.2s ease;\n    border-bottom: 3px solid transparent;\n    margin-bottom: -2px;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    white-space: nowrap;\n  }\n\n  .tab-btn svg {\n    width: 20px;\n    height: 20px;\n    fill: currentColor;\n    transition: transform 0.2s ease;\n  }\n\n  .tab-btn:hover {\n    color: var(--nsbi-primary);\n  }\n\n  .tab-btn:hover svg {\n    transform: scale(1.1);\n  }\n\n  .tab-btn.active {\n    color: var(--nsbi-primary);\n    border-bottom-color: var(--nsbi-primary);\n  }\n\n  \/* SADR\u017dAJ TABOVA *\/\n  .tab-content {\n    display: none;\n  }\n\n  .tab-content.active {\n    display: block;\n  }\n\n  \/* STIL ZA \"O NA\u0160IM PROGRAMIMA\" TAB *\/\n  .about-programs-box {\n    background-color: var(--nsbi-bg-card);\n    border: 1px solid var(--nsbi-border);\n    border-radius: 12px;\n    padding: 32px;\n    box-shadow: var(--nsbi-shadow);\n    max-width: 900px;\n    margin: 0 auto;\n  }\n\n  .about-highlight {\n    background-color: var(--nsbi-badge-bg);\n    border-left: 4px solid var(--nsbi-primary);\n    padding: 20px 24px;\n    border-radius: 0 8px 8px 0;\n    font-size: 1.15rem;\n    font-weight: 600;\n    color: var(--nsbi-primary-hover);\n    line-height: 1.6;\n    margin-bottom: 24px;\n  }\n\n  .about-text {\n    font-size: 1.05rem;\n    color: var(--nsbi-gray);\n    line-height: 1.7;\n    margin-bottom: 16px;\n  }\n\n  .about-text:last-child {\n    margin-bottom: 0;\n  }\n\n  \/* MRE\u017dA SA KARTICAMA PROGRAMA *\/\n  .programs-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 24px;\n    box-sizing: border-box;\n  }\n\n  .program-card {\n    background-color: var(--nsbi-bg-card);\n    border: 1px solid var(--nsbi-border);\n    border-radius: 12px;\n    padding: 24px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    box-shadow: var(--nsbi-shadow);\n    transition: all 0.3s ease;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .program-card:hover {\n    transform: translateY(-5px);\n    box-shadow: var(--nsbi-shadow-hover);\n    border-color: var(--nsbi-primary);\n  }\n\n  .program-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background-color: var(--nsbi-primary);\n  }\n\n  \/* OZNAKE \/ BADGES *\/\n  .program-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.85rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding: 6px 14px;\n    border-radius: 20px;\n    background-color: var(--nsbi-badge-bg);\n    color: var(--nsbi-badge-text);\n    margin-bottom: 12px;\n  }\n\n  .program-badge.uskoro {\n    background-color: #f1f5f9;\n    color: #475569;\n  }\n\n  \/* PULSIRAJU\u0106A TA\u010cKICA ZA \"USKORO\" *\/\n  .pulse-dot {\n    width: 8px;\n    height: 8px;\n    background-color: var(--nsbi-primary);\n    border-radius: 50%;\n    display: inline-block;\n    position: relative;\n  }\n\n  .pulse-dot::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background-color: var(--nsbi-primary);\n    animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;\n  }\n\n  @keyframes pulse-ring {\n    0% { transform: scale(0.95); opacity: 0.8; }\n    50% { transform: scale(2.2); opacity: 0; }\n    100% { transform: scale(0.95); opacity: 0; }\n  }\n\n  .program-title {\n    font-size: 1.25rem;\n    font-weight: 700;\n    color: var(--nsbi-dark);\n    margin: 0 0 12px 0;\n    line-height: 1.35;\n  }\n\n  .program-description {\n    font-size: 0.95rem;\n    color: var(--nsbi-gray);\n    line-height: 1.6;\n    margin-bottom: 24px;\n    flex-grow: 1;\n  }\n\n  \/* DUGMAD SA STRELICOM I MIKRO-INTERAKCIJOM *\/\n  .program-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    width: 100%;\n    padding: 12px 20px;\n    background-color: var(--nsbi-primary);\n    color: #ffffff !important;\n    font-weight: 600;\n    font-size: 1.05rem;\n    text-decoration: none;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n    box-sizing: border-box;\n    text-align: center;\n  }\n\n  .program-btn svg {\n    width: 18px;\n    height: 18px;\n    fill: currentColor;\n    transition: transform 0.2s ease;\n  }\n\n  .program-btn:hover {\n    background-color: var(--nsbi-primary-hover);\n    text-decoration: none;\n  }\n\n  .program-btn:hover svg {\n    transform: translateX(4px);\n  }\n<\/style>\n\n<!-- GLAVNI KONTENJER -->\n<div class=\"programs-wrapper\">\n\n  <!-- NAVIGACIJA ZA TABOVE -->\n  <nav class=\"tab-navigation\">\n    <button class=\"tab-btn active\" onclick=\"openTab(event, 'tab-mreza')\">\n      <svg viewBox=\"0 0 24 24\"><path d=\"M4 11h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1zm10 0h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1zM4 21h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1zm10 0h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1z\"\/><\/svg>\n      Svi programi\n    <\/button>\n    <button class=\"tab-btn\" onclick=\"openTab(event, 'tab-o-programima')\">\n      <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\/><\/svg>\n      O na\u0161im programima\n    <\/button>\n  <\/nav>\n\n  <!-- TAB 1: MRE\u017dA PROGRAMA -->\n  <div id=\"tab-mreza\" class=\"tab-content active\">\n    <div class=\"programs-grid\">\n\n      <!-- 1. Biciklograd benefit program -->\n      <article class=\"program-card\">\n        <div>\n          <span class=\"program-badge\">Pogodnosti &#038; Popusti<\/span>\n          <h3 class=\"program-title\">Biciklograd benefit program<\/h3>\n          <p class=\"program-description\">\n            Mre\u017ea partnera i lokalnih biznisa koji pru\u017eaju popuste i pogodnosti svima koji svakodnevno izaberu bicikl kao glavno prevozno sredstvo u gradu.\n          <\/p>\n        <\/div>\n        <div>\n          <a href=\"https:\/\/nsbi.org.rs\/sr\/biciklograd\" class=\"program-btn\">\n            Saznaj vi\u0161e i ostvari popust\n            <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/article>\n\n      <!-- 2. Bike friendly poslodavac -->\n      <article class=\"program-card\">\n        <div>\n          <span class=\"program-badge\">Za kompanije<\/span>\n          <h3 class=\"program-title\">Bike friendly poslodavac<\/h3>\n          <p class=\"program-description\">\n            Program podr\u0161ke i sertifikacije kompanija i organizacija koje podsti\u010du svoje zaposlene da na posao dolaze biciklom i obezbe\u0111uju im adekvatne uslove.\n          <\/p>\n        <\/div>\n        <div>\n          <a href=\"https:\/\/nsbi.org.rs\/sr\/bike-friendly-poslodavac\" class=\"program-btn\">\n            Sertifikujte va\u0161u firmu\n            <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/article>\n\n      <!-- 3. Bicikloteka - biblioteka -->\n      <article class=\"program-card\">\n        <div>\n          <span class=\"program-badge\">Edukacija &#038; Znanje<\/span>\n          <h3 class=\"program-title\">Bicikloteka &#8211; biblioteka<\/h3>\n          <p class=\"program-description\">\n            Jedinstvena zbirka knjiga, stru\u010dne literature i edukativnih materijala o bicikliranju, odr\u017eivoj urbanoj mobilnosti i razvoju gradova.\n          <\/p>\n        <\/div>\n        <div>\n          <a href=\"https:\/\/nsbi.org.rs\/sr\/bicikloteka\" class=\"program-btn\">\n            Istra\u017ei naslove\n            <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/article>\n\n      <!-- 4. SOS pomo\u0107 na stazi -->\n      <article class=\"program-card\">\n        <div>\n          <span class=\"program-badge\">Podr\u0161ka na putu<\/span>\n          <h3 class=\"program-title\">SOS pomo\u0107 na stazi<\/h3>\n          <p class=\"program-description\">\n            Brza pomo\u0107 na stazi i podr\u0161ka popravke i \u0161lepanja bicikala usled kvara.\n          <\/p>\n        <\/div>\n        <div>\n          <a href=\"https:\/\/nsbi.org.rs\/sr\/sos-pomoc-na-stazi\" class=\"program-btn\">\n            Saznaj vi\u0161e o ponudi\n            <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/article>\n\n      <!-- 5. Bike Kitchen Novi Sad -->\n      <article class=\"program-card\">\n        <div>\n          <span class=\"program-badge\">Otvorena radionica<\/span>\n          <h3 class=\"program-title\">Bike Kitchen Novi Sad<\/h3>\n          <p class=\"program-description\">\n            Zajedni\u010dka, samoorganizovana radionica gde gra\u0111ani uz pomo\u0107 volontera i dostupnog alata mogu sami nau\u010diti da poprave i odr\u017eavaju svoj bicikl.\n          <\/p>\n        <\/div>\n        <div>\n          <a href=\"https:\/\/nsbi.org.rs\/sr\/bike-kitchen-novi-sad\" class=\"program-btn\">\n            Saznaj kako da u\u010destvuje\u0161\n            <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/article>\n\n      <!-- 6. NSBI cargo bicikli -->\n      <article class=\"program-card\">\n        <div>\n          <span class=\"program-badge\">Odr\u017eivi transport<\/span>\n          <h3 class=\"program-title\">NSBI cargo bicikli<\/h3>\n          <p class=\"program-description\">\n            Usluga iznajmljivanja teretnih (cargo) bicikala namenjena gra\u0111anima i lokalnim inicijativama za lak\u0161i prevoz ve\u0107eg tereta ili dece.\n          <\/p>\n        <\/div>\n        <div>\n          <a href=\"https:\/\/nsbi.org.rs\/sr\/nsbi-teretni-cargo-bicikli\" class=\"program-btn\">\n            Rezervi\u0161i cargo bicikl\n            <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/article>\n\n      <!-- 7. U pokretu podkast -->\n      <article class=\"program-card\">\n        <div>\n          <span class=\"program-badge\">Podkast &#038; Mediji<\/span>\n          <h3 class=\"program-title\">U pokretu podkast<\/h3>\n          <p class=\"program-description\">\n            Pri\u010de, razgovori i teme posve\u0107ene urbanoj mobilnosti, biciklisti\u010dkoj kulturi, ekologiji i aktivizmu kroz epizode sa zanimljivim gostima.\n          <\/p>\n        <\/div>\n        <div>\n          <a href=\"https:\/\/nsbi.org.rs\/sr\/upokretu\" class=\"program-btn\">\n            Pogledaj epizode\n            <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/article>\n\n      <!-- 8. NSBIciklista bici \u0161kolica -->\n      <article class=\"program-card\">\n        <div>\n          <span class=\"program-badge uskoro\">\n            <span class=\"pulse-dot\"><\/span> Edukacija \u2022 Uskoro\n          <\/span>\n          <h3 class=\"program-title\">NSBIciklista bici \u0161kolica<\/h3>\n          <p class=\"program-description\">\n            Edukativni program namenjen deci i novim biciklistima za bezbedno ovladavanje ve\u0161tinama vo\u017enje i snala\u017eenja u gradskom saobra\u0107aju.\n          <\/p>\n        <\/div>\n        <div>\n          <a href=\"#\" class=\"program-btn\">\n            Saznaj vi\u0161e (Uskoro)\n            <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/a>\n        <\/div>\n      <\/article>\n\n    <\/div>\n  <\/div>\n\n  <!-- TAB 2: O NA\u0160IM PROGRAMIMA -->\n  <div id=\"tab-o-programima\" class=\"tab-content\">\n    <div class=\"about-programs-box\">\n      <div class=\"about-highlight\">\n        Kroz na\u0161e programe gradimo zajednicu, promovi\u0161emo odr\u017eivu urbanu mobilnost i pokazujemo da bicikl mo\u017ee biti vi\u0161e od prevoznog sredstva \u2014 alat za povezivanje ljudi, solidarnost i urbanu transformaciju.\n      <\/div>\n      \n      <p class=\"about-text\">\n        <strong>Upoznaj na\u0161e programe i priklju\u010di se pokretu koji menja grad.<\/strong>\n      <\/p>\n\n      <p class=\"about-text\">\n        Na\u0161i programi razvijeni su sa ciljem da podstaknu odr\u017eivu urbanu mobilnost, smanje zavisnost od automobila i u\u010dine gradove prijatnijim mestima za \u017eivot. Kroz razli\u010dite inicijative povezujemo gra\u0111ane, preduze\u0107a, obrazovne ustanove i lokalne zajednice \u2013 jer svaka od ovih grupa ima va\u017enu ulogu u stvaranju biciklisti\u010dki pristupa\u010dnijeg grada.\n      <\/p>\n\n      <p class=\"about-text\">\n        Bilo da si gra\u0111anin koji \u017eeli da vozi vi\u0161e, institucija ili poslodavac koji \u017eeli da podr\u017ei svoje zaposlene, \u0161kola koja promovi\u0161e bezbedno kretanje ili zajednica koja pokre\u0107e promene \u2013 prona\u0107i \u0107e\u0161 program koji ti je namenjen.\n      <\/p>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<!-- SKRIPTA ZA PREBACIVANJE TABOVA -->\n<script>\n  function openTab(evt, tabName) {\n    var i, tabcontent, tablinks;\n    \n    tabcontent = document.getElementsByClassName(\"tab-content\");\n    for (i = 0; i < tabcontent.length; i++) {\n      tabcontent[i].classList.remove(\"active\");\n    }\n    \n    tablinks = document.getElementsByClassName(\"tab-btn\");\n    for (i = 0; i < tablinks.length; i++) {\n      tablinks[i].classList.remove(\"active\");\n    }\n    \n    document.getElementById(tabName).classList.add(\"active\");\n    evt.currentTarget.classList.add(\"active\");\n  }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Svi programi O na\u0161im programima Pogodnosti &#038; Popusti Biciklograd benefit program Mre\u017ea partnera i lokalnih biznisa koji pru\u017eaju popuste i pogodnosti svima koji svakodnevno izaberu bicikl kao glavno prevozno sredstvo&#8230;<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-7129","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Marko Mazalica","author_link":"https:\/\/nsbi.org.rs\/sr\/author\/m-mazalica"},"uagb_comment_info":0,"uagb_excerpt":"Svi programi O na\u0161im programima Pogodnosti &#038; Popusti Biciklograd benefit program Mre\u017ea partnera i lokalnih biznisa koji pru\u017eaju popuste i pogodnosti svima koji svakodnevno izaberu bicikl kao glavno prevozno sredstvo...","_links":{"self":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages\/7129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/comments?post=7129"}],"version-history":[{"count":15,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages\/7129\/revisions"}],"predecessor-version":[{"id":9567,"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/pages\/7129\/revisions\/9567"}],"wp:attachment":[{"href":"https:\/\/nsbi.org.rs\/sr\/wp-json\/wp\/v2\/media?parent=7129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}