:root {
            --primary-blue: #2A5CAA;
            --accent-blue: #3F88D0;
            --light-bg: #f8f9fc;
            --gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
        }

        .navbar {
            background: var(--gradient) !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .service-card {
            transition: transform 0.3s ease;
            border-radius: 12px;
            padding: 2rem;
            background: white;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            border: 1px solid #eef2f6;
        }

        .service-card:hover {
            transform: translateY(-5px);
        }

        .icon-box {
            width: 80px;
            height: 80px;
            background: var(--gradient);
            border-radius: 16px;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .contact-section {
            background: var(--light-bg);
            border-radius: 20px;
            overflow: hidden;
        }

        .footer {
            background: #1a1a1a;
        }

        .social-link {
			color: #333 !important;
            transition: opacity 0.3s ease;
            background: var(--accent-blue) !important;
            margin: 0 5px;
        }

        .content h3 {
            color: var(--primary-blue) !important;
        }

        .form-input {
            border-radius: 8px;
            border: 1px solid #e0e0e0;
        }

        .form-input:focus {
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 2px rgba(63, 136, 208, 0.25);
        } 
		.navbar-menu {
			background: var(--gradient);
		}

		html {
			scroll-behavior: smooth;
		}

		.navbar-item {
			position: relative;
			overflow: hidden;
		}

		.navbar-item::after {
			content: '';
			position: absolute;
			width: 100%;
			transform: scaleX(0);
			height: 2px;
			bottom: 0;
			left: 0;
			background-color: white;
			transform-origin: bottom right;
			transition: transform 0.3s ease-out;
		}

		.navbar-item:hover::after {
			transform: scaleX(1);
			transform-origin: bottom left;
		}
		.navbar-menu .navbar-item {
			transition: background-color 0.3s ease, color 0.3s ease;
		}

		.navbar-menu .navbar-item:hover {
			background-color: rgba(255, 255, 255, 0.15);
			color: #ffffff !important;
		}
		.navbar-item.empty::after {
			display: none !important;
		}

		.navbar-item.empty:hover {
			background: none !important;
			color: inherit !important;
		}

        .navbar {
            background: #1a1a1a !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .navbar-menu {
            background: #1a1a1a;
        }
        .feature-card {
            border-left: 4px solid #276cd3;
            transition: all 0.3s ease;
            background: #f8f9ff;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(39,108,211,0.1);
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #276cd3;
        }
        
        .client-logo-box {
            border: 2px solid #f0f4ff;
            border-radius: 12px;
            padding: 1.5rem;
            transition: all 0.3s ease;
        }
        
        .client-logo-box:hover {
            border-color: #276cd3;
            background: #fff;
        }
        .foto {
            position: relative;
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .fotos {
            position: absolute; 
            bottom: -40px; 
            left: -40px; 
            width: 80%; 
            height: 80%; 
            z-index: 0; 
            opacity: 0.1;
        }
        .dashed {
            text-decoration:underline;
        }
        .hero-network {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
            url('../../../images/elektryczne.jpg') center/cover;
            background-attachment: fixed;
        }
        .hero-button-solid,
        .hero-button-transparent {
            border-radius: 6px;
            padding: 1rem 2rem;
            font-weight: 500;
            border: 2px solid var(--primary-blue);
        }

        .hero-button-solid {
            background-color: var(--primary-blue);
        }

        .hero-button-transparent {
            background-color: transparent;
            color: white;
            border-color: rgba(255,255,255,0.3);
        }

        .hero-button-transparent:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }    @keyframes cardAppear {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .service-card {
        opacity: 0;
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }

    .service-card.active {
        animation: cardAppear 0.6s ease-out var(--delay) forwards;
    }    
    .stat-number {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .stat-number.visible {
        opacity: 1;
        transform: translateY(0);
    }