Mobile optimizacija in ostale spremembe

cene-in-reference/index.html

@@ -124,7 +124,7 @@
             <div class="rates-hero-container">
                 <div class="rates-hero-text" data-aos="fade-up">
                     <span class="rates-hero-kicker">Cene in reference</span>
-                    <h1>C E N O V N I K</h1>
+                    <h1>C E N I K</h1>
                     <p class="rates-hero-lead">Cene za učno uro tečaja ali inštrukcij</p>
                 </div>
                 <div class="rates-hero-card" data-aos="fade-left" data-aos-delay="120">
@@ -132,10 +132,12 @@
                     <ul class="rates-hero-list">
                         <li>
                             <strong>30 €</strong>
+                            <span class="rates-hero-separator">&ndash;</span>
                             <span>30 min</span>
                         </li>
                         <li>
                             <strong>50 €</strong>
+                            <span class="rates-hero-separator">&ndash;</span>
                             <span>60 min</span>
                         </li>
                     </ul>

delavnice/index.html

@@ -124,7 +124,7 @@
             <div class="workshop-directory-hero-content" data-aos="fade-up">
                 <span class="workshop-directory-kicker">Pregled delavnic</span>
                 <h1>Skupaj gradimo podporno okolje</h1>
-                <p>Izberi delavnico, ki najbolje odgovarja potrebam tvoje šole ali vrtca, in spoznaj, kako lahko s strokovno pripravljeno vsebino okrepiš vključevanje priseljencev, sodelovanje s starši ter strokovno rast ekipe.</p>
+                <p>Izberite delavnico, ki najbolje ustreza vaši šoli ali vrtcu, in odkrijte, kako lahko z našo strokovno pripravljeno vsebino izboljšate vključevanje priseljencev, sodelovanje s starši ter strokovni razvoj ekipe.</p>
             </div>
             <div class="workshop-directory-shape shape-a"></div>
             <div class="workshop-directory-shape shape-b"></div>

index.html

@@ -180,7 +180,7 @@
                 <img src="assets/images/amra2.png" alt="Amra Kurešepi Zulji" loading="lazy">
             </div>
             <div class="about-amra-content">
-                <p>Sem tu za vas, Amra - mama, žena, raziskovalka jezikov in kultur ter vaša zvesta sopotnica na razburljivi poti učenja in odkrivanja novih svetov.</p>
+                <p>Sem Amra – mama, žena, raziskovalka jezikov in kultur ter vaša zvesta sopotnica na zanimivi poti učenja in odkrivanja novih svetov.</p>
                 <p>Kot profesorica angleščine in medkulturna posrednica vam pomagam usvajati angleščino (in druge jezike), odpirati vrata razumevanju ter ustvarjati priložnosti, da se v vsakem okolju počutite domače in samozavestno. Skupaj bomo rasli, se smejali in sijali v svetu novih možnosti!</p>
                 <a href="/kdo-sem/" class="cta-button-alt">MOJA ZGODBA</a>
             </div>
@@ -195,7 +195,7 @@
                 <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                 <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
             </div>
-            <p>Skupaj definirajva tvoje potrebe in možnosti sodelovanja.</p>
+            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
         </div>
     </section>
 

js/main.js

@@ -228,20 +228,32 @@ document.addEventListener('DOMContentLoaded', function() {
     const accordions = document.querySelectorAll('.accordion-toggle');
     accordions.forEach(accordion => {
         accordion.addEventListener('click', function() {
-            this.classList.toggle('active');
+            const accordionItem = this.closest('.mediation-accordion-item');
-            const content = this.nextElementSibling;
+            const content = accordionItem ? accordionItem.querySelector('.accordion-content') : null;
 
-            if (content.style.maxHeight) {
+            if (!content) {
-                // Če je odprto, zapri
+                return;
-                content.style.maxHeight = null;
+            }
-                this.textContent = 'Več';
+
-            } else {
+            this.classList.toggle('active');
-                // Če je zaprto, odpri
+            const isOpen = this.classList.contains('active');
+            this.setAttribute('aria-expanded', String(isOpen));
+            content.setAttribute('aria-hidden', String(!isOpen));
+
+            if (isOpen) {
                 content.style.maxHeight = content.scrollHeight + "px";
                 this.textContent = 'Manj';
+            } else {
+                content.style.maxHeight = null;
+                this.textContent = 'Več';
             }
         });
         accordion.textContent = 'Več';
+        accordion.setAttribute('aria-expanded', 'false');
+        const initialContent = accordion.closest('.mediation-accordion-item')?.querySelector('.accordion-content');
+        if (initialContent) {
+            initialContent.setAttribute('aria-hidden', 'true');
+        }
     });
 
     // --- Header Scroll Effect ---

kdo-sem/index.html

@@ -127,7 +127,7 @@
                 <div class="about-hero-text" data-aos="fade-up">
                     <span class="about-hero-kicker">O meni</span>
                     <h1>Povezanost z jeziki, ljudmi in zgodbami</h1>
-                    <p>Od nekdaj sem imela rada jezike, ljudi in zgodbe. Z jeziki sem povezana že od malih nog, saj sem odraščala v večjezičnem okolju, kjer sem naravno prehajala med jeziki in kulturami. Svojo poklicno pot sem začela z osnovnim študijem angleškega jezika in književnosti na Univerzi v Prištini. Nadaljevala sem na Filozofski fakulteti v Ljubljani, kjer sem opravila magistrski študij angleščine. Že med študijem sem začela poučevati – najprej prostovoljno, pozneje tudi poklicno. Poučevala sem otroke, mladostnike in odrasle, tako v skupinah kot individualno, kar mi je dalo prilagodljivost, potrpežljivost in občutek za različne potrebe učencev. Takrat sem začela zares verjeti, da lahko s tem delom pomagam ljudem in obenem rastem tudi sama. Kasneje sem se izobraževala za medkulturno mediatorko, da bi še bolje podpirala ljudi pri vključevanju v novo okolje.</p>
+                    <p>Od nekdaj sem imela rada jezike, ljudi in zgodbe. Življenje v večjezičnem okolju me je naučilo naravno prehajati med jeziki in kulturami. Svojo poklicno pot sem začela z osnovnim študijem angleškega jezika in književnosti na Univerzi v Prištini. Nadaljevala sem na Filozofski fakulteti v Ljubljani, kjer sem opravila magistrski študij angleščine. Že med študijem sem začela poučevati – najprej prostovoljno, pozneje tudi poklicno. Poučevala sem otroke, mladostnike in odrasle, tako v skupinah kot individualno, kar mi je dalo prilagodljivost, potrpežljivost in občutek za različne potrebe učencev. Takrat sem začela zares verjeti, da lahko s tem delom pomagam ljudem in obenem rastem tudi sama. Kasneje sem se izobraževala za medkulturno mediatorko, da bi še bolje podpirala ljudi pri vključevanju v novo okolje.</p>
                 </div>
                 <div class="about-hero-image" data-aos="fade-left" data-aos-delay="150">
                     <div class="image-frame">

pogosta-vprasanja/index.html

@@ -119,18 +119,40 @@
         </nav>
     </header>
     <main>
-        <section class="contact-faq-section">
+        <section class="faq-hero">
-            <div class="contact-faq-container">
+            <div class="faq-hero-container">
-                <div class="faq-header" data-aos="fade-up">
+                <div class="faq-hero-text" data-aos="fade-up">
-                    <h2>Pogosta vprašanja</h2>
+                    <span class="faq-hero-kicker">Vprašanja in odgovori</span>
-                    <p class="faq-intro">Zanima vas, kako potekajo naši postopki in storitve? Tukaj smo zbrali odgovore na vprašanja, ki jih največkrat prejmemo.</p>
+                    <h1>Pogosta vprašanja</h1>
+                    <p class="faq-hero-lead">Zanima vas, kako potekajo naši postopki in storitve? Spodaj smo zbrali odgovore na vprašanja, ki jih največkrat prejmemo.</p>
                 </div>
-                <div class="faq-list" data-aos="fade-up" data-aos-delay="100">
+                <div class="faq-hero-card" data-aos="fade-left" data-aos-delay="120">
-                    <div class="faq-item">
+                    <h3>Potrebujete dodatna pojasnila?</h3>
-                        <h4 class="faq-question">1. V katerih situacijah je medkulturno posredovanje v pomoč?</h4>
+                    <p>Če med vprašanji ne najdete odgovora, mi pišite ali me pokličite. Vesela bom vašega sporočila.</p>
+                    <div class="faq-hero-contact">
+                        <a href="mailto:info@prosberry.si">info@prosberry.si</a>
+                        <a href="tel:+38630312855">+386 30 312 855</a>
+                    </div>
+                </div>
+            </div>
+            <div class="faq-hero-shape shape-a"></div>
+            <div class="faq-hero-shape shape-b"></div>
+            <div class="faq-hero-shape shape-c"></div>
+        </section>
+
+        <section class="faq-accordion" id="vprasanja">
+            <div class="faq-accordion-container">
+                <div class="faq-accordion-header" data-aos="fade-up">
+                    <h2>Odgovori na vaša vprašanja</h2>
+                </div>
+                <div class="faq-accordion-list" data-aos="fade-up" data-aos-delay="100">
+                    <article class="faq-item">
+                        <button class="faq-question" type="button" aria-expanded="false">
+                            <span>1. V katerih situacijah je medkulturno posredovanje v pomoč?</span>
+                        </button>
                         <div class="faq-answer">
                             <ul>
-                                <li>– Pri razumevanju šolskih obvestil in navodil</li>
+                                <li>– Pri razumevanju šolskih obvestil, navodil in uradnih postopkov</li>
                                 <li>– Pri vključevanju otroka v učni proces</li>
                                 <li>– Ob pojavu nesporazumov zaradi jezikovnih ali kulturnih razlik</li>
                                 <li>– Pri prehodu iz vrtca v šolo ali med različnimi šolskimi programi</li>
@@ -140,70 +162,90 @@
                                 <li>– Pri usklajevanju pričakovanj med šolo in družino (npr. domače naloge, pravila, roki)</li>
                             </ul>
                         </div>
-                    </div>
+                    </article>
-                    <div class="faq-item">
+
-                        <h4 class="faq-question">2. Kdaj izbrati medkulturno posredovanje ali delavnico?</h4>
+                    <article class="faq-item">
+                        <button class="faq-question" type="button" aria-expanded="false">
+                            <span>2. Kdaj izbrati medkulturno posredovanje ali delavnico?</span>
+                        </button>
                         <div class="faq-answer">
                             <p>Medkulturno posredovanje je primerno, kadar je potreben dinamičen pogovor med ljudmi v različnih institucijah – šolah, vrtcih, zdravstvenih ustanovah in drugih organizacijah. Posredovalec ves čas prevaja, razlaga in svetuje, kadar zazna, da katera stran ne razume, ter pomaga razjasniti mnenja, pričakovanja, pobude in omejitve. Gre za aktivno podporo, prilagojeno situaciji in potrebam udeležencev.</p>
                             <p>Delavnice so strukturirane, ciljane seje, ki sledijo vnaprej določenim ciljem in vsebini, kot je opisano za posamezno delavnico. Posredovalec vodi delavnico po pripravljeni strukturi ter zagotavlja informacije, praktične nasvete in izobraževalne aktivnosti za konkretno ciljno skupino – učence, starše, starše otrok v vrtcu ali zaposlene.</p>
                             <p>Vse naše dejavnosti prispevajo k boljšemu vključevanju priseljencev in razumevanju medkulturnih razlik – izberite tisto, kar najbolje ustreza vašim potrebam.</p>
                         </div>
-                    </div>
+                    </article>
-                    <div class="faq-item">
+
-                        <h4 class="faq-question">3. Kdaj izbrati individualno in kdaj skupinsko medkulturno posredovanje?</h4>
+                    <article class="faq-item">
+                        <button class="faq-question" type="button" aria-expanded="false">
+                            <span>3. Kdaj izbrati individualno in kdaj skupinsko medkulturno posredovanje?</span>
+                        </button>
                         <div class="faq-answer">
-                            <p>Individualno medkulturno posredovanje je primerno, kadar kader v instituciji (npr. razrednik in/ali svetovalni delavec) vodi sestanek s posameznimi starši ali družino. Posredovalec prevaja, razlaga in svetuje neposredno med udeleženci, kar omogoča poglobljeno razumevanje, reševanje specifičnih vprašanj in prilagojeno podporo posameznim potrebam.</p>
+                            <p>Individualno medkulturno posredovanje je primerno, kadar strokovni kader v instituciji (npr. razrednik ali svetovalni delavec) vodi sestanek s posameznimi starši ali z družino. Posredovalec prevaja, razlaga in svetuje neposredno med udeleženci, kar omogoča poglobljeno razumevanje, reševanje specifičnih vprašanj ter prilagojeno podporo posameznim potrebam.</p>
-                            <p>Skupinsko medkulturno posredovanje je primerno za večje skupine udeležencev, npr. na roditeljskih sestankih ali srečanjih več staršev priseljencev, kjer udeleženci ne razumejo jezika ali delovanja institucije. Posredovalec zagotavlja prevod in pojasnila za vse udeležence, da se vsi lahko aktivno vključijo, razumejo informacije in sodelujejo pri pogovoru.</p>
+                            <p>Skupinsko medkulturno posredovanje je primerno za večje skupine udeležencev, npr. na roditeljskih sestankih ali srečanjih več staršev priseljencev, kadar udeleženci ne razumejo jezika ali delovanja institucije. Posredovalec zagotavlja prevod in pojasnila za vse prisotne, da se lahko vsi aktivno vključijo, razumejo informacije in sodelujejo v pogovoru.</p>
                         </div>
-                    </div>
+                    </article>
-                    <div class="faq-item">
+
-                        <h4 class="faq-question">4. Ali delavnice potekajo tudi v jezikih, ki jih ne obvladate sami?</h4>
+                    <article class="faq-item">
+                        <button class="faq-question" type="button" aria-expanded="false">
+                            <span>4. Ali delavnice potekajo tudi v jezikih, ki jih ne obvladate sami?</span>
+                        </button>
                         <div class="faq-answer">
                             <p>Da, delavnice lahko potekajo tudi v drugih jezikih, npr. ruščini, francoščini ali drugih jezikih. Če zahtevanega jezika osebno ne obvladam, delavnica poteka z dodatno pomočjo prevajalca, ki zagotovi, da so vse informacije razumljive udeležencem.</p>
-                            <p>Zaradi stroškov prevajalca je v tem pri<li>–u doplačilo 50 €, kar pokriva njegovo delo.</p>
+                            <p>Zaradi stroškov prevajalca je v tem primeru doplačilo 50 €, kar pokriva njegovo delo.</p>
                         </div>
-                    </div>
+                    </article>
-                    <div class="faq-item">
+
-                        <h4 class="faq-question">5. Ali delujete le v vzgojno-izobraževalnih ustanovah ali tudi drugje?</h4>
+                    <article class="faq-item">
+                        <button class="faq-question" type="button" aria-expanded="false">
+                            <span>5. Ali delujete le v vzgojno-izobraževalnih ustanovah ali tudi drugje?</span>
+                        </button>
                         <div class="faq-answer">
                             <p>Primarno delujem v vzgojno-izobraževalnih ustanovah, saj sem po poklicu profesorica in so mi te institucije najbolj domače, kjer lahko ponudim največjo strokovno podporo.</p>
-                            <p>V drugih institucijah lahko delujem kot prevajalka ali medkulturna posrednica, le v pri<li>–u, da si lahko sama zagotovim razlago ozadja (npr. iz dostopnih virov). Če to ni mogoče, mora institucija posredovati potrebne informacije, da lahko delo poteka kakovostno in pravilno.</p>
+                            <p>V drugih institucijah lahko delujem kot prevajalka ali medkulturna posrednica, le v primeru, da si lahko sama zagotovim razlago ozadja (npr. iz dostopnih virov). Če to ni mogoče, mora institucija posredovati potrebne informacije, da lahko delo poteka kakovostno in pravilno.</p>
                         </div>
-                    </div>
+                    </article>
-                    <div class="faq-item">
+
-                        <h4 class="faq-question">6. Kdaj izbrati 30-minutno in kdaj 60-minutno medkulturno posredovanje?</h4>
+                    <article class="faq-item">
+                        <button class="faq-question" type="button" aria-expanded="false">
+                            <span>6. Kdaj izbrati 30-minutno in kdaj 60-minutno medkulturno posredovanje?</span>
+                        </button>
                         <div class="faq-answer">
-                            <p>30-minutno medkulturno posredovanje je primerno za krajše pogovore, hitre pojasnitve ali podporo pri posameznih vprašanjih, kjer ni predvideno poglobljeno razpravljanje.</p>
+                            <p>Medkulturno posredovanje, ki traja 30 minut, je primerno za krajše pogovore, hitre pojasnitve ali podporo pri posameznih vprašanjih, kjer ni predvideno poglobljeno razpravljanje.</p>
-                            <p>60-minutno posredovanje je priporočljivo za daljše ali bolj kompleksne pogovore, obravnavo več tem, razjasnjevanje nesporazumov ali občutljive vsebine. Daljša seja omogoča dovolj časa, da vsi udeleženci razumejo informacije, izrazijo svoje mnenje in dosežejo skupno razumevanje.</p>
+                            <p>Medkulturno posredovanje, ki traja 60 minut, je priporočljivo za daljše ali bolj kompleksne pogovore, obravnavo več tem, razjasnjevanje nesporazumov ali občutljive vsebine. Daljša seja omogoča dovolj časa, da vsi udeleženci razumejo informacije, izrazijo svoje mnenje in dosežejo skupno razumevanje.</p>
                         </div>
-                    </div>
+                    </article>
-                    <div class="faq-item">
+
-                        <h4 class="faq-question">7. Kaj šole in vrtci pridobijo z medkulturnim posredovanjem in/ali delavnicami?</h4>
+                    <article class="faq-item">
+                        <button class="faq-question" type="button" aria-expanded="false">
+                            <span>7. Kaj šole in vrtci pridobijo z medkulturnim posredovanjem in/ali delavnicami?</span>
+                        </button>
                         <div class="faq-answer">
                             <ul>
-                                <li>– Olajšana komunikacija s starši in učenci</li>
+                                <li>– Olajšano komunikacijo s starši in učenci</li>
                                 <li>– Večje zaupanje med družinami in šolskim osebjem</li>
-                                <li>– Boljše razumevanje otrokovega kulturnega in jezikovnega ozadja</li>
+                                <li>– Boljše razumevanje kulturnega in jezikovnega ozadja otrok</li>
-                                <li>– Preprečevanje nesporazumov in krepitev sodelovanja</li>
+                                <li>– Preprečevanje nesporazumov in konfliktov v razredu</li>
-                                <li>– Podpora učiteljem in osebju pri razumevanju kulturnih razlik</li>
+                                <li>– Večjo podporo učiteljem pri razumevanju kulturnih razlik</li>
                                 <li>– Lažje vključevanje novih otrok in družin v učni proces</li>
-                                <li>– Večja vključenost staršev v šolske dejavnosti</li>
+                                <li>– Večjo vključenost staršev v šolske dejavnosti</li>
-                                <li>– Prepoznavanje in reševanje morebitnih kulturnih neskladij v razredu</li>
                                 <li>– Spodbujanje medkulturnega razumevanja med učenci</li>
                             </ul>
                         </div>
-                    </div>
+                    </article>
-                    <div class="faq-item">
+
-                        <h4 class="faq-question">8. Kako poteka sodelovanje?</h4>
+                    <article class="faq-item">
+                        <button class="faq-question" type="button" aria-expanded="false">
+                            <span>8. Kako poteka sodelovanje?</span>
+                        </button>
                         <div class="faq-answer">
-                           <ul>
+                            <ul>
-                                <li>– V pogovoru po telefonu ali e-pošti se dogovorimo za vrsto sodelovanja in termin</li>
+                                <li>– V pogovoru po telefonu ali po e-pošti se skupaj dogovorimo za vrsto sodelovanja in ustrezen termin.</li>
-                                <li>– Stranka naroči storitev; če gre za ustanovo, pošlje naročilnico</li>
+                                <li>– Stranka naroči storitev; če gre za ustanovo, lahko pošlje tudi naročilnico.</li>
-                                <li>– Izdam račun, ki se poravna v dogovorjenem obdobju</li>
+                                <li>– Izdam račun, ki ga stranka poravna v dogovorjenem roku.</li>
-                                <li>– Sodelovanje poteka z zaupanjem in podporo, da izboljšamo komunikacijo ter razumevanje</li>
+                                <li>– Sodelovanje poteka z zaupanjem in podporo, da izboljšamo komunikacijo ter razumevanje.</li>
                            </ul>
                         </div>
-                    </div>
+                    </article>
                 </div>
             </div>
         </section>
@@ -225,36 +267,49 @@
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const faqItems = document.querySelectorAll('.faq-item');
+
             faqItems.forEach(item => {
-                const question = item.querySelector('.faq-question');
+                const button = item.querySelector('.faq-question');
                 const answer = item.querySelector('.faq-answer');
 
-                if (question && answer) {
+                if (!button || !answer) {
-                    question.addEventListener('click', () => {
+                    return;
-                        const isActive = item.classList.contains('active');
+                }
 
-                        faqItems.forEach(otherItem => {
+                button.setAttribute('aria-expanded', 'false');
-                            if (otherItem !== item) {
+                answer.style.maxHeight = null;
-                                const otherAnswer = otherItem.querySelector('.faq-answer');
-                                if (otherAnswer) {
-                                    otherAnswer.style.maxHeight = null;
-                                }
-                                otherItem.classList.remove('active');
-                            }
-                        });
 
-                        if (isActive) {
+                button.addEventListener('click', () => {
-                            answer.style.maxHeight = null;
+                    const isActive = item.classList.contains('active');
-                            item.classList.remove('active');
+
+                    faqItems.forEach(otherItem => {
+                        if (otherItem === item) {
                             return;
                         }
-
+                        otherItem.classList.remove('active');
-                        item.classList.add('active');
+                        const otherButton = otherItem.querySelector('.faq-question');
-                        requestAnimationFrame(() => {
+                        const otherAnswer = otherItem.querySelector('.faq-answer');
-                            answer.style.maxHeight = answer.scrollHeight + 'px';
+                        if (otherButton) {
-                        });
+                            otherButton.setAttribute('aria-expanded', 'false');
+                        }
+                        if (otherAnswer) {
+                            otherAnswer.style.maxHeight = null;
+                        }
                     });
-                }
+
+                    if (isActive) {
+                        item.classList.remove('active');
+                        button.setAttribute('aria-expanded', 'false');
+                        answer.style.maxHeight = null;
+                        return;
+                    }
+
+                    item.classList.add('active');
+                    button.setAttribute('aria-expanded', 'true');
+                    requestAnimationFrame(() => {
+                        answer.style.maxHeight = answer.scrollHeight + 'px';
+                    });
+                });
             });
         });
     </script>

skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/index.html

@@ -144,7 +144,7 @@
                         <div class="workshop-section">
                             <h4>Cilji delavnice</h4>
                             <ul>
-                                <li>Povečati kulturno občutljivost in kulturno inteligenco učiteljev.</li>
+                                <li>Krepiti kulturno občutljivost in kulturno inteligenco učiteljev.</li>
                                 <li>Predstaviti učinkovite strategije za motivacijo učencev, ki še ne govorijo tekoče jezika pouka.</li>
                                 <li>Izmenjava dobrih praks in skupinsko reševanje konkretnih primerov iz prakse.</li>
                                 <li>Poudariti pomen osebne zgodbe kot mostu do razumevanja in vključevanja.</li>

skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html

@@ -122,81 +122,122 @@
 
 
     <main>
-        <section class="page-hero">
+        <section class="mediation-hero">
-            <h1 data-aos="fade-up">Medkulturno posredovanje</h1>
+            <div class="mediation-hero-container">
+                <div class="mediation-hero-text" data-aos="fade-up">
+                    <span class="mediation-hero-kicker">Skupaj za vključevanje</span>
+                    <h1>Medkulturno posredovanje</h1>
+                    <p class="mediation-hero-lead">Potek medkulturnega posredovanja se prilagodi potrebam posameznega primera.</p>
+                </div>
+                <div class="mediation-hero-card" data-aos="fade-left" data-aos-delay="120">
+                    <h3>Raziskujte področja</h3>
+                    <ul>
+                        <li><a href="#individualno">Individualno posredovanje</a></li>
+                        <li><a href="#skupinsko">Skupinsko posredovanje</a></li>
+                        <li><a href="#potek">Potek sodelovanja</a></li>
+                        <li><a href="#oblike">Oblike glede na namen</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="mediation-hero-shape shape-a"></div>
+            <div class="mediation-hero-shape shape-b"></div>
+            <div class="mediation-hero-shape shape-c"></div>
         </section>
 
-        <section class="content-section">
+        <section id="individualno" class="mediation-detail">
-            <div class="container">
+            <div class="mediation-detail-container">
-                
+                <div class="mediation-detail-image" data-aos="fade-up">
-                <div id="individualno" class="mediation-section" data-aos="fade-up">
+                    <picture>
-                    <h2>INDIVIDUALNO</h2>
+                        <source srcset="/assets/images/individualno.jpeg" type="image/jpeg">
-                    <div class="mediation-content">
+                        <img src="/assets/images/individualno.jpeg" alt="Individualno medkulturno posredovanje">
-                        <p>V individualnem medkulturnem posredovanju se rešuje en konkreten primer, kjer je v ospredju razumevanje med posameznikom (ali manjšim številom oseb) in drugo stranjo. Čeprav je lahko vpletenih več oseb, gre še vedno za posamičen primer, kjer medkulturni posredovalec pomaga razumeti razlike, ki vplivajo na odnos ali spor.</p>
+                    </picture>
-                        <p><strong>Primer:</strong> Šola ima nesporazum s starši učenca, ki prihajajo iz drugega kulturnega okolja – medkulturni posrednik posreduje med obema stranema, da dosežejo razumevanje in rešitev.</p>
-                    </div>
                 </div>
-
+                <div class="mediation-detail-text" data-aos="fade-up" data-aos-delay="120">
-                <div id="skupinsko" class="mediation-section" data-aos="fade-up">
+                    <h2>Individualno</h2>
-                    <h2>SKUPINSKO</h2>
+                    <p>V individualnem medkulturnem posredovanju se rešuje en konkreten primer, kjer je v ospredju razumevanje med posameznikom (ali manjšim številom oseb) in drugo stranjo. Čeprav je lahko vpletenih več oseb, gre še vedno za posamičen primer, kjer medkulturni posredovalec pomaga razumeti razlike, ki vplivajo na odnos ali spor.</p>
-                    <div class="mediation-content">
+                    <p><strong>Primer:</strong> Šola ima nesporazum s starši učenca, ki prihajajo iz drugega kulturnega okolja – medkulturni posrednik posreduje med obema stranema, da dosežejo razumevanje in rešitev.</p>
-                        <p>V skupinskem medkulturnem posredovanju pa gre za razumevanje med dvema skupinama, kjer je cilj širše ozaveščanje in gradnja odnosov, ki koristijo večjemu številu ljudi. Vključuje dve ali več skupin, pri čemer je poudarek na razumevanju kulturnih razlik med skupinami in izboljšanju skupinske dinamike. Vsaka skupina je sestavljena iz več posameznikov, ki bodo imeli koristi od večjega medkulturnega razumevanja.</p>
-                        <p><strong>Primer:</strong> V šoli se pojavljajo nesporazumi med učitelji in starši priseljencev. Organizirajo skupno medkulturno posredovanje, kjer medkulturni posredovalec vodi pogovor, predstavi pričakovanja in izzive ter pomaga izboljšati razumevanje, komunikacijo in sodelovanje v korist otrok.</p>
-                    </div>
                 </div>
+            </div>
+        </section>
 
-                <div id="potek" class="mediation-section" data-aos="fade-up">
+        <section id="skupinsko" class="mediation-detail mediation-detail--reverse">
-                    <h2>POTEK</h2>
+            <div class="mediation-detail-container">
-                    <div class="mediation-content">
+                <div class="mediation-detail-text" data-aos="fade-up">
-                        <p>Potek medkulturnega posredovanja se prilagodi potrebam posameznega primera. Pred začetkom srečanja se običajno določi oblika medkulturnega posredovanja in opredelijo cilji, na podlagi katerih se usmerja potek pogovora, kar prispeva k učinkovitemu doseganju skupnega razumevanja.</p>
+                    <h2>Skupinsko</h2>
-                        <p>Pri nesporazumih ali konfliktih medkulturni posrednik običajno najprej opravi ločene pogovore z vsako stranjo. V primerih, ko gre za razlago dokumentov ali jezikovne ovire, pa se posredovanje lahko izvede neposredno med skupnim srečanjem. Medkulturni posrednik nevtralno usmerja pogovor, osvetli nejasnosti in pomaga pri medsebojnem razumevanju.</p>
+                    <p>V skupinskem medkulturnem posredovanju pa gre za razumevanje med dvema skupinama, kjer je cilj širše ozaveščanje in gradnja odnosov, ki koristijo večjemu številu ljudi. Vključuje dve ali več skupin, pri čemer je poudarek na razumevanju kulturnih razlik med skupinami in izboljšanju skupinske dinamike. Vsaka skupina je sestavljena iz več posameznikov, ki bodo imeli koristi od večjega medkulturnega razumevanja.</p>
-                    </div>
+                    <p><strong>Primer:</strong> V šoli se pojavljajo nesporazumi med učitelji in starši priseljencev. Organizirajo skupno medkulturno posredovanje, kjer medkulturni posredovalec vodi pogovor, predstavi pričakovanja in izzive ter pomaga izboljšati razumevanje, komunikacijo in sodelovanje v korist otrok.</p>
                 </div>
+                <div class="mediation-detail-image" data-aos="fade-up" data-aos-delay="120">
+                    <picture>
+                        <source srcset="/assets/images/skupinsko.jpeg" type="image/jpeg">
+                        <img src="/assets/images/skupinsko.jpeg" alt="Skupinsko medkulturno posredovanje">
+                    </picture>
+                </div>
+            </div>
+        </section>
 
-                <div id="oblike" class="mediation-section" data-aos="fade-up">
+        <section id="potek" class="mediation-process">
-                    <h2>OBLIKE GLEDE NA NAMEN</h2>
+            <div class="mediation-process-container" data-aos="fade-up">
-                    <div class="mediation-content">
+                <h2>Potek</h2>
-                        <div>
+                <div class="mediation-process-content">
-                            <h3>1. Pomoč pri razlagi načrtov in dokumentov</h3>
+                    <p>Potek medkulturnega posredovanja se prilagodi potrebam posameznega primera. Pred začetkom srečanja se običajno določi oblika medkulturnega posredovanja in opredelijo cilji, na podlagi katerih se usmerja potek pogovora, kar prispeva k učinkovitemu doseganju skupnega razumevanja.</p>
-                            <button class="accordion-toggle">Več</button>
+                    <p>Pri nesporazumih ali konfliktih medkulturni posrednik običajno najprej opravi ločene pogovore z vsako stranjo. V primerih, ko gre za razlago dokumentov ali jezikovne ovire, pa se posredovanje lahko izvede neposredno med skupnim srečanjem. Medkulturni posrednik nevtralno usmerja pogovor, osvetli nejasnosti in pomaga pri medsebojnem razumevanju.</p>
-                            <div class="accordion-content">
+                </div>
-                                <p>V to kategorijo vključimo vse primere, kjer medkulturni posrednik pojasnjuje vsebinske pomene dokumentov ali načrtov posameznikom ter hkrati posreduje informacije obema stranema:</p>
+            </div>
-                                <ul>
+        </section>
-                                    <li>individualni vzgojni načrti, šolska pravila, zdravniške odločbe;</li>
+
-                                    <li>kulturno posredovanje in razlaga zahtev, pričakovanj institucij;</li>
+        <section id="oblike" class="mediation-accordion">
-                                    <li>podpora pri razumevanju postopkov in pravic.</li>
+            <div class="mediation-accordion-container">
-                                </ul>
+                <div class="mediation-accordion-header" data-aos="fade-up">
-                            </div>
+                    <h2>Oblike glede na namen</h2>
+                    <p>Vključujejo različne pristope, skozi katere medkulturni posrednik podpira razumevanje, sodelovanje in preprečevanje nesporazumov.</p>
+                </div>
+                <div class="mediation-accordion-grid">
+                    <article class="mediation-accordion-item" data-aos="fade-up">
+                        <div class="mediation-accordion-title">
+                            <h3>Pomoč pri razlagi načrtov in dokumentov</h3>
+                            <button class="accordion-toggle" type="button">Več</button>
                         </div>
-
+                        <div class="accordion-content">
-                        <div style="margin-top: 2rem;">
+                            <p>V to kategorijo vključimo vse primere, kjer medkulturni posrednik pojasnjuje vsebinske pomene dokumentov ali načrtov posameznikom ter hkrati posreduje informacije obema stranema:</p>
-                            <h3>2. Reševanje nesporazumov ali napetosti</h3>
+                            <ul>
-                            <button class="accordion-toggle">Več</button>
+                                <li>individualni vzgojni načrti, šolska pravila, zdravniške odločbe;</li>
-                            <div class="accordion-content">
+                                <li>kulturno posredovanje in razlaga zahtev, pričakovanj institucij;</li>
-                                <p>Ta del vključuje vse primere, kjer pride do napetosti, konfliktov ali nesoglasij med posamezniki in institucijo ali strokovnjakom:</p>
+                                <li>podpora pri razumevanju postopkov in pravic.</li>
-                                <ul>
+                            </ul>
-                                    <li>razreševanje konfliktov zaradi različnih pričakovanj in kulturnih vrednot;</li>
-                                    <li>posredovanje med staršem in vzgojiteljico, zdravnikom, svetovalnim delavcem ipd.;</li>
-                                    <li>omogočanje varnega prostora za izražanje skrbi in iskanje razumevanja.</li>
-                                </ul>
-                            </div>
                         </div>
+                    </article>
 
-                        <div style="margin-top: 2rem;">
+                    <article class="mediation-accordion-item" data-aos="fade-up" data-aos-delay="100">
-                            <h3>3. Svetovalno medkulturno posredovanje za lažje vključevanje</h3>
+                        <div class="mediation-accordion-title">
-                            <button class="accordion-toggle">Več</button>
+                            <h3>Reševanje nesporazumov ali napetosti</h3>
-                            <div class="accordion-content">
+                            <button class="accordion-toggle" type="button">Več</button>
-                                <p>V to kategorijo spadajo primeri, kjer medkulturni posrednik deluje predvsem preventivno, brez prisotnosti spora:</p>
-                                <ul>
-                                    <li>gradnja razumevanja in sodelovanja med posamezniki in institucijo;</li>
-                                    <li>predstavitev pričakovanj, vrednot in kulturnih razlik pred začetkom sodelovanja;</li>
-                                    <li>podpora pri preprečevanju nesporazumov.</li>
-                                </ul>
-                            </div>
                         </div>
-                    </div>
+                        <div class="accordion-content">
+                            <p>Ta del vključuje vse primere, kjer pride do napetosti, konfliktov ali nesoglasij med posamezniki in institucijo ali strokovnjakom:</p>
+                            <ul>
+                                <li>razreševanje konfliktov zaradi različnih pričakovanj in kulturnih vrednot;</li>
+                                <li>posredovanje med staršem in vzgojiteljico, zdravnikom, svetovalnim delavcem ipd.;</li>
+                                <li>omogočanje varnega prostora za izražanje skrbi in iskanje razumevanja.</li>
+                            </ul>
+                        </div>
+                    </article>
+
+                    <article class="mediation-accordion-item" data-aos="fade-up" data-aos-delay="200">
+                        <div class="mediation-accordion-title">
+                            <h3>Svetovalno medkulturno posredovanje za lažje vključevanje</h3>
+                            <button class="accordion-toggle" type="button">Več</button>
+                        </div>
+                        <div class="accordion-content">
+                            <p>V to kategorijo spadajo primeri, kjer medkulturni posrednik deluje predvsem preventivno, brez prisotnosti spora:</p>
+                            <ul>
+                                <li>gradnja razumevanja in sodelovanja med posamezniki in institucijo;</li>
+                                <li>predstavitev pričakovanj, vrednot in kulturnih razlik pred začetkom sodelovanja;</li>
+                                <li>podpora pri preprečevanju nesporazumov.</li>
+                            </ul>
+                        </div>
+                    </article>
                 </div>
-
             </div>
         </section>
     </main>