1	/* ========================================
2	   SLIKOPLESKARSTVO ŠEME - MAIN STYLES
3	   ======================================== */
4	
5	/* CSS Variables */
6	:root {
7	    /* Colors */
8	    --primary-color: #2563eb;
9	    --primary-dark: #1e40af;
10	    --primary-light: #3b82f6;
11	    --secondary-color: #f97316;
12	    --secondary-dark: #ea580c;
13	    
14	    --text-primary: #1f2937;
15	    --text-secondary: #6b7280;
16	    --text-light: #9ca3af;
17	    
18	    --bg-primary: #ffffff;
19	    --bg-secondary: #f9fafb;
20	    --bg-dark: #111827;
21	    
22	    --border-color: #e5e7eb;
23	    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
24	    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
25	    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
26	    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
27	    
28	    /* Typography */
29	    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
30	    --font-display: 'Poppins', var(--font-primary);
31	    
32	    /* Spacing */
33	    --section-padding: 100px 0;
34	    --container-padding: 0 20px;
35	    
36	    /* Transitions */
37	    --transition-fast: 0.2s ease;
38	    --transition-base: 0.3s ease;
39	    --transition-slow: 0.5s ease;
40	}
41	
42	/* ========================================
43	   RESET & BASE STYLES
44	   ======================================== */
45	
46	* {
47	    margin: 0;
48	    padding: 0;
49	    box-sizing: border-box;
50	}
51	
52	html {
53	    scroll-behavior: smooth;
54	    font-size: 16px;
55	}
56	
57	body {
58	    font-family: var(--font-primary);
59	    font-size: 1rem;
60	    line-height: 1.6;
61	    color: var(--text-primary);
62	    background-color: var(--bg-primary);
63	    overflow-x: hidden;
64	}
65	
66	/* ========================================
67	   TYPOGRAPHY
68	   ======================================== */
69	
70	h1, h2, h3, h4, h5, h6 {
71	    font-family: var(--font-display);
72	    font-weight: 700;
73	    line-height: 1.2;
74	    color: var(--text-primary);
75	    margin-bottom: 1rem;
76	}
77	
78	h1 { font-size: 3.5rem; }
79	h2 { font-size: 2.5rem; }
80	h3 { font-size: 1.75rem; }
81	h4 { font-size: 1.5rem; }
82	h5 { font-size: 1.25rem; }
83	h6 { font-size: 1rem; }
84	
85	p {
86	    margin-bottom: 1rem;
87	    line-height: 1.8;
88	}
89	
90	a {
91	    color: var(--primary-color);
92	    text-decoration: none;
93	    transition: var(--transition-base);
94	}
95	
96	a:hover {
97	    color: var(--primary-dark);
98	}
99	
100	/* ========================================
101	   LAYOUT
102	   ======================================== */
103	
104	.container {
105	    max-width: 1200px;
106	    margin: 0 auto;
107	    padding: var(--container-padding);
108	}
109	
110	section {
111	    padding: var(--section-padding);
112	}
113	
114	/* ========================================
115	   NAVIGATION
116	   ======================================== */
117	
118	.navbar {
119	    position: fixed;
120	    top: 0;
121	    left: 0;
122	    right: 0;
123	    background-color: rgba(255, 255, 255, 0.95);
124	    backdrop-filter: blur(10px);
125	    box-shadow: var(--shadow-sm);
126	    z-index: 1000;
127	    transition: var(--transition-base);
128	}
129	
130	.navbar.scrolled {
131	    box-shadow: var(--shadow-md);
132	}
133	
134	.nav-wrapper {
135	    display: flex;
136	    justify-content: space-between;
137	    align-items: center;
138	    padding: 1rem 0;
139	}
140	
141	.logo {
142	    display: flex;
143	    flex-direction: column;
144	    font-family: var(--font-display);
145	    font-weight: 700;
146	    font-size: 1.25rem;
147	    line-height: 1.2;
148	    color: var(--text-primary);
149	    text-decoration: none;
150	}
151	
152	.logo-text {
153	    font-size: 1.25rem;
154	}
155	
156	.logo-accent {
157	    font-size: 1.5rem;
158	    color: var(--primary-color);
159	}
160	
161	.nav-menu {
162	    display: flex;
163	    list-style: none;
164	    gap: 2rem;
165	    align-items: center;
166	}
167	
168	.nav-link {
169	    font-weight: 500;
170	    font-size: 0.95rem;
171	    color: var(--text-secondary);
172	    padding: 0.5rem 0;
173	    position: relative;
174	    transition: var(--transition-base);
175	}
176	
177	.nav-link::after {
178	    content: '';
179	    position: absolute;
180	    bottom: 0;
181	    left: 0;
182	    width: 0;
183	    height: 2px;
184	    background-color: var(--primary-color);
185	    transition: var(--transition-base);
186	}
187	
188	.nav-link:hover,
189	.nav-link.active {
190	    color: var(--primary-color);
191	}
192	
193	.nav-link:hover::after,
194	.nav-link.active::after {
195	    width: 100%;
196	}
197	
198	.cta-link {
199	    background-color: var(--primary-color);
200	    color: white !important;
201	    padding: 0.75rem 1.5rem !important;
202	    border-radius: 8px;
203	    font-weight: 600;
204	}
205	
206	.cta-link::after {
207	    display: none;
208	}
209	
210	.cta-link:hover {
211	    background-color: var(--primary-dark);
212	    transform: translateY(-2px);
213	    box-shadow: var(--shadow-md);
214	}
215	
216	.mobile-menu-toggle {
217	    display: none;
218	    flex-direction: column;
219	    gap: 5px;
220	    background: none;
221	    border: none;
222	    cursor: pointer;
223	    padding: 5px;
224	}
225	
226	.mobile-menu-toggle span {
227	    width: 25px;
228	    height: 3px;
229	    background-color: var(--text-primary);
230	    border-radius: 3px;
231	    transition: var(--transition-base);
232	}
233	
234	/* ========================================
235	   HERO SECTION
236	   ======================================== */
237	
238	.hero {
239	    position: relative;
240	    min-height: 100vh;
241	    display: flex;
242	    align-items: center;
243	    justify-content: center;
244	    padding-top: 80px;
245	    overflow: hidden;
246	}
247	
248	.hero-background {
249	    position: absolute;
250	    top: 0;
251	    left: 0;
252	    right: 0;
253	    bottom: 0;
254	    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
255	    opacity: 0.05;
256	    z-index: -1;
257	}
258	
259	.hero-background::after {
260	    content: '';
261	    position: absolute;
262	    top: 0;
263	    left: 0;
264	    right: 0;
265	    bottom: 0;
266	    background-image: 
267	        radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
268	        radial-gradient(circle at 80% 80%, rgba(249, 115, 22, 0.1) 0%, transparent 50%);
269	}
270	
271	.hero-content {
272	    text-align: center;
273	    max-width: 900px;
274	    margin: 0 auto;
275	    animation: fadeInUp 1s ease-out;
276	}
277	
278	.hero-badge {
279	    display: inline-block;
280	    padding: 0.5rem 1.5rem;
281	    background-color: rgba(37, 99, 235, 0.1);
282	    color: var(--primary-color);
283	    border-radius: 50px;
284	    font-weight: 600;
285	    font-size: 0.9rem;
286	    margin-bottom: 1.5rem;
287	}
288	
289	.hero-title {
290	    font-size: 4rem;
291	    font-weight: 800;
292	    line-height: 1.1;
293	    margin-bottom: 1.5rem;
294	    color: var(--text-primary);
295	}
296	
297	.hero-title .highlight {
298	    color: var(--primary-color);
299	    position: relative;
300	}
301	
302	.hero-description {
303	    font-size: 1.25rem;
304	    line-height: 1.8;
305	    color: var(--text-secondary);
306	    margin-bottom: 2.5rem;
307	    max-width: 700px;
308	    margin-left: auto;
309	    margin-right: auto;
310	}
311	
312	.hero-buttons {
313	    display: flex;
314	    gap: 1rem;
315	    justify-content: center;
316	    margin-bottom: 4rem;
317	    flex-wrap: wrap;
318	}
319	
320	.hero-stats {
321	    display: flex;
322	    justify-content: center;
323	    gap: 4rem;
324	    margin-top: 4rem;
325	    padding-top: 3rem;
326	    border-top: 1px solid var(--border-color);
327	}
328	
329	.stat-item {
330	    text-align: center;
331	}
332	
333	.stat-number {
334	    display: block;
335	    font-size: 2.5rem;
336	    font-weight: 800;
337	    color: var(--primary-color);
338	    font-family: var(--font-display);
339	    line-height: 1;
340	    margin-bottom: 0.5rem;
341	}
342	
343	.stat-label {
344	    display: block;
345	    font-size: 0.95rem;
346	    color: var(--text-secondary);
347	    font-weight: 500;
348	}
349	
350	.scroll-indicator {
351	    position: absolute;
352	    bottom: 2rem;
353	    left: 50%;
354	    transform: translateX(-50%);
355	    display: flex;
356	    flex-direction: column;
357	    align-items: center;
358	    gap: 0.5rem;
359	    color: var(--text-light);
360	    font-size: 0.85rem;
361	    font-weight: 500;
362	    animation: bounce 2s infinite;
363	}
364	
365	.scroll-arrow {
366	    width: 20px;
367	    height: 20px;
368	    border-right: 2px solid var(--text-light);
369	    border-bottom: 2px solid var(--text-light);
370	    transform: rotate(45deg);
371	}
372	
373	/* ========================================
374	   BUTTONS
375	   ======================================== */
376	
377	.btn {
378	    display: inline-block;
379	    padding: 1rem 2rem;
380	    font-weight: 600;
381	    font-size: 1rem;
382	    text-align: center;
383	    border-radius: 8px;
384	    cursor: pointer;
385	    transition: var(--transition-base);
386	    border: 2px solid transparent;
387	    font-family: var(--font-primary);
388	}
389	
390	.btn-primary {
391	    background-color: var(--primary-color);
392	    color: white;
393	}
394	
395	.btn-primary:hover {
396	    background-color: var(--primary-dark);
397	    transform: translateY(-2px);
398	    box-shadow: var(--shadow-lg);
399	}
400	
401	.btn-secondary {
402	    background-color: transparent;
403	    color: var(--text-primary);
404	    border-color: var(--border-color);
405	}
406	
407	.btn-secondary:hover {
408	    border-color: var(--primary-color);
409	    color: var(--primary-color);
410	    transform: translateY(-2px);
411	}
412	
413	.btn-full {
414	    width: 100%;
415	}
416	
417	/* ========================================
418	   SECTION HEADERS
419	   ======================================== */
420	
421	.section-header {
422	    text-align: center;
423	    max-width: 700px;
424	    margin: 0 auto 4rem;
425	}
426	
427	.section-badge {
428	    display: inline-block;
429	    padding: 0.5rem 1.5rem;
430	    background-color: rgba(37, 99, 235, 0.1);
431	    color: var(--primary-color);
432	    border-radius: 50px;
433	    font-weight: 600;
434	    font-size: 0.9rem;
435	    margin-bottom: 1rem;
436	}
437	
438	.section-title {
439	    font-size: 2.75rem;
440	    font-weight: 800;
441	    margin-bottom: 1rem;
442	}
443	
444	.section-subtitle {
445	    font-size: 1.15rem;
446	    color: var(--text-secondary);
447	    line-height: 1.8;
448	}
449	
450	/* ========================================
451	   ANIMATIONS
452	   ======================================== */
453	
454	@keyframes fadeInUp {
455	    from {
456	        opacity: 0;
457	        transform: translateY(30px);
458	    }
459	    to {
460	        opacity: 1;
461	        transform: translateY(0);
462	    }
463	}
464	
465	@keyframes bounce {
466	    0%, 20%, 50%, 80%, 100% {
467	        transform: translateX(-50%) translateY(0);
468	    }
469	    40% {
470	        transform: translateX(-50%) translateY(-10px);
471	    }
472	    60% {
473	        transform: translateX(-50%) translateY(-5px);
474	    }
475	}
476	
477	@keyframes fadeIn {
478	    from {
479	        opacity: 0;
480	    }
481	    to {
482	        opacity: 1;
483	    }
484	}
485	
486	/* ========================================
487	   UTILITY CLASSES
488	   ======================================== */
489	
490	.text-center { text-align: center; }
491	.text-left { text-align: left; }
492	.text-right { text-align: right; }
493	
494	.mt-1 { margin-top: 0.5rem; }
495	.mt-2 { margin-top: 1rem; }
496	.mt-3 { margin-top: 1.5rem; }
497	.mt-4 { margin-top: 2rem; }
498	
499	.mb-1 { margin-bottom: 0.5rem; }
500	.mb-2 { margin-bottom: 1rem; }
501	.mb-3 { margin-bottom: 1.5rem; }
502	.mb-4 { margin-bottom: 2rem; }
503	
504	/* ========================================
505	   O NAS SECTION
506	   ======================================== */
507	
508	.section-o-nas {
509	    background-color: var(--bg-secondary);
510	}
511	
512	.o-nas-content {
513	    display: grid;
514	    grid-template-columns: 1fr;
515	    gap: 4rem;
516	    margin-top: 3rem;
517	}
518	
519	.o-nas-text {
520	    max-width: 100%;
521	}
522	
523	.o-nas-text p {
524	    font-size: 1.05rem;
525	    line-height: 1.9;
526	    color: var(--text-secondary);
527	    margin-bottom: 1.5rem;
528	}
529	
530	.o-nas-text .lead-text {
531	    font-size: 1.3rem;
532	    font-weight: 500;
533	    color: var(--text-primary);
534	    line-height: 1.8;
535	}
536	
537	.o-nas-highlight {
538	    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
539	    color: white;
540	    padding: 2rem;
541	    border-radius: 12px;
542	    margin: 2rem 0;
543	}
544	
545	.o-nas-highlight p {
546	    margin: 0;
547	    font-size: 1.1rem;
548	}
549	
550	.o-nas-features {
551	    display: grid;
552	    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
553	    gap: 2rem;
554	}
555	
556	/* ========================================
557	   STORITVE SECTION
558	   ======================================== */
559	
560	.section-storitve {
561	    background-color: var(--bg-primary);
562	}
563	
564	.storitve-grid {
565	    display: grid;
566	    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
567	    gap: 2rem;
568	}
569	
570	/* ========================================
571	   PROJEKTI SECTION
572	   ======================================== */
573	
574	.section-projekti {
575	    background-color: var(--bg-secondary);
576	}
577	
578	.projekti-grid {
579	    display: grid;
580	    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
581	    gap: 2.5rem;
582	}
583	
584	/* ========================================
585	   ZAKAJ MI SECTION
586	   ======================================== */
587	
588	.section-zakaj-mi {
589	    background-color: var(--bg-primary);
590	}
591	
592	.zakaj-mi-grid {
593	    display: grid;
594	    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
595	    gap: 2rem;
596	}
597	
598	/* ========================================
599	   KONTAKT SECTION
600	   ======================================== */
601	
602	.section-kontakt {
603	    background-color: var(--bg-secondary);
604	}
605	
606	.kontakt-wrapper {
607	    display: grid;
608	    grid-template-columns: 1fr 1.5fr;
609	    gap: 4rem;
610	    margin-top: 3rem;
611	}
612	
613	.kontakt-info {
614	    display: grid;
615	    grid-template-columns: 1fr;
616	    gap: 1.5rem;
617	}
618	
619	.kontakt-form-wrapper {
620	    background: white;
621	    padding: 3rem;
622	    border-radius: 16px;
623	    box-shadow: var(--shadow-lg);
624	}
625	
626	/* ========================================
627	   FOOTER
628	   ======================================== */
629	
630	.footer {
631	    background-color: var(--bg-dark);
632	    color: white;
633	    padding: 4rem 0 2rem;
634	}
635	
636	.footer-content {
637	    display: grid;
638	    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
639	    gap: 3rem;
640	    margin-bottom: 3rem;
641	}
642	
643	.footer-col h4 {
644	    color: white;
645	    margin-bottom: 1.5rem;
646	    font-size: 1.2rem;
647	}
648	
649	.footer-logo {
650	    font-family: var(--font-display);
651	    font-weight: 700;
652	    font-size: 1.5rem;
653	}
654	
655	.footer-logo span {
656	    color: var(--primary-color);
657	}
658	
659	.footer-col p {
660	    color: #9ca3af;
661	    line-height: 1.8;
662	    font-size: 0.95rem;
663	}
664	
665	.footer-links,
666	.footer-contact {
667	    list-style: none;
668	    padding: 0;
669	}
670	
671	.footer-links li,
672	.footer-contact li {
673	    margin-bottom: 0.75rem;
674	}
675	
676	.footer-links a,
677	.footer-contact a {
678	    color: #9ca3af;
679	    transition: var(--transition-base);
680	}
681	
682	.footer-links a:hover,
683	.footer-contact a:hover {
684	    color: var(--primary-color);
685	    padding-left: 5px;
686	}
687	
688	.footer-bottom {
689	    border-top: 1px solid rgba(255, 255, 255, 0.1);
690	    padding-top: 2rem;
691	    text-align: center;
692	}
693	
694	.footer-bottom p {
695	    color: #9ca3af;
696	    font-size: 0.9rem;
697	    margin: 0;
698	}
699	
700	/* ========================================
701	   BACK TO TOP BUTTON
702	   ======================================== */
703	
704	.back-to-top {
705	    position: fixed;
706	    bottom: 2rem;
707	    right: 2rem;
708	    width: 50px;
709	    height: 50px;
710	    background-color: var(--primary-color);
711	    color: white;
712	    border: none;
713	    border-radius: 50%;
714	    font-size: 1.5rem;
715	    cursor: pointer;
716	    opacity: 0;
717	    visibility: hidden;
718	    transition: var(--transition-base);
719	    z-index: 999;
720	    box-shadow: var(--shadow-lg);
721	}
722	
723	.back-to-top.show {
724	    opacity: 1;
725	    visibility: visible;
726	}
727	
728	.back-to-top:hover {
729	    background-color: var(--primary-dark);
730	    transform: translateY(-5px);
731	}
732	
733	/* ========================================
734	   FADE IN ANIMATION CLASS
735	   ======================================== */
736	
737	.fade-in {
738	    animation: fadeInUp 0.6s ease-out;
739	}