UI/UX improvements: unified logo size, mobile optimizations, grid layout restructure

- Fixed logo size inconsistency across devices (unified to 44px)
- Restructured homepage hero section with grid-template-areas for better layout control
- Desktop: 3-column layout (welcome | image | sidebar) with recommendation box under image
- Mobile: optimized order (image -> welcome -> recommendations -> info -> sidebar)
- Added mobile text alignment optimizations (center for h1, left for descriptions)
- Updated Medkulturno posredovanje page with justified text on mobile
- Fixed Ponudba page free consultation notice alignment on mobile
- Moved recommendation box to align with hero section bottom
- Changed 'Svetovalno / preventivno' to 'Svetovalno medkulturno posredovanje'
- Fixed star icon alignment in 'Zakaj izbrati Prosberry' section

css/style.css

@@ -336,11 +336,9 @@ footer {
     justify-content: center;
   }
 
-  /* Logotip se manjša skupaj z menijem */
+  /* Logotip - fiksna velikost za konsistentnost */
   .logo img {
-    height: 3.5vw;
+    height: 44px;
-    max-height: 50px;
-    min-height: 25px;
   }
 
   .nav-links {
@@ -578,7 +576,7 @@ footer {
   }
 
   .logo img {
-    height: calc(50px + 2rem - 10px);
+    height: 44px;
     width: auto;
     margin: 0 10px 0 0;
     display: block
@@ -5320,34 +5318,66 @@ footer {
   position: relative
 }
 
+/* --- DESKTOP POSTAVITEV --- */
 .hero-new-content {
-  max-width: 1200px;
+  display: grid !important;
-  margin: 0 auto;
+  grid-template-columns: 1.2fr 0.8fr 280px;
-  width: 100%;
+  grid-template-areas: 
-  display: grid;
+    "welcome image sidebar"
-  grid-template-columns: 1fr 1fr;
+    "zakaj branje sidebar";
   gap: 2rem;
-  align-items: stretch;
+  align-items: start;
-  min-height: auto;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 50px;
   z-index: 2;
-  padding: 0 55px;
 }
 
-.hero-new-text {
+/* Razporeditev elementov v mrežo */
-  align-self: stretch;
+.hero-welcome-area { 
-  display: flex;
+  grid-area: welcome;
-  flex-direction: column;
-  gap: 1.5rem;
-  height: auto;
   padding-top: 48px;
-  padding-bottom: 0
+}
+
+.hero-new-image { 
+  grid-area: image;
+}
+
+.workshops-sidebar-inline { 
+  grid-area: sidebar;
+}
+
+.hero-info-box { 
+  grid-area: zakaj;
+  margin-top: 1rem;
+}
+
+.recommendation-box-home { 
+  grid-area: branje;
+  margin-top: 1rem;
+  align-self: end;
+  width: 100%;
+}
+
+#hero-welcome {
+  text-align: left;
+  font-size: 2.2rem;
+  margin-bottom: 1.5rem;
+}
+
+.hero-cta-box-inline {
+  background: rgba(251, 99, 57, 0.08);
+  padding: 0.75rem 1rem;
+  border-radius: 10px;
+  margin: 1rem 0;
+  border-left: 4px solid var(--primary-color);
 }
 
 .hero-new-text h1 {
   font-size: 2.2rem;
   font-weight: 600;
   line-height: 1.3;
-  margin-bottom: 0
+  margin-bottom: 0;
 }
 
 .hero-slogan {
@@ -6769,16 +6799,59 @@ html, body {
         padding: 100px 1rem 40px;
     }
     
-    .hero-new-text h1 {
+    .hero-new-content {
+        display: flex !important;
+        flex-direction: column;
+        padding: 0 1.5rem;
+    }
+    
+    /* Točen vrstni red po navodilih */
+    .hero-new-image { 
+        order: 1;
+        margin-bottom: 2rem;
+    }
+    
+    .hero-welcome-area { 
+        order: 2;
+    }
+    
+    .recommendation-box-home { 
+        order: 3;
+        margin: 2rem 0 !important;
+        max-width: 100% !important;
+    }
+    
+    .hero-info-box { 
+        order: 4;
+        max-width: 100% !important;
+        padding: 1.2rem;
+        margin-top: 1rem !important;
+    }
+    
+    .workshops-sidebar-inline { 
+        order: 5;
+        margin-top: 2rem;
+    }
+    
+    /* Poravnave besedila na mobilniku */
+    #hero-welcome {
+        text-align: center;
+        margin-bottom: 2.5rem !important;
         font-size: 1.8rem;
     }
     
-    .hero-new-subtitle {
+    .hero-slogan, 
-        font-size: 1rem;
+    .hero-new-description {
+        text-align: left;
+        margin-bottom: 1.5rem !important;
     }
     
-    .hero-info-box {
+    .hero-cta-box-inline {
-        padding: 1.2rem;
+        margin-bottom: 2rem;
+    }
+    
+    .hero-new-slogan {
+        margin-bottom: 1.5rem;
     }
     
     .hero-info-box h2 {
@@ -6789,6 +6862,10 @@ html, body {
         font-size: 0.9rem;
     }
     
+    .hero-new-subtitle {
+        font-size: 1rem;
+    }
+    
     .features-section {
         padding: 40px 1rem;
     }
@@ -7355,6 +7432,11 @@ html, body {
     text-align: center;
   }
   
+  /* Besedilo v hero sekciji - obojestransko poravnano na mobilnih */
+  .mediation-hero-text p {
+    text-align: justify !important;
+  }
+  
   .mediation-hero-text .cta-button {
     margin: 0 auto;
   }
@@ -7373,6 +7455,16 @@ html, body {
     grid-template-columns: 1fr !important;
   }
   
+  /* Besedilo v step karticah - obojestransko poravnano na mobilnih */
+  .step-card p {
+    text-align: justify !important;
+  }
+  
+  /* "Zakaj izbrati Prosberry" naslov - leva poravnava na mobilnih */
+  #zakaj h2 {
+    text-align: left !important;
+  }
+  
   /* Cena prikaz na mobilnih */
   .pricing-content {
     width: 100%;
@@ -7431,6 +7523,11 @@ html, body {
     grid-template-columns: 1fr !important;
   }
   
+  /* Brezplačno srečanje - leva poravnava besedila na mobilnih */
+  .offer-free-notice p {
+    text-align: left !important;
+  }
+  
   .offer-section {
     padding: 2rem 1.5rem;
   }

index.html

@@ -107,12 +107,13 @@
 
     <!-- 1. Sekcija: Glavni pozdrav (Hero) -->
     <section class="hero-new" style="overflow: visible;">
-        <div class="hero-new-content" style="grid-template-columns: 1.2fr 0.8fr 200px; gap: 2rem; max-width: 1600px;">
+        <div class="hero-new-content">
-            <div class="hero-new-text" data-aos="fade-up">
+            <!-- 1. Področje z besedilom (naslov, slogani) -->
-                <h1>Dobrodošli v prostoru rasti in sodelovanja</h1>
+            <div class="hero-welcome-area" data-aos="fade-up">
+                <h1 id="hero-welcome">Dobrodošli v prostoru rasti in sodelovanja</h1>
                 <p class="hero-slogan">PROSBERRY – mesto, kjer učenje, povezovanje in podpora postanejo enostavni!</p>
                 <p class="hero-new-description">Učenje splošne in poslovne angleščine za vse starostne skupine ter podpora medkulturni integraciji v vrtcih, šolah in institucijah</p>
-                <div style="background: rgba(251, 99, 57, 0.08); padding: 0.75rem 1rem; border-radius: 10px; margin: 0.75rem 0; border-left: 4px solid var(--primary-color);">
+                <div class="hero-cta-box-inline">
                     <p style="font-size: 0.85rem; margin-bottom: 0.5rem; color: #333; line-height: 1.4;">
                         <strong>Prvo srečanje ali uvodni posvet je brezplačen in brez obveznosti.</strong> Pogovoriva se o vaših ciljih in možnostih sodelovanja.
                     </p>
@@ -121,38 +122,14 @@
                     </div>
                 </div>
                 <p class="hero-new-slogan">Uči se angleščine, spoznaj medkulturne zgodbe in uživaj v vsakem koraku!</p>
-                <div class="hero-info-box">
-                    <h2>Zakaj PROSBERRY?</h2>
-                    <p><strong>PROS</strong> simbolizira znanje, izkušnje in strokovnost, ki podpirajo rast in razvoj.</p>
-                    <p><strong>BERRY</strong> predstavlja raznolikost in živost, ki bogati učenje, povezovanje in medkulturne izkušnje.</p>
-                    <p>Tudi v jeziku in med ljudmi rastemo vsak po svoje – z različnimi potrebami, ozadji in cilji.</p>
-                    <p>Moj cilj je ustvariti prostor, kjer se lahko učimo, povezujemo in sodelujemo naravno, enostavno in z veseljem.</p>
-                </div>
-            </div>
-            <div class="hero-new-image" data-aos="fade-left" style="margin: 0;">
-                <img src="assets/images/amra.webp" alt="Amra Kurešepi Zulji" width="1544" height="1920" fetchpriority="high" srcset="/assets/images/amra-320w.webp 320w, /assets/images/amra-480w.webp 480w, /assets/images/amra-767w.webp 767w, /assets/images/amra-960w.webp 960w, /assets/images/amra.webp 1544w">
-                
-                <!-- Okvirček: Priporočamo branje -->
-                <div class="recommendation-box-home">
-                    <h3>Priporočamo branje</h3>
-                    <div class="rec-list">
-                        <a href="/blog/clanki/2025-11-17-medkulturnost-prostor-za-rast.html" class="rec-item">
-                            <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/header.png" alt="Kako medkulturnost spodbuja rast?" class="rec-thumb">
-                            <span>Kako medkulturnost spodbuja rast?</span>
-                        </a>
-                        <a href="/blog/clanki/2025-11-18-dojemanje-casa-tocnosti-discipline.html" class="rec-item">
-                            <img src="/assets/images/ikona2.png" alt="Kako se čas in disciplina razlikujeta po kulturah?" class="rec-thumb">
-                            <span>Kako se čas in disciplina razlikujeta po kulturah?</span>
-                        </a>
-                        <a href="/blog/clanki/2025-12-21-od-ucilnice-do-skupnosti.html" class="rec-item">
-                            <img src="/assets/images/ikona3.png" alt="Kako učenje ustvarja skupnost?" class="rec-thumb">
-                            <span>Kako učenje ustvarja skupnost?</span>
-                        </a>
-                    </div>
-                </div>
             </div>
             
-            <!-- Panel: Aktualne delavnice (tretji stolpec) -->
+            <!-- 2. Slika (Sredina na desktopu) -->
+            <div class="hero-new-image" data-aos="fade-left">
+                <img src="assets/images/amra.webp" alt="Amra Kurešepi Zulji" width="1544" height="1920" fetchpriority="high" srcset="/assets/images/amra-320w.webp 320w, /assets/images/amra-480w.webp 480w, /assets/images/amra-767w.webp 767w, /assets/images/amra-960w.webp 960w, /assets/images/amra.webp 1544w">
+            </div>
+            
+            <!-- 3. AKTUALNE DELAVNICE (Desno na desktopu) -->
             <div class="workshops-sidebar-inline" data-aos="fade-left" data-aos-delay="200">
                 <h3>Aktualne delavnice</h3>
                 <div class="workshops-sidebar-list">
@@ -174,6 +151,34 @@
                     </a>
                 </div>
             </div>
+            
+            <!-- 4. PRIPOROČAMO BRANJE (Desktop: pod sliko v sredini) -->
+            <div class="recommendation-box-home">
+                <h3>Priporočamo branje</h3>
+                <div class="rec-list">
+                    <a href="/blog/clanki/2025-11-17-medkulturnost-prostor-za-rast.html" class="rec-item">
+                        <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/header.png" alt="Kako medkulturnost spodbuja rast?" class="rec-thumb">
+                        <span>Kako medkulturnost spodbuja rast?</span>
+                    </a>
+                    <a href="/blog/clanki/2025-11-18-dojemanje-casa-tocnosti-discipline.html" class="rec-item">
+                        <img src="/assets/images/ikona2.png" alt="Kako se čas in disciplina razlikujeta po kulturah?" class="rec-thumb">
+                        <span>Kako se čas in disciplina razlikujeta po kulturah?</span>
+                    </a>
+                    <a href="/blog/clanki/2025-12-21-od-ucilnice-do-skupnosti.html" class="rec-item">
+                        <img src="/assets/images/ikona3.png" alt="Kako učenje ustvarja skupnost?" class="rec-thumb">
+                        <span>Kako učenje ustvarja skupnost?</span>
+                    </a>
+                </div>
+            </div>
+            
+            <!-- 5. ZAKAJ PROSBERRY (Desktop: pod besedilom levo) -->
+            <div class="hero-info-box">
+                <h2>Zakaj PROSBERRY?</h2>
+                <p><strong>PROS</strong> simbolizira znanje, izkušnje in strokovnost, ki podpirajo rast in razvoj.</p>
+                <p><strong>BERRY</strong> predstavlja raznolikost in živost, ki bogati učenje, povezovanje in medkulturne izkušnje.</p>
+                <p>Tudi v jeziku in med ljudmi rastemo vsak po svoje – z različnimi potrebami, ozadji in cilji.</p>
+                <p>Moj cilj je ustvariti prostor, kjer se lahko učimo, povezujemo in sodelujemo naravno, enostavno in z veseljem.</p>
+            </div>
         </div>
         <!-- Dekorativni elementi v ozadju -->
         <div class="bg-shape shape-1"></div>

ponudba/index.html

@@ -164,7 +164,7 @@
           </div>
           
           <!-- Opomba o brezplačnem srečanju -->
-          <div style="text-align: center; margin-top: 3rem; padding: 2rem; background: rgba(255, 255, 255, 0.9); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);">
+          <div class="offer-free-notice" style="text-align: center; margin-top: 3rem; padding: 2rem; background: rgba(255, 255, 255, 0.9); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);">
             <p style="font-size: 1.1rem; margin-bottom: 1.5rem; color: #333;">
               <strong>Prvo srečanje je brezplačno</strong> – brez obveznosti, samo spoznavanje in posvet preko spleta.
             </p>

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

@@ -215,7 +215,7 @@
 
                     <!-- KARTICA 3 -->
                     <article class="purpose-card" data-aos="fade-up" data-aos-delay="200">
-                        <h3>Svetovalno / preventivno medkulturno posredovanje</h3>
+                        <h3>Svetovalno medkulturno posredovanje</h3>
                         <p>Ker je pogosto lažje preprečiti nesporazume, kot jih reševati, posrednik:</p>
                         <ul class="purpose-list">
                             <li><span class="check-icon">✔</span> predstavi kulturne razlike,</li>
@@ -333,8 +333,8 @@
                 
                 <div style="max-width: 900px; margin: 0 auto;">
                     <div style="margin-bottom: 3rem;">
-                        <h3 style="font-size: 1.3rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
+                        <h3 style="font-size: 1.3rem; margin-bottom: 1.5rem;">
-                            <span>⭐</span> Ker razumemo izobraževalni sistem – in ljudi v njem.
+                            <span style="margin-right: 0.5rem;">⭐</span>Ker razumemo izobraževalni sistem – in ljudi v njem.
                         </h3>
                         <p style="margin-bottom: 1rem;">Medkulturno posredovanje je učinkovito le, če posrednik razume obe strani – jezik in kulturo priseljencev ter delovanje institucij.</p>
                         <p style="margin-bottom: 1rem;">Kot profesorica angleščine in poznavalka vzgojno-izobraževalnega sistema:</p>