/* =================================== CSS Reset & Variables =================================== */*{ margin:0; padding:0; box-sizing:border-box;}:root{ /* Color Palette - Ozbiljna i profesionalna paleta (Navy/Gold) */ --primary-color:#1a2a3a;/* Navy Blue - glavna tamna */ --primary-dark:#0f1c29;/* Tamnija varijanta za vizuelnu težinu */ --primary-light:#2c4257;/* Svetlija Navy za gradijente */ --accent-gold:#c5a880;/* Muted Gold - zagasita zlatna */ --accent-gold-light:#dfc5a0;/* Svetlija zlatna za hover efekte */ --text-dark:#2c3e50;/* Tamno siva za tekst */ --text-medium:#4a5568;/* Srednje siva (Slate) za detalje */ --text-light:#718096;/* Svetlija siva za sporedne informacije */ --bg-white:#ffffff; --bg-light:#f5f3ef;/* Topla krem pozadina za body */ --bg-lighter:#ebe8e2;/* Toplija siva za akcente i pregrade */ --border-color:#ddd8d0; --shadow:0 4px 15px rgba(26, 42, 58, 0.08); --shadow-hover:0 8px 25px rgba(26, 42, 58, 0.15);  /* Typography */ --font-primary:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-serif:Georgia, 'Times New Roman', serif;}body{ font-family:var(--font-primary); color:var(--text-dark); line-height:1.6; background-color:var(--bg-light);}.container{ max-width:1200px; margin:0 auto; padding:0 20px;}/* =================================== Header Styles =================================== */.main-header{ background-color:var(--bg-white); box-shadow:var(--shadow); position:sticky; top:0; z-index:1000;}.header-content{ display:flex; justify-content:space-between; align-items:center; padding:15px 0;}.logo-container{ flex-shrink:0;}.logo-container a{ display:block; line-height:0; transition:opacity 0.3s ease;}.logo-container a:hover{ opacity:0.8;}.logo{ height:60px; width:auto; display:block;}.main-nav{ display:flex; align-items:center;}.mobile-menu-toggle{ display:none; flex-direction:column; background:none; border:none; cursor:pointer; padding:10px;}.mobile-menu-toggle span{ width:25px; height:3px; background-color:var(--primary-color); margin:3px 0; transition:0.3s; border-radius:3px;}.mobile-menu-toggle.active span:nth-child(1){ transform:rotate(-45deg) translate(-5px, 6px);}.mobile-menu-toggle.active span:nth-child(2){ opacity:0;}.mobile-menu-toggle.active span:nth-child(3){ transform:rotate(45deg) translate(-5px, -6px);}.nav-menu{ display:flex; list-style:none; gap:30px;}.nav-menu a{ text-decoration:none; color:var(--text-medium); font-weight:500; padding:8px 16px; border-radius:5px; transition:all 0.3s ease;}.nav-menu a:hover,.nav-menu a.active{ color:var(--primary-color); background-color:var(--bg-lighter);}/* =================================== Hero Section =================================== */.hero-section{ background:linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%); color:var(--bg-white); padding:80px 0; text-align:center; position:relative; overflow:hidden;}.hero-section::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="none"/><path d="M50 10 L90 90 L10 90 Z" fill="rgba(255,255,255,0.03)"/></svg>'); opacity:0.5;}.hero-section .container{ position:relative; z-index:1;}.hero-section h1{ font-size:3.5rem; font-weight:700; margin-bottom:20px; font-family:var(--font-serif); text-shadow:2px 2px 4px rgba(0,0,0,0.1);}.hero-subtitle{ font-size:1.3rem; opacity:0.95; max-width:600px; margin:0 auto;}/* Breadcrumb */.breadcrumb{ margin-top:20px;}.breadcrumb ol{ display:flex; list-style:none; padding:0; gap:10px; justify-content:center; flex-wrap:wrap;}.breadcrumb li{ color:rgba(255, 255, 255, 0.8); font-size:0.9rem;}.breadcrumb li:not(:last-child)::after{ content:'›'; margin-left:10px; color:rgba(255, 255, 255, 0.6);}.breadcrumb a{ color:rgba(255, 255, 255, 0.9); text-decoration:none; transition:color 0.3s ease;}.breadcrumb a:hover{ color:white; text-decoration:underline;}/* =================================== About Section =================================== */.about-section{ padding:80px 0; background-color:var(--bg-white);}.team-member{ display:grid; grid-template-columns:350px 1fr; gap:50px; align-items:start; margin-bottom:60px;}.team-member.reverse{ grid-template-columns:1fr 350px;}.team-member.reverse .member-image{ order:2;}.team-member.reverse .member-info{ order:1;}.member-image{ position:relative; border-radius:15px; overflow:hidden; box-shadow:var(--shadow); transition:transform 0.3s ease, box-shadow 0.3s ease;}.member-image:hover{ transform:translateY(-5px); box-shadow:var(--shadow-hover);}.member-image img{ width:100%; height:auto; display:block; border:5px solid var(--accent-gold); border-radius:15px;}.member-info h2{ color:var(--primary-dark); font-size:2rem; margin-bottom:25px; font-family:var(--font-serif); position:relative; padding-bottom:15px;}.member-info h2::after{ content:''; position:absolute; left:0; bottom:0; width:60px; height:3px; background:linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light)); border-radius:3px;}.info-section{ margin-bottom:30px;}.info-section h3{ color:var(--primary-color); font-size:1.3rem; margin-bottom:15px; display:flex; align-items:center; gap:10px;}.info-section ul{ list-style:none; padding-left:0;}.info-section ul li{ padding:10px 0 10px 25px; position:relative; color:var(--text-medium); line-height:1.7;}.info-section ul li::before{ content:'✓'; position:absolute; left:0; color:var(--accent-gold); font-weight:bold; font-size:1.2rem;}.info-section p{ color:var(--text-medium); line-height:1.8; text-align:justify;}.divider{ height:2px; background:linear-gradient(90deg, transparent, var(--border-color), transparent); margin:60px 0;}/* =================================== CTA Section =================================== */.cta-section{ background:linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color:var(--bg-white); padding:80px 0; text-align:center;}.cta-section h2{ font-size:2.5rem; margin-bottom:20px; font-family:var(--font-serif);}.cta-section p{ font-size:1.2rem; margin-bottom:30px; opacity:0.95;}.btn{ display:inline-block; padding:15px 40px; text-decoration:none; border-radius:50px; font-weight:600; transition:all 0.3s ease; font-size:1.1rem;}.btn-primary{ background-color:var(--accent-gold); color:var(--text-dark); box-shadow:0 4px 15px rgba(212, 175, 55, 0.3);}.btn-primary:hover{ background-color:var(--accent-gold-light); transform:translateY(-2px); box-shadow:0 6px 20px rgba(212, 175, 55, 0.4);}/* =================================== Intro Cards (Radno pravo page) =================================== */.intro-cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:30px; max-width:1000px; margin:0 auto 60px;}.intro-card{ display:flex; flex-direction:column; padding:35px 30px; background-color:var(--bg-white); border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,0.06); border-top:3px solid var(--accent-gold); transition:all 0.3s ease;}.intro-card:hover{ box-shadow:0 8px 30px rgba(0,0,0,0.1); transform:translateY(-4px);}.intro-card-icon{ flex-shrink:0; width:56px; height:56px; display:flex; align-items:center; justify-content:center; background-color:var(--bg-light); border-radius:12px; margin-bottom:20px; color:var(--primary-color);}.intro-card-content h3{ color:var(--primary-dark); font-size:1.15rem; margin-bottom:10px; font-family:var(--font-serif);}.intro-card-content p{ color:var(--text-medium); line-height:1.75; margin:0; text-align:left; font-size:0.95rem;}/* =================================== Services Page Styles =================================== */.services-intro{ text-align:center; max-width:800px; margin:0 auto 60px; font-size:1.1rem; color:var(--text-medium); line-height:1.8;}.services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:30px;}.service-card{ background-color:var(--bg-white); padding:35px; border-radius:15px; box-shadow:var(--shadow); transition:all 0.3s ease; border:2px solid transparent;}.service-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:var(--primary-light);}.service-card h3{ color:var(--primary-dark); font-size:1.5rem; margin-bottom:15px; font-family:var(--font-serif);}.service-card p{ color:var(--text-medium); line-height:1.7;}.service-link{ display:inline-block; margin-top:15px; color:var(--primary-color); text-decoration:none; font-weight:500; transition:color 0.3s ease, transform 0.2s ease;}.service-link:hover{ color:var(--accent-gold); transform:translateX(5px);}/* =================================== Contact Page Styles =================================== */.contact-grid{ display:grid; grid-template-columns:1fr 1.5fr; gap:60px; align-items:start;}.contact-info h2,.contact-form-container h2{ color:var(--primary-dark); font-size:2rem; margin-bottom:30px; font-family:var(--font-serif);}.contact-item{ margin-bottom:30px; padding:20px; background-color:var(--bg-lighter); border-radius:10px; border-left:4px solid var(--accent-gold);}.contact-item h3{ color:var(--primary-color); font-size:1.2rem; margin-bottom:10px;}.contact-item p{ color:var(--text-medium); margin-bottom:5px;}.contact-item a{ color:var(--primary-color); text-decoration:none; transition:color 0.3s ease;}.contact-item a:hover{ color:var(--primary-dark); text-decoration:underline;}.contact-form-container{ background-color:var(--bg-white); padding:40px; border-radius:15px; box-shadow:var(--shadow);}.contact-form{ display:flex; flex-direction:column; gap:20px;}.form-group{ display:flex; flex-direction:column;}.form-group label{ color:var(--text-dark); font-weight:600; margin-bottom:8px; font-size:0.95rem;}.form-group input,.form-group textarea{ padding:12px 15px; border:2px solid var(--border-color); border-radius:8px; font-family:var(--font-primary); font-size:1rem; transition:border-color 0.3s ease; background-color:var(--bg-white);}.form-group input:focus,.form-group textarea:focus{ outline:none; border-color:var(--primary-color);}.form-group textarea{ resize:vertical; min-height:120px;}.contact-form .btn{ align-self:flex-start; cursor:pointer; border:none; margin-top:10px;}/* Alert Messages */.alert{ padding:15px 20px; border-radius:8px; margin-bottom:30px; font-weight:500;}.alert-success{ background-color:#d4edda; border:1px solid #c3e6cb; color:#155724;}.alert-error{ background-color:#f8d7da; border:1px solid #f5c6cb; color:#721c24;}/* =================================== FAQ Section Styles =================================== */.section-title{ color:var(--primary-dark); font-size:2.5rem; margin-bottom:40px; text-align:center; font-family:var(--font-serif); position:relative; padding-bottom:20px;}.section-title::after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:80px; height:4px; background:linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light)); border-radius:2px;}.section-subtitle{ color:var(--text-medium); font-size:1.2rem; text-align:center; max-width:800px; margin:-20px auto 50px; line-height:1.7;}.faq-container{ max-width:1100px; margin:0 auto 60px;}.faq-item{ position:relative; background-color:var(--bg-white); border:2px solid var(--border-color); border-radius:16px; padding:40px 40px 40px 120px; margin-bottom:30px; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.08); overflow:hidden;}.faq-item::before{ content:attr(data-number); position:absolute; left:30px; top:35px; font-size:3.5rem; font-weight:700; color:var(--primary-light); font-family:var(--font-serif); line-height:1; opacity:0.3;}.faq-item:hover{ border-color:var(--primary-color); box-shadow:0 8px 25px rgba(91, 163, 184, 0.15); transform:translateY(-3px);}.faq-item:hover::before{ opacity:0.5; color:var(--primary-color);}.faq-question{ color:var(--primary-dark); font-size:1.5rem; margin-bottom:25px; font-family:var(--font-serif); font-weight:600; line-height:1.4;}.faq-answer{ color:var(--text-medium); line-height:1.8;}.faq-answer p{ margin-bottom:18px;}.faq-answer p strong{ color:var(--text-dark); font-weight:600;}.faq-answer ul{ list-style:none; padding-left:0; margin:18px 0;}.faq-answer ul li{ padding:10px 0 10px 35px; position:relative; line-height:1.7;}.faq-answer ul li::before{ content:'✓'; position:absolute; left:0; color:var(--accent-gold); font-weight:bold; font-size:1.3rem;}.faq-answer ul li strong{ color:var(--primary-dark);}/* CTA Box */.cta-box{ background:linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color:var(--bg-white); padding:50px 40px; border-radius:15px; text-align:center; box-shadow:var(--shadow-hover); margin-top:60px;}.cta-box h2{ font-size:2rem; margin-bottom:15px; font-family:var(--font-serif);}.cta-box p{ font-size:1.1rem; margin-bottom:25px; opacity:0.95;}.cta-buttons{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:20px;}.cta-buttons .btn{ background-color:var(--accent-gold); color:var(--text-dark); padding:15px 30px; text-decoration:none; border-radius:50px; font-weight:600; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(212, 175, 55, 0.3); font-size:1.05rem;}.cta-buttons .btn:hover{ background-color:var(--accent-gold-light); transform:translateY(-2px); box-shadow:0 6px 20px rgba(212, 175, 55, 0.4);}.cta-note{ font-size:0.95rem; opacity:0.9; font-style:italic; margin-top:10px;}/* =================================== Footer Styles =================================== */.main-footer{ background-color:var(--text-dark); color:var(--bg-lighter); padding:50px 0 20px;}.footer-content{ display:grid; grid-template-columns:repeat(2, 1fr); gap:60px; margin-bottom:40px; max-width:900px; margin-left:auto; margin-right:auto;}.footer-section h3{ color:var(--accent-gold); margin-bottom:20px; font-size:1.3rem;}.footer-section p{ margin-bottom:10px; color:var(--bg-lighter);}.footer-section a{ color:var(--primary-light); text-decoration:none; transition:color 0.3s ease;}.footer-section a:hover{ color:var(--accent-gold-light);}.footer-bottom{ text-align:center; padding-top:30px; border-top:1px solid rgba(255, 255, 255, 0.1); color:var(--text-light);}/* =================================== Responsive Design =================================== *//* Tablet */@media (max-width:992px){ .hero-section h1{ font-size:2.8rem;} .team-member, .team-member.reverse{ grid-template-columns:1fr; gap:30px;} .team-member.reverse .member-image{ order:1;} .team-member.reverse .member-info{ order:2;} .member-image{ max-width:400px; margin:0 auto;} .footer-content{ grid-template-columns:1fr; gap:30px;} .logo{ height:50px;} .services-grid{ grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));} .contact-grid{ grid-template-columns:1fr; gap:40px;}}/* Mobile */@media (max-width:768px){ .mobile-menu-toggle{ display:flex;} .nav-menu{ position:absolute; top:100%; right:0; background-color:var(--bg-white); flex-direction:column; width:100%; max-width:300px; box-shadow:var(--shadow); padding:20px; gap:10px; transform:translateX(100%); transition:transform 0.3s ease;} .nav-menu.active{ transform:translateX(0);} .nav-menu a{ display:block; padding:12px 16px;} .hero-section{ padding:60px 0;} .intro-cards{ grid-template-columns:1fr; gap:20px;} .intro-card{ padding:28px 24px;} .intro-card-icon{ width:48px; height:48px;} .intro-card-icon svg{ width:24px; height:24px;} .hero-section h1{ font-size:2.2rem;} .hero-subtitle{ font-size:1.1rem;} .about-section{ padding:50px 0;} .member-info h2{ font-size:1.6rem;} .info-section h3{ font-size:1.1rem;} .cta-section{ padding:50px 0;} .cta-section h2{ font-size:1.8rem;} .cta-section p{ font-size:1rem;} .btn{ padding:12px 30px; font-size:1rem;} .services-grid{ grid-template-columns:1fr;} .faq-item{ padding:30px 25px 30px 85px;} .faq-item::before{ font-size:2.8rem; left:20px; top:30px;} .faq-question{ font-size:1.3rem;} .section-title{ font-size:2rem;} .cta-box{ padding:35px 25px;} .cta-box h2{ font-size:1.6rem;} .cta-buttons{ flex-direction:column;} .cta-buttons .btn{ width:100%;} .contact-form-container{ padding:25px;} .contact-info h2, .contact-form-container h2{ font-size:1.6rem;}}/* Small Mobile */@media (max-width:480px){ .container{ padding:0 15px;} .hero-section h1{ font-size:1.8rem;} .hero-subtitle{ font-size:1rem;} .faq-item{ padding:25px 15px 25px 70px; margin-bottom:20px;} .faq-item::before{ font-size:2.2rem; left:15px; top:25px;} .faq-question{ font-size:1.1rem; margin-bottom:20px;} .faq-answer{ font-size:0.95rem;} .faq-answer ul li{ padding:8px 0 8px 28px; font-size:0.95rem;} .faq-answer ul li::before{ font-size:1.1rem;} .member-info h2{ font-size:1.4rem;} .logo{ height:40px;}}/* Print Styles */@media print{ .main-header, .main-footer, .cta-section, .mobile-menu-toggle{ display:none;} body{ background-color:white;} .team-member{ page-break-inside:avoid;}}.has-dropdown{position:relative}.dropdown-menu{position:absolute;top:100%;left:0;background-color:var(--bg-white);box-shadow:0 10px 30px rgba(0,0,0,.1);border-radius:8px;padding:10px 0;min-width:250px;opacity:0;visibility:hidden;transform:translateY(15px);transition:all .3s cubic-bezier(.165,.84,.44,1);list-style:none;z-index:100;border-top:3px solid var(--accent-gold)}.has-dropdown:focus-within .dropdown-menu,.has-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-menu li{padding:0}.dropdown-menu a{display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:0;font-weight:500;color:var(--text-medium);transition:all .2s ease;border-left:2px solid transparent}.dropdown-icon{flex-shrink:0;color:var(--primary-light);transition:color .2s ease}.dropdown-menu a.active,.dropdown-menu a:hover{background-color:var(--bg-lighter);border-left:2px solid var(--accent-gold);color:var(--primary-color)}.dropdown-menu a.active .dropdown-icon,.dropdown-menu a:hover .dropdown-icon{color:var(--accent-gold)}.dropdown-arrow{display:inline-block;font-size:.8em;margin-left:6px;vertical-align:middle;transition:transform .3s ease}.has-dropdown:hover .dropdown-arrow{transform:rotate(180deg)}@media (max-width:768px){.mobile-menu-toggle{display:flex}.nav-menu{position:absolute;top:100%;right:0;background-color:var(--bg-white);flex-direction:column;width:100%;max-width:300px;box-shadow:var(--shadow);padding:10px 0;gap:0;transform:translateX(100%);transition:transform .3s ease;list-style:none}.nav-menu li{list-style:none}.nav-menu.active{transform:translateX(0)}.nav-menu > li > a{display:block;padding:12px 20px}.dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:0;margin:0;min-width:100%;border-top:none}.dropdown-menu a{display:flex;padding:12px 20px 12px 40px}.has-dropdown:focus-within .dropdown-menu,.has-dropdown:hover .dropdown-menu{transform:none}}