:root {
				--primary-color: #2c3e50;
				--secondary-color: #e74c3c;
				--light-color: #ecf0f1;
				--dark-color: #34495e;
				--transition: all 0.3s ease;
			}
			
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			}
			
			body {
				line-height: 1.6;
				color: #333;
				background-color: var(--light-color);
			}
			
			header {
				background-color: var(--primary-color);
				color: white;
				padding: 1rem;
				position: fixed;
				width: 100%;
				top: 0;
				z-index: 1000;
			}
			
			.container {
				width: 90%;
				max-width: 1200px;
				margin: 0 auto;
				padding: 0 20px;
			}
			
			.navbar {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.logo {
				font-size: 1.5rem;
				font-weight: bold;
			}
			
			.logo span {
				color: var(--secondary-color);
			}
			
			.nav-links {
				display: flex;
				list-style: none;
			}
			
			.nav-links li {
				margin-left: 20px;
			}
			
			.nav-links a {
				color: white;
				text-decoration: none;
				transition: var(--transition);
			}
			
			.nav-links a:hover {
				color: var(--secondary-color);
			}
			
			.hamburger {
				display: none;
				cursor: pointer;
				background: none;
				border: none;
				color: white;
				font-size: 1.5rem;
			}
			
			.hero {
				min-height: 100dvh;
				background: linear-gradient(to right bottom, #eef4ff, #3968cb, #10b3ac);
				display: flex;
				align-items: center;
				color: white;
				text-align: center;
				padding-top: 80px;
			}
			
			.hero-content {
				max-width: 1200px;
				margin: 0 auto;
			}
			
			.hero h1 {
				font-size: 3rem;
				margin-bottom: 1rem;
			}
			
			.hero p {
				font-size: 1.2rem;
				margin-bottom: 2rem;
				text-align: justify;
			}
			
			.btn {
				display: inline-block;
				background-color: var(--secondary-color);
				color: white;
				padding: 0.75rem 1.5rem;
				text-decoration: none;
				border-radius: 5px;
				transition: var(--transition);
				font-weight: bold;
				text-transform: uppercase;
				font-size: 0.9rem;
				letter-spacing: 1px;
			}
			
			.btn:hover {
				background-color: #c0392b;
				transform: translateY(-3px);
			}
			
			section {
				padding: 5rem 0;
			}
			
			.section-header {
				text-align: center;
				margin-bottom: 3rem;
			}
			
			.section-header h2 {
				font-size: 2.5rem;
				color: var(--primary-color);
				margin-bottom: 1rem;
			}
			
			.section-header p {
				color: #666;
				max-width: 700px;
				margin: 0 auto;
			}
			
			.services {
				background-color: white;
			}
			
			.services-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
				gap: 2rem;
			}
			
			.service-card {
				border-radius: 5px;
				overflow: hidden;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
				transition: var(--transition);
			}
			
			.service-card:hover {
				transform: translateY(-10px);
				box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
			}
			
			.service-img {
				height: 200px;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				background-color: #f2f2f2; /* placeholder */
				opacity: 0;
				transition: opacity 0.3s ease;
			}
			.service-img.bg-loaded {
				opacity: 1;
			}
			
			.service-content {
				padding: 1.5rem;
			}
					
			.service-content p {
				text-align: justify;
			}
			
			.service-content h3 {
				color: var(--primary-color);
				margin-bottom: 1rem;
			}
			
			.about {
				background-color: var(--light-color);
			}
			
			.about-container {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 3rem;
				align-items: center;
			}
			
		  
			.about-content h2 {
				color: var(--primary-color);
				margin-bottom: 1.5rem;
			}
			
			.about-content p {
				margin-bottom: 1rem;
			}
			
			.features {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem;
				margin-top: 2rem;
			}
			
			.feature {
				display: flex;
				align-items: center;
				margin-bottom: 1rem;
			}
			.feature-text a {
				text-decoration: none;
				color: black; 
			}
			.feature-icon::before {
				content: "✔";
				color: white;
				font-weight: bold;
			}
			.feature-icon {
				width: 50px;
				height: 50px;
				background-color: var(--secondary-color);
				color: white;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 1rem;
				font-size: 1.5rem;
			}
			
			.gallery {
				background-color: white;
			}
			
			.gallery-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
				gap: 1rem;
			}
			
			.gallery-item {
				height: 250px;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				border-radius: 5px;
				overflow: hidden;
				position: relative;
				cursor: pointer;
				background-color: #f2f2f2; /* placeholder */
				opacity: 0;
				transition: opacity 0.3s ease;
			}
			.gallery-item.bg-loaded {
				opacity: 1;
			}
			
			.gallery-item::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				opacity: 0;
				transition: var(--transition);
			}
			
			.gallery-item:hover::before {
				opacity: 1;
			}
			
			.opinion {
				background-color: var(--light-color);
			}
			
			.opinion-slider {
				max-width: 700px;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}
			
			.opinion-slide {
				background-color: white;
				padding: 2rem;
				border-radius: 5px;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
				text-align: center;
				display: none;
			}
			
			.opinion-slide.active {
				display: block;
				animation: fadeIn 0.5s ease;
			}
			
			@keyframes fadeIn {
				from { opacity: 0; }
				to { opacity: 1; }
			}
			
			.opinion-content {
				font-style: italic;
				margin-bottom: 1.5rem;
			}
			
			.opinion-author {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.author-img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				margin-right: 1rem;
				background-color: #ddd;
				background-size: cover;
			}
			
			.author-info h4 {
				color: var(--primary-color);
			}
			
			.slider-controls {
				display: flex;
				justify-content: center;
				margin-top: 2rem;
			}
			
			.slider-btn {
				background-color: var(--primary-color);
				color: white;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 0.5rem;
				cursor: pointer;
				transition: var(--transition);
			}
			
			.slider-btn:hover {
				background-color: var(--secondary-color);
			}
			
			.contact {
				background-color: white;
			}
			
			.contact-container {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 3rem;
			}
			
			.contact-info h3 {
				color: var(--primary-color);
				margin-bottom: 1.5rem;
			}
			
			.contact-detail {
				display: flex;
				align-items: center;
				margin-bottom: 1rem;
			}
			.concact-nodecoration{
				color: black;
				text-decoration: none;
			}
			.contact-icon {
				width: 40px;
				height: 40px;
				background-color: var(--primary-color);
				color: white;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 1rem;
			}
			
			.form-group {
				margin-bottom: 1.5rem;
			}
			
			.form-control {
				width: 100%;
				padding: 0.75rem;
				border: 1px solid #ddd;
				border-radius: 5px;
				font-size: 1rem;
			}
			
			/* styl dla obslugi błedów w formularzu wysyłki wiadomości*/
			.form-error {
				color: #ff4d4d;
				font-size: 13px;
				margin-top: 5px;
			}
			
			textarea.form-control {
				resize: vertical;
				min-height: 150px;
			}
			
			.map {
				height: 300px;
				background-color: #ddd;
				margin-top: 2rem;
				border-radius: 5px;
			}
			
			footer {
				background-color: var(--dark-color);
				color: #bbb;
				padding: 3rem 0;
			}
			
			.footer-container {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
				gap: 2rem;
			}
			
			.footer-col h3 {
				margin-bottom: 1.5rem;
				position: relative;
				padding-bottom: 0.5rem;
			}
			
			.footer-col h3::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 50px;
				height: 2px;
				background-color: var(--secondary-color);
				
			}
			
			.footer-col ul {
				list-style: none;
			}
			
			.footer-col ul li {
				margin-bottom: 0.5rem;
			}
			
			.footer-col ul li a {
				color: #bbb;
				text-decoration: none;
				transition: var(--transition);
			}
			
			.footer-col ul li a:hover {
				color: var(--secondary-color);
				padding-left: 5px;
			}
			
			.social-links {
				display: flex;
				margin-top: 1rem;
			}
			
			.social-link {
				width: 40px;
				height: 40px;
				background-color: var(--primary-color);
				color: white;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 0.75rem;
				transition: var(--transition);
			}
			
			.social-link:hover {
				background-color: var(--secondary-color);
				transform: translateY(-5px);
			}
			
			.copyright {
				text-align: center;
				padding-top: 2rem;
				margin-top: 2rem;
				border-top: 1px solid rgba(255, 255, 255, 0.1);
				color: #bbb;
			}
			
			/* Modal */
			.modal {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.8);
				z-index: 1100;
				justify-content: center;
				align-items: center;
			}
			
			.modal.active {
				display: flex;
			}
			
			.modal-content {
				max-width: 80%;
				max-height: 80%;
			}
			
			.modal-content img {
				max-width: 100%;
				max-height: 100%;
				object-fit: contain;
			}
			
			.close-modal {
				position: absolute;
				top: 20px;
				right: 20px;
				color: white;
				font-size: 2rem;
				cursor: pointer;
			}
			
			/* Back to top button */
			.back-to-top {
				position: fixed;
				bottom: 20px;
				right: 20px;
				width: 50px;
				height: 50px;
				background-color: var(--secondary-color);
				color: white;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				opacity: 0;
				transition: var(--transition);
				z-index: 999;
				font-size: 1.7rem;
			}
			
			.back-to-top.active {
				opacity: 1;
			}
			
			/* Mobile styles */
			@media (max-width: 768px) {
				.navbar {
					position: relative;
				}
				
				.nav-links {
					display: none;
					position: absolute;
					top: 100%;
					left: 0;
					width: 100%;
					background-color: var(--primary-color);
					flex-direction: column;
					padding: 1rem 0;
					text-align: center;
				}
				
				.nav-links.active {
					display: flex;
				}
				
				.nav-links li {
					margin: 0.5rem 0;
				}
				
				.hamburger {
					display: block;
				}
				
				.hero h1 {
					font-size: 2rem;
				}
				
				.about-container,
				.contact-container {
					grid-template-columns: 1fr;
				}
				
				
				.features {
					grid-template-columns: 1fr;
				}
			}
			
			/* Przyciski nawigacji w modalu */
				.modal-prev,
				.modal-next {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					background-color: rgba(0, 0, 0, 0.5);
					color: white;
					border: none;
					font-size: 2rem;
					padding: 10px 15px;
					cursor: pointer;
					border-radius: 50%;
					z-index: 1001; /* nad zdjęciem */
					transition: background-color 0.3s;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50px;
					height: 50px;
				}
				.modal-prev {
					left: 10px; /* 10px od lewej krawędzi */
				}
				.modal-next {
					right: 10px; /* 10px od prawej krawędzi */
				}
				.modal-prev:hover,
				.modal-next:hover {
					background-color: rgba(0, 0, 0, 0.8);
				}
				/* Ukrywanie przycisków gdy niepotrzebne */
				.modal-prev[style*="display: none"],
				.modal-next[style*="display: none"] {
					display: none !important;
				}
				/* Dodatkowo: upewnij się, że modal-content ma pozycję względną, aby przyciski pozycjonowały się względem niego */
				.modal-content {
					position: relative;
					max-width: 90vw;
					max-height: 90vh;
				}
				.modal-content img {
					display: block;
					max-width: 100%;
					max-height: 90vh;
					margin: auto;
				}
				/* Styl dla samego modala – tło i wyśrodkowanie */
				.modal {
					display: none;
					position: fixed;
					z-index: 1000;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.9);
					align-items: center;
					justify-content: center;
				}
				.modal.active {
					display: flex;
				}
				.close-modal {
					position: absolute;
					top: 20px;
					right: 30px;
					color: white;
					font-size: 40px;
					font-weight: bold;
					cursor: pointer;
					z-index: 1002;
				}
				/* Styl do banera ciasteczek*/
				body.no-scroll {
					overflow: hidden;
				}
				/* Przyciemnienie */
				#cookie-overlay {
					position: fixed;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.5);
					z-index: 9998;
					display: none;
				}
				/* Baner */
				.cookie-banner {
					position: fixed;
					bottom: 0;
					left: 0;
					width: 100%;
					background: #111;
					color: #fff;
					padding: 20px;
					display: none;
					justify-content: center;
					align-items: center;
					z-index: 9999;
					box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
				}
				.cookie-content {
					max-width: 1200px;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 20px;
				}
				.cookie-banner button {
					background: green;
					color: white;
					border: none;
					padding: 12px 22px;
					cursor: pointer;
					font-weight: bold;
					border-radius: 4px;
					transition: 0.2s;
				}
				.cookie-banner button:hover {
					opacity: 0.9;
				}
				@media (max-width: 768px) {
					.cookie-content {
						flex-direction: column;
						text-align: center;
					}
				}
				/* Styl do banera ciasteczek*/