/* ================================
   CSS Variables & Reset
   ================================ */
:root {
    /* Primary Colors */
    --primary: hsl(120, 30%, 35%);
    --primary-dark: hsl(120, 30%, 28%);
    --primary-light: hsl(120, 20%, 95%);

    /* Background & Text */
    --background: hsl(0, 0%, 100%);
    --foreground: hsl(25, 20%, 15%);

    /* Secondary & Muted */
    --secondary: hsl(120, 20%, 95%);
    --muted: hsl(120, 20%, 95%);
    --accent: hsl(120, 20%, 95%);

    /* Border & Cards */
    --border: hsl(120, 10%, 90%);
    --card: hsl(120, 30%, 25%);
    --card-foreground: hsl(0, 0%, 100%);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border Radius */
    --radius: 0.5rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
    line-height: 1.7;
    color: var(--foreground);
    background-color: var(--background);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ================================
   Icons
   ================================ */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: inherit;
}

/* Green icons (on white/light backgrounds) */
.icon-logo {
    width: 1.75rem;
    height: 1.75rem;
}

.icon-preloader {
    width: 4rem;
    height: 4rem;
}

.icon-large {
    width: 2.5rem;
    height: 2.5rem;
}

.icon-product {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-contact {
    width: 1.75rem;
    height: 1.75rem;
}

/* Color utility classes */
.text-primary {
    color: var(--primary);
}

.text-white {
    color: white;
}

/* ================================
   Preloader
   ================================ */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-icon {
    font-size: 4rem;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

/* ================================
   Container
   ================================ */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1280px) {
    .container {
        padding: 0 8rem;
    }
}

/* ================================
   Navbar
   ================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem 2rem;
    background-color: transparent;
    transition: all var(--transition-normal);
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

/* White navbar elements on transparent hero */
.navbar .logo,
.navbar .nav-links>a,
.navbar .lang-btn {
    color: white;
}

.navbar .logo .icon {
    filter: brightness(0) invert(1);
}

.navbar .mobile-menu-btn .icon {
    filter: brightness(0) invert(1);
}


/* Dark navbar elements on light pages (for Proizvodi/Kontakt) */
.navbar.navbar-light-page .logo,
.navbar.navbar-light-page .nav-links>a,
.navbar.navbar-light-page .lang-btn {
    color: var(--foreground);
}

.navbar.navbar-light-page .logo .icon,
.navbar.navbar-light-page .mobile-menu-btn .icon {
    filter: none;
}

.navbar.navbar-light-page .nav-links>a:hover {
    color: var(--primary);
}

/* Green navbar elements when scrolled */

.navbar.scrolled .logo {
    color: var(--primary);
}

.navbar.scrolled .logo .icon {
    filter: none;
}

.navbar.scrolled .nav-links>a {
    color: var(--foreground);
}

.navbar.scrolled .nav-links>a:hover {
    color: var(--primary);
}

.navbar.scrolled .lang-btn {
    color: var(--foreground);
}

.navbar.scrolled .mobile-menu-btn .icon {
    filter: none;
}

.navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.nav-center {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    justify-self: center;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-self: end;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.35rem;
    transition: color var(--transition-fast);
}

.logo-icon {
    font-size: 1.75rem;
}

.nav-logo-image {
    /* Defensive CSS: Responsive logo sizing */
    height: clamp(2.5rem, 5vw, 3.5rem);
    max-height: 3.5rem;
    /* Strict upper limit: never exceed this */
    width: auto;
    display: block;
    object-fit: contain;
    /* Prevent distortion */
    flex-shrink: 0;
    /* Prevent squishing in flex layouts */
}



.nav-links>a {
    font-size: 1rem;
    font-weight: 500;
    transition: color var(--transition-fast);
    position: relative;
}

.nav-links>a:hover {
    color: var(--primary);
}

.nav-links>a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width var(--transition-fast);
}

.nav-links>a:hover::after {
    width: 100%;
}

/* Simple Language Switch (Home Page) */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
}

.lang-btn-simple {
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: white;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.lang-btn-simple:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lang-btn-simple.active {
    background: white;
    color: var(--primary);
}

.lang-btn-simple:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.lang-separator {
    display: none;
}

.navbar.scrolled .lang-switch {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border);
}

.navbar.scrolled .lang-btn-simple {
    color: var(--foreground);
}

.navbar.scrolled .lang-btn-simple.active {
    background: var(--primary);
    color: white;
}

.navbar.scrolled .lang-btn-simple:focus-visible {
    outline-color: var(--primary);
}

.navbar.navbar-light-page .lang-switch {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--border);
}

.navbar.navbar-light-page .lang-btn-simple {
    color: var(--foreground);
}

.navbar.navbar-light-page .lang-btn-simple.active {
    background: var(--primary);
    color: white;
}

.navbar.navbar-light-page .lang-btn-simple:focus-visible {
    outline-color: var(--primary);
}

/* Language Dropdown */
.language-dropdown {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--foreground);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.lang-btn:hover {
    background-color: var(--secondary);
    border-color: var(--primary);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    min-width: 180px;
    /* Slightly wider */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    z-index: 1001;
    /* Ensure above other elements */
}

.lang-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-menu button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--foreground);
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.lang-menu button:hover {
    background-color: var(--secondary);
    color: var(--primary);
}

.lang-menu button.active {
    background-color: var(--primary);
    color: var(--card-foreground);
}

/* Catalog Button */
.catalog-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.2rem;
    background-color: var(--primary);
    color: var(--card-foreground) !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.catalog-btn .icon {
    width: 1rem;
    height: 1rem;
    filter: brightness(0) invert(1);
}

.catalog-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

.catalog-btn::after {
    display: none !important;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mobile-menu-btn .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--foreground);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background-color: var(--background);
    padding: 6rem 2rem 2rem;
    box-shadow: var(--shadow-lg);
    transition: right var(--transition-normal);
    z-index: 1100;
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 1090;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu a {
    display: block;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
}

.mobile-menu .mobile-lang {
    display: flex;
    gap: 0.5rem;
    padding: 1.5rem 0;
    flex-wrap: wrap;
}

.mobile-menu .mobile-lang button {
    padding: 0.6rem 1rem;
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mobile-menu .mobile-lang button:hover {
    background-color: var(--primary);
    color: var(--card-foreground);
}

.mobile-menu .mobile-lang button.active {
    background-color: var(--primary);
    color: var(--card-foreground);
    border-color: var(--primary);
}

.mobile-menu .catalog-btn {
    display: inline-flex;
    /* Changed from block */
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.75rem;
    /* Better padding */
}

/* ================================
   Hero Section
   ================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8rem 2rem 4rem;
    position: relative;
    background-image: url('assets/images/hero-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.hero-content {
    max-width: 800px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.5s;
    position: relative;
    z-index: 2;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.hero p {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: white;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* ================================
   Marquee Strip
   ================================ */
.marquee-container {
    background-color: transparent;
    padding-top: 0.8rem;
    padding-bottom: 1rem;
    overflow: hidden;

}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 35s linear infinite;
}

.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
}

.marquee-content a {
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.marquee-content a:hover {
    color: var(--primary-dark);
    text-decoration: none;
}

.marquee-dot {
    color: var(--primary);
    font-size: 0.5rem;
    opacity: 0.5;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ================================
   Scroll Reveal Animation Classes
   ================================ */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ================================
   Products Section
   ================================ */
.products-section {
    padding: 1rem 0;
}

.product {
    padding: 4rem 2rem;
    border-bottom: 1px solid var(--border);
}

.product:last-child {
    border-bottom: none;
}

.product-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.product-right .product-content {
    direction: rtl;
}

.product-right .product-content>* {
    direction: ltr;
}

/* Product Animation States */
.product-left .product-content {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-right .product-content {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product.animate .product-content {
    opacity: 1;
    transform: translateX(0);
}

/* Product Text */
.product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--primary-light);
    border-radius: 50%;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.product-text h2 {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

.product-description {
    font-size: 1.05rem;
    color: var(--foreground);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    opacity: 0.85;
}

.product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.product-features li {
    padding: 0.35rem 1rem;
    font-size: 0.9rem;
    color: var(--foreground);
    border: 1px solid hsl(120, 40%, 60%);
    border-radius: 2rem;
    background-color: rgba(255, 255, 255, 0.5);
}

.product-details {
    padding: 1.5rem 0;
    margin-top: 1rem;
    border-top: 1px solid var(--border);
}

.product-details h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.product-details ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-details li {
    font-size: 0.95rem;
    color: var(--foreground);
    padding-left: 1.25rem;
    position: relative;
    opacity: 0.85;
}

.product-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 600;
}

/* Product Images */
.product-images {
    width: 100%;
}

.image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem;
}

.image-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius);
    background-color: var(--secondary);
    transition: transform var(--transition-normal);
}

.image-grid img:hover {
    transform: scale(1.02);
}

.image-grid img:first-child {
    grid-column: 1 / -1;
    height: 300px;
}

/* ================================
   Catalog CTA Section
   ================================ */
.catalog-cta {
    text-align: center;
    padding: 5rem 2rem;
}

.catalog-cta p {
    font-size: 1.2rem;
    color: var(--foreground);
    margin-bottom: 2rem;
    opacity: 0.85;
}

.catalog-btn-large {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background-color: var(--primary);
    color: var(--card-foreground);
    font-size: 1.1rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.catalog-btn-large:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.catalog-btn-large .icon {
    width: 1.25rem;
    height: 1.25rem;
    filter: brightness(0) invert(1);
}

/* ================================
   Footer
   ================================ */
.footer {
    background-color: var(--card);
    color: var(--card-foreground);
    padding: 2rem 2rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.35rem;
}

.footer-logo .icon {
    width: 1.75rem;
    height: 1.75rem;
    filter: brightness(0) invert(1);
}

.footer-copyright {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* ================================
   Scroll to Top Button
   ================================ */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    background-color: white;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 4px;
    /* Square with slight radius */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    z-index: 900;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background-color: var(--primary);
    color: white;
    transform: translateY(-3px);
}

.scroll-to-top .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: inherit;
    /* Allow color change on hover */
}

/* ================================
   Buttons
   ================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

/* Primary Button - Dark green bg, white text */
.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-primary .icon {
    filter: brightness(0) invert(1);
}

/* Secondary Button - Light gray bg, dark text */
.btn-secondary {
    background-color: var(--secondary);
    color: var(--foreground);
}

.btn-secondary:hover {
    background-color: var(--muted);
}

/* Ghost Button - Transparent, hover shows accent bg */
.btn-ghost {
    background-color: transparent;
    color: var(--foreground);
}

.btn-ghost:hover {
    background-color: var(--accent);
}

/* Button Sizes */
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn-wide-arrow {
    background-color: var(--primary);
    color: white;
    padding: 1rem 2rem;
    min-width: 280px;
    justify-content: center;
    gap: 1rem;
    font-size: 1.05rem;
}

.btn-wide-arrow:hover {
    background-color: var(--primary-dark);
}

.btn-wide-arrow .icon {
    filter: brightness(0) invert(1);
    width: 1.25rem;
    height: 1.25rem;
}

.btn-icon {
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

/* Active Nav Link */
.nav-links>a.active {
    color: var(--primary);
}

.nav-links>a.active::after {
    width: 100%;
}

/* ================================
   Page Header
   ================================ */
.page-header {
    padding: 8.5rem 2rem 1rem;
    text-align: center;
    background-color: var(--background);
}

.page-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

.page-header p {
    font-size: 1.15rem;
    color: var(--foreground);
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}

/* ================================
   About Section
   ================================ */
.about-section {
    padding: 5rem 2rem;
    background-color: var(--background);
}

.about-header {
    text-align: center;
    margin-bottom: 4rem;
}

.about-header h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.about-header p {
    font-size: 1.1rem;
    color: var(--foreground);
    opacity: 0.8;
}

.about-stack {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto 4rem;
}

.about-item {
    padding: 1rem 0;
}

.about-item-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    justify-content: flex-start;
    /* Icon left */
}

.about-item-header .about-card-icon {
    font-size: 2rem;
    margin-bottom: 0;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-item-header h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}

.about-item p {
    font-size: 1.05rem;
    color: var(--foreground);
    opacity: 0.85;
    line-height: 1.8;
    text-align: justify;
    /* Or center? User said "pasusi centrirani" but image looks justified or left. "Zaposleni" text in image looks left aligned but maybe center? User explicit request "pasusi centrirani" usually means text-align: center. Let's do left for readability as it is a block of text, but wait, the prompt says "pasusi centrirani". I will use text-align: left for the block flow but lets check the image again. The image shows text blocks that are quite wide. If I center align long text it looks bad. I will stick to text-align: left (or justify) for the text block itself, but maybe the container is centered? "pasusi centrirani, jedan ispod drugog". I'll default to left alignment for text content as it's standard for readability, but center the container. Wait, if user insists on "pasusi centrirani" literally, I should probably center it? Let's try text-align: left for now as it's safer for design, and if they complain I'll change to center. Actually, the prompt says "pasusi centrirani" - I should probably respect it. */
    text-align: left;
}

/* Partner List Grid */
.partner-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem 2rem;
    list-style: none;
    margin-top: 1rem;
}

.partner-list li {
    font-size: 0.95rem;
    color: var(--foreground);
    position: relative;
    padding-left: 1.5rem;
    display: flex;
    align-items: center;
}

.partner-list li::before {
    content: '✓';
    /* Or use an SVG background */
    position: absolute;
    left: 0;
    color: var(--primary);
    /* Green checkmark */
    font-weight: bold;
}

/* Kooperanti Check List */
.check-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.check-list li {
    font-size: 0.95rem;
    color: var(--foreground);
    position: relative;
    padding-left: 1.5rem;
}

.check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* Specific overwrite if they really want centered text lines */
.about-item.text-center p {
    text-align: center;
}


.about-section-divider {
    border: 0;
    height: 1px;
    background-color: var(--border);
    margin: 2rem auto;
    width: 100%;
}

.about-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin: 2rem 0 1.5rem;
}

.about-partners-title {
    margin: 0.75rem 0 0.5rem;
}

.about-cta {
    text-align: center;
    padding: 3rem 0;
    margin-top: 2rem;
}

.about-cta h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.about-cta p {
    font-size: 1.05rem;
    color: var(--foreground);
    opacity: 0.85;
    margin-bottom: 1.5rem;
}

/* ================================
   Contact Section
   ================================ */
.contact-section {
    padding-top: 0%;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: var(--background);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-card {
    padding: 2rem;
    text-align: center;
}

.contact-icon-wrapper {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    background-color: var(--primary-light);
    border-radius: 50%;
    color: var(--primary);
}

.contact-icon {
    font-size: 1.75rem;
}

.contact-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.contact-card p {
    font-size: 1rem;
    color: var(--foreground);
    opacity: 0.85;
    margin-bottom: 0.25rem;
}

.contact-card a {
    color: var(--primary);
    transition: color var(--transition-fast);
}

.contact-card a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ================================
   Map Section
   ================================ */
.map-section {
    padding: 0 2rem 4rem;
}

.map-container {
    max-width: 1200px;
    margin: 0 auto;
    height: 40rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.map-container iframe {
    display: block;
}

/* ================================
   Responsive Design
   ================================ */
@media (max-width: 1024px) {
    .product-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .product-right .product-content {
        direction: ltr;
    }

    .image-grid img:first-child {
        height: 250px;
    }

    .image-grid img {
        height: 180px;
    }

    .map-container {
        height: 30rem;
    }
}

@media (max-width: 768px) {

    .nav-center,
    .nav-right {
        display: none;
    }

    .navbar-container {
        display: flex;
        justify-content: space-between;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .navbar {
        padding: 1rem;
    }

    .hero {
        padding: 6rem 1.5rem 3rem;
        min-height: 70vh;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .page-header {
        padding: 8rem 1.5rem 3rem;
    }

    .about-section {
        padding: 3rem 1.5rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .product {
        padding: 3rem 1.5rem;
    }

    .product-text h2 {
        font-size: 1.5rem;
    }

    .image-grid {
        gap: 0.5rem;
    }

    .image-grid img:first-child {
        height: 200px;
    }

    .image-grid img {
        height: 140px;
    }

    .catalog-cta {
        padding: 3rem 1.5rem;
    }

    .contact-section {
        padding: 1.5rem 0.75rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .map-section {
        padding: 0 1.5rem 3rem;
    }

    .map-container {
        height: 25rem;
    }

    .footer {
        padding: 2rem 1.5rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .scroll-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
    }
}

@media (max-width: 480px) {
    .product-features {
        gap: 0.4rem;
    }

    .product-features li {
        font-size: 0.85rem;
        padding: 0.3rem 0.7rem;
    }

    .logo-text {
        font-size: 1.25rem;
        /* Reduce logo size to prevent overlap */
    }

    /* Defensive CSS: Additional logo protection on very small screens */
    .nav-logo-image {
        max-height: 2.5rem;
        /* Smaller max on narrow screens (40px) */
        height: clamp(2rem, 6vw, 2.5rem);
        /* More aggressive scaling */
    }

    .navbar {
        padding: 0.75rem 1rem;
        /* Ensure sufficient padding around logo */
    }

    .btn-wide-arrow {
        min-width: unset;
        /* Remove strict min-width */
        width: 100%;
        /* Full width on small screens */
        padding: 0.75rem 1.25rem;
        /* Adjust padding */
    }

    .image-grid img:first-child {
        height: 170px;
    }

    .image-grid img {
        height: 110px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }

    .map-container {
        height: 20rem;
    }
}