@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Scope+One&display=swap');


html {
    scroll-behavior: auto; /* Test to see if smooth scroll affects it */
	 overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: auto;
}
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
			
        }
h1{
    font-family: 'Anton', sans-serif;
}
body{
	display: flex;
    flex-direction: column;
	align-items:center;
	z-index:-1001;
	height: auto; /* Allow content to expand the page */
    min-height: 100vh; /* Ensures full viewport height on short pages */
            color: #000;
            background-color: #fff;
            line-height: 1.6;
}
       /* Hero Section */
        .hero {
            
             background: 
        url('./Images/img10.jpg') center/cover no-repeat;
            display: flex;
            align-items: center;
            padding: 0 5%;
			width: 100%;
            height: 100vh;
			font-family: 'Libre Bodoni', regular;
        }
		
		.gallery-container {
			max-width: 1000px;
			margin: 0 auto;
			padding: 20px;
		  }
		  
		  .gallery-title {
			font-size: 2em;
			text-align: center;
			margin-bottom: 20px;
		  }
		  
		  .gallery-row {
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			gap: 15px;
			margin-bottom: 15px;
		  }
		  
		  .gallery-row.center-row {
			justify-content: center;
		  }
		  
		  .gallery-item {
			position: relative;
			overflow: hidden; /* Prevents image from overflowing when zoomed */
			flex: 1 1 calc(33.333% - 10px);
			max-width: calc(33.333% - 10px);
			border-radius: 8px;
		  }
		  
		  .gallery-item img {
			width: 100%;
			height: auto;
			display: block;
			transition: transform 0.4s ease;
		  }
		  
		  .gallery-item:hover img {
			transform: scale(1.08); /* Subtle zoom */
			cursor:pointer;
		  }
		  /* Responsive */
		  @media (max-width: 768px) {
  
			.gallery-row {
			  /* Pozwalamy elementom przechodzić do nowej linii */
			  flex-wrap: wrap; 
			}
		  
			.gallery-item {
			  /* Ustawiamy szerokość na 50% minus połowa odstępu (gap) */
			  /* Dzięki temu zmieszczą się idealnie dwa obok siebie */
			  flex: 0 0 calc(50% - 8px);
			  max-width: calc(50% - 8px);
			  
			  /* Dodatkowy margines na dole, żeby rzędy się nie sklejały */
			  margin-bottom: 15px; 
			}
		  }
		  
        .hero-content {
            max-width: 600px;
			
        }
 .hero-content1 h3{
            font-size: 30px;
			
        }
        .hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
			font-family: 'Libre Bodoni', bold;
			color: white;
        }
		.hero1 {
            
             background: 
        url('./Images/slu.jpg') center/cover no-repeat;
            display: flex;
            align-items: center;
			justify-content:flex-end;
            padding: 0 5%;
			width: 100%;
            height: 100vh;
			font-family: 'Libre Bodoni', regular;
        }
		

        .hero-content1 {
            max-width: 800px;
			font-size:1.5rem;
			background-color:white;
			padding:50px 200px;
			text-align:center;
			margin-top:500px;
        }
		.centered-div {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin: 50px auto;
			max-width: 600px;
			padding: 20px;
			font-family: 'Libre Bodoni', regular;
			font-size: 20px;
		}
		.button {
			background-color: black;
			color: white;
			padding: 10px 20px;
			text-decoration: none;
			margin-top: 15px;
			border: none;
			cursor: pointer;
			font-size: 16px;
    }
	 button {
            padding: 10px 20px;
            border: none;
            background-color: black;
            color: white;
            cursor: pointer;
			z-index: 16;
			margin-right:10px;
        }

		.button:hover {
			background-color: #333;
		}

		.vox {
			margin: 50px;
			  display: flex;
            max-width: 1500px;
            background-color: #f3f3f3;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
           
            overflow: visible; /* Allow the image to extend */
            gap:200px;
           
        }
		.vox3 {
			margin: 50px;
			  display: flex;
            max-width: 1500px;
            background-color: #f3f3f3;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
           
            overflow: visible; /* Allow the image to extend */
            gap:242px;
           
        }
		.voxr {
			margin: 50px 50px 50px 90px;
			  display: flex;
            max-width: 1500px;
            background-color: #f3f3f3;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
           
            overflow: visible; /* Allow the image to extend */
            gap:260px;
           
        }
		.voxple {
			margin: 50px 50px 50px 90px;
			  display: flex;
            max-width: 1500px;
            background-color: #fff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
           
            overflow: visible; /* Allow the image to extend */
            gap:0px;
           
        }
        .text-section {
           flex: 1;
            padding: 70px 100px 150px 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
			align-items: flex-start;
			position:relative;
        }
        .text-section h2 {
            font-size: 20px;
            color: #333;
        }
        .text-section p {
            margin: 10px 0;
            font-size: 20px;
            color: #666;
        }
		.text-section h3 {
            font-size: 30px;
           
        }
        .text-section ul {
            margin: 10px 0;
            padding-left: 20px;
            font-size: 18px;
            color: #444;
        }
        .price {
			position:absolute;
			bottom:40px;
			right:-150px;
			
           
            font-weight: bold;
            font-size: 20px;
            background: #fff;
            color: #000000;
            display: inline-block;
            padding: 8px 16px;
            border-radius: 4px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
			
        }
		.pricer {
			position:absolute;
			bottom:40px;
			right:40px;
			
           
            font-weight: bold;
            font-size: 20px;
            background: #fff;
            color: #000000;
            display: inline-block;
            padding: 8px 16px;
            border-radius: 4px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
			
        }
        .image-section {
            flex: 1.3;
            background: url('./Images/22.jpg') no-repeat center/cover;
			 position: relative;
            margin: -20px -20px -20px 0;
            
        }
		.image-section2 {
            flex: 1.3;
            background: url('./Images/212.jpg') no-repeat center/cover;
			 position: relative;
            margin: -20px 0px -20px -20px;
            
        }
		 .image-section3 {
            flex: 1.3;
            background: url('./Images/107.jpg') no-repeat center/cover;
			 position: relative;
            margin: -20px -20px -20px 0;            
        }
		.image-section4 {
			flex: 1;
            background: url('./Images/112.jpg') no-repeat center;
			background-size: 150% 100%; /* 150% width, auto height */
			position: relative;
			margin: -20px 140px -20px -20px;
			transform: scaleX(1.5); /* Scales the width by 150% */
			transform-origin: left; /* Keeps the scale from the left side */
				
        }
        @media (max-width: 768px) {
            .vox3 {
				display: flex;
				/* column-reverse sprawia, że elementy układają się w pionie, 
				   ale w odwrotnej kolejności: dolny div (zdjęcie) idzie na górę */
				flex-direction: column-reverse; 
				width: 100%;
				max-width: 100%;
				margin: 20px 0; /* Zmniejszamy marginesy zewnętrzne */
				gap: 0;
			}
			.vox {
				display: flex;
				/* column-reverse sprawia, że elementy układają się w pionie, 
				   ale w odwrotnej kolejności: dolny div (zdjęcie) idzie na górę */
				flex-direction: column-reverse; 
				width: 100%;
				max-width: 100%;
				margin: 20px 0; /* Zmniejszamy marginesy zewnętrzne */
				gap: 0;
			}
			.voxr {
				display: flex;
				/* column-reverse sprawia, że elementy układają się w pionie, 
				   ale w odwrotnej kolejności: dolny div (zdjęcie) idzie na górę */
				flex-direction: column; 
				width: 100%;
				max-width: 100%;
				margin: 20px 0; /* Zmniejszamy marginesy zewnętrzne */
				gap: 0;
			}
			.voxple {
				display: flex;
				/* column-reverse sprawia, że elementy układają się w pionie, 
				   ale w odwrotnej kolejności: dolny div (zdjęcie) idzie na górę */
				flex-direction: column; 
				width: 100%;
				max-width: 100%;
				margin: 20px 0; /* Zmniejszamy marginesy zewnętrzne */
				gap: 0;
			}
			
            .image-section {
                width: 100%;
				/* Musimy nadać wysokość, bo div jest pusty w środku */
				height: 300px; 
				/* Resetujemy ujemne marginesy, żeby zdjęcie nie wychodziło poza ekran */
				margin: 0; 
				flex: none;
            }
			.image-section2 {
                width: 100%;
				/* Musimy nadać wysokość, bo div jest pusty w środku */
				height: 300px; 
				/* Resetujemy ujemne marginesy, żeby zdjęcie nie wychodziło poza ekran */
				margin: 0; 
				flex: none;
            }
			.image-section3 {
				width: 100%;
				/* Musimy nadać wysokość, bo div jest pusty w środku */
				height: 300px; 
				/* Resetujemy ujemne marginesy, żeby zdjęcie nie wychodziło poza ekran */
				margin: 0; 
				flex: none;
			}
			.image-section4{
                width: 100%;
				/* Musimy nadać wysokość, bo div jest pusty w środku */
				height: 300px;
				/* Resetujemy ujemne marginesy, żeby zdjęcie nie wychodziło poza ekran */
				margin: 0; 
				flex: none;
				background-size: auto; /* 150% width, auto height */
			
			
			transform: scaleX(1); /* Scales the width by 150% */
			
            }
			.imagefaq {
                display:none;
            }
			.faq {
            width: 100% !important;
            padding: 50px 100px;
			background-color: #f3f3f3;
        }
		.hero-content1 {
            max-width: 600px;
			font-size:1rem;
			background-color:white;
			padding:30px 30px;
			text-align:center;
			margin-top:200px;
        }
		
		.price{
			right: 20px;
        bottom: 20px;
		}
		.text-section {
			width: 100%;
			padding: 40px 20px 80px 20px; /* Zmniejszamy padding, zostawiamy miejsce na cenę na dole */
		}
		.faq{
			padding:20px!important;
		}
        }
        .containerfaq {
            display: flex;
            width: 80%;
            max-width: 1100px;
			margin-bottom:100px;
			font-family: 'Libre Bodoni', regular;
        }
        .faq {
            width: 50%;
            padding: 50px 100px;
			background-color: #f3f3f3;
        }
		.faqcontent{
			padding: 20px 0;
			font-size: 18px;
		}
		.faqcontent h4{
			padding:10px 0;
			border-bottom: 2px solid #e4e4e4;
			border-top: 2px solid #e4e4e4;
			margin-bottom:10px;
		}
        .imagefaq {
            width: 50%;
            background: url('./Images/111.jpg') no-repeat center center/cover;
        }
        .buttons {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        
        .packages {
            padding: 9rem 5%;
        }

        .section-heading {
            text-align: center;
            margin-bottom: 9rem;
        }
		.section-heading h1{
            font-size: 4rem;
            
        }

        .package-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .package-card {
            border: 2px solid #333;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s;
        }

        .package-card:hover {
            transform: translateY(-5px);
        }

        .package-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .package-card:hover .package-image {
            transform: scale(1.05);
        }

        .package-content {
            padding: 1.5rem;
        }

     

        /* FAQ Section */
        .faq-section {
            padding: 5rem 5%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }

        .faq-image {
            width: 100%;
            height: 500px;
            object-fit: cover;
            border-radius: 10px;
        }

        .faq-content {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
         header {
			position: absolute;
            display: flex;
            justify-content:flex-end;
            align-items: center;
            background-color: #fff;
            color: white;
			width: 100%;
			font-family: "Raleway", sans-serif;
			font-weight: 300;
			font-size: 20px;
			left:0;
			top:0;
			padding-bottom:3rem;
			
        }

        .logo {
			padding-left: 3vw;
			padding-top: 2vw;
			animation: backInDown;
            animation-duration: 2s;
			z-index:2;
			margin-right:auto;
			
        }

        nav ul {
            list-style-type: none;
			margin-right:9vw;
			margin-top:3vw;
            padding: 0;
            display: flex;
			
        }
		
        nav ul li {
            margin-left: 9vw;
			
        }

        nav ul li a {
            text-decoration: none;
            color: black;
            padding: 5px 10px;
			transition: 0.5s ease;
			display:flex;
			align-items:center;
			
        }

        nav ul li a:hover {
            
            font-weight: 600;
        }
.sidebar {
    display: flex; /* Default hidden */
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: white;
    z-index: 9999;
    padding: 0;
    margin: 0;
	overflow: hidden; 
    max-height:0;
    opacity: 0;                /* Make it invisible */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth height and fade animation */
    flex-direction: column; /* Align items from top to bottom */
    
    align-items: center; /* Center items horizontally */
}
.sidebar.visible {
    max-height: 100vh; /* Slide into view */
	opacity:1;
}
.sidebar li {
    list-style: none;
    margin: 15px 0; /* Vertical spacing between menu items */
}

.sidebar li a {
    text-decoration: none;
    color: black;
    font-size: 18px;
    display: block;
    padding: 10px 20px;
    transition: background 0.3s ease;
}

.sidebar li a:hover {
    background: #555;
    border-radius: 5px;
}

		.menu-button{
			display:none;
		}
		.logoimg{
			height:70px;
		}
		@media(max-width:1200px)
		{
			body {
		display: flex!important;
		flex-direction: column!important;
			}
			
			.hideOnMobile{
				display: none;
			}
			.showOnMobile{
				display: inline;
			}
			.menu-button{
				display:block;
				padding-right: 30px;
			padding-top: 50px;
			}
			.container{
				display:none !important;
				height:0 !important;
			}
			footer {
			
			position: relative !important;
            background-color: white!important;
			
			
			
			
			}
			 .copy{
			margin-left:0px!important;	
			width: 50px!important; /* Adjust width */
			height: 50px!important; /* Adjust height */
		}
		.UV{
			margin: auto!important; /* Center the UV element */
			width: 150px!important;
			height:17px!important;
		}
		
		.inst{
			margin-right:0px!important;
			width: 40px!important; /* Adjust width */
			height: 40px!important; /* Adjust height */
		}
		.cr{
		position: relative !important;
		text-align: center;
		font-size: 10px;
		color: #6c757d; /* Example muted text color */
		margin-top: 10px; /* Space between footer and copyright */
		margin-left:1.3vw;
		}
			nav ul{
				margin-right:0px;
				margin-top:0vw;
			}
			.szablon{
		
			position:relative;
			top:00px!important;
			font-size:10px;		
			margin-top:200px;
		}
		nav ul li {
            padding: 1vw;
			
        }
        .logo {
			padding-left: 30px;
			padding-top: 30px;			
		}
		.logoimg{
			height:80px;
		}
		header{
			
			padding-bottom:30px;
		}
		.szablon{
			width:90vw!important;
			flex:1;
			
		}
		.row.single {
            height: 60vw!important;
			width: 90.5vw!important;
        }
		.row.single img{
           margin-left:0px!important;
        }
		.row.double {
            height: 60vw!important;
			width: 90vw!important;
        }
		.row.double img{
            height: 60vw!important;
			margin-left:0px!important;
			width: 44.5vw!important;
        }
		}
		
		
          footer {
			
			position: fixed;
            background-color: transparent;
            color: white;
			text-align:center;
            
			bottom: 0;
			right:0;
			width: 100%;
			z-index:15;
			display: flex;
            justify-content: space-between;
            align-items: center;
			
        }
		.copy{


			
			color: black;
			font-family: "Source Serif 4", serif;
			font-size:15px;
			opacity:1;
			
			margin-left: 10px;
			margin-top: 2vw;
			margin-bottom: 0.5vw;
			transition: background-image 0.3s ease; /* Smooth transition */
			width: 2.25vw; /* Adjust width */
			height: 2.25vw; /* Adjust height */
			background-image: url(./Images/facebook.png); /* Default image */
			background-size: cover;
		}
		.copy:hover{

			background-image: url(./Images/fb.png); /* Default image */
			cursor:pointer;
		
		
		}
		.UV{
			
			display:inline-block;
			background-image: url(./Images/UV3.png); /* Default image */
			background-size: cover;
		width: 8.75vw;
			height:1vw;
			margin: 0px auto -10px; /* Center the UV element */
			animation: contentslide 0.5s ease-in-out 0.5s forwards;
		}
		.UV2{
			
			display:none;
			background-image: url(./Images/UV3.png); /* Default image */
			background-size: cover;
			width: 172px;
			height:20px;
			margin:auto;
			z-index:1000;
			
			
		}
        .inst {
			margin-right:15px;
			margin-bottom:0.5vw;
			margin-top:2vw;
		
         width: 2vw; /* Adjust width */
		height: 2vw; /* Adjust height */
		background-image: url(./Images/instagram.png); /* Default image */
		background-size: cover;
		transition: background-image 0.3s ease; /* Smooth transition */
        }

        .inst:hover {
            
			background-image: url(./Images/color.png)
        }
		.cr
		{
		font-family: "Raleway", sans-serif;
			font-weight: 300;
		 position: absolute; /* Make it independent of normal content flow */
		bottom: 10px; /* Place it just below the fixed footer */
		
		left: 50.30%;
		transform: translateX(-50%); /* Center it horizontally */
		font-size: 10px;
		color: #6c757d;
		animation: contentslidecr 0.5s ease-in-out 0.5s forwards;
		}
        
		.szablon{
            width: 45vw;
            display: flex;
            flex-direction: column;
            gap: 10px; /* Gap between rows */
			animation: contentslidein 0.5s ease-out 2s forwards;
			position:relative;
			top:40vw;
			opacity:0;
        }

        .row {
            display: flex;
            
        }

        .row.single {
            height: 30vw;
			width: 45vw;
        }
		 .row.double {
            height: 30vw;
			width: 45.25vw;
        }

        .row.single img {
            width: 100%;
            height: 100%;
            object-fit: cover;
			margin-left:8px;
        }
		
		
        .row.double img {
            flex: 1;
            height: 30vw;
			width:22.32vw;
            object-fit: cover;
			margin-left:8px;
        }

        .row.double img:not(:last-child) {
            margin-right: 10px; /* Add gap between the two images */
        }
.animate {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s ease-in-out;
}

.animate.play-animation {
  opacity: 1;
  transform: translateY(0);
}		

		
		@keyframes contentslidein{
	from{
		opacity:0;
		transform: translateY(-50px);
	}
	to{
		opacity:1;
		transform: translateY(0px);
	}
}
.container{
    position: absolute;
	top:10vw;
	left:0;
    height:30vh;
    width:100%;
	z-index:-1001;
    
   
    
}

#slide{
    width:100%;
	
    

}

.item{
    width:45vw;
    height:30vw;
    background-position: 50% 50%;
    display: inline-block;
    transition: 1s ease;
    filter: grayscale(100%);
	background-size: 45vw 30vw;
    position: absolute;
    z-index: 3;
	 
	
}

.item:nth-child(1){
    transform: translate(50vw);
	background-size: 45vw 30vw;
	width: 9vw;
    opacity:000;
	
}
.item:nth-child(2){
    transform: translate(0vw);
	background-size: 45vw 30vw;
	width: 9vw;
	background-color:hsl(0, 0%, 50%);
	animation: moveToCenter 1s ease-in-out 1s forwards; /* 1s animation with 2s delay */

	
}
.item:nth-child(3){
    transform: translate(9.25vw);
		background-size: 45vw 30vw;
	width: 18vw;
	animation: moveToCenter 1s ease-in-out 1s forwards; /* 1s animation with 2s delay */
	

}
.item:nth-child(4){
    transform: translate(27.5vw);
	filter: saturate(100%);
	background-size:48vw 32vw;
	width: 45vw;
	


}
.item:nth-child(5){
    transform: translate(72.75vw);
	background-size: 45vw 30vw;
	width: 18vw;
	animation: moveToCenter 1s ease-in-out 1s forwards; /* 1s animation with 2s delay */

}
.item:nth-child(6){
    transform: translate(91vw);
	background-size: 45vw 30vw;
	width: 9vw;
	animation: moveToCenter 1s ease-in-out 1s forwards; /* 1s animation with 2s delay */
}
.item:nth-child(n+7){
    transform: translate(50.25vw);
    background-size: 45vw 30vw;
	width: 9vw;
    opacity:000;
}
@keyframes contentslide{
	from{
		opacity:1;
		transform: translateY(0px);
	}
	to{
		opacity:0;
		transform: translateY(-50px);
	}
}
@keyframes contentslidecr{
	from{
		opacity:1;
		
	}
	to{
		opacity:0;
		
	}
}
.item .content{
    position: absolute;
    top:100%;
    
    width:80%;
    padding:0 10%;
    
    text-align: center;
	
	animation: fadeOutUp;
    animation-duration: 1s;
	transition:1s;
	opacity:1;
    overflow: hidden;
    max-height: 0;
	margin-top:10px;

	
}
@keyframes content2slide{
	from{
		opacity:0;
		transform: translateX(-20vw);
	}
	to{
		opacity:1;
		transform: translateX(0px);
	}
}
.content2{
	animation: content2slide 0.5s ease-out 2s;
	animation-fill-mode: forwards;
    position: sticky;
    padding:3vh 3%;    
	top: 0;
    text-align: left;		 	
	opacity:0;
	width:24vw;
	
	
}
.content2 .name{
     font-family: "Scope One", serif;
	  font-size:35px;
}
 .content2 .from{
      font-family: "Scope One", serif;
	  font-size:15px;
	  opacity:0.5;
}
.item .content .name{
      font-family: "Scope One", serif;
	  font-size:2.0vw;
}
.item .content .from{
     font-family: "Scope One", serif;
	  font-size:15px;
	  opacity:0.5;
}

.item:nth-child(4) .content{
	max-height: 100px;
	animation: contentslide 0.5s ease-out 0.5s;
	animation-fill-mode: forwards;
	transition-delay:2s;
	transition-property: opacity;
	
	
	
	
}
.item:hover{
    background-size:48vw 32vw;
	filter: grayscale(0%);
	transition:1s ease;
	cursor:pointer;

}




   @keyframes moveToCenter {
    to {
	transform: translate(27.5vw);
      width: 45vw;
	  z-index:-1000;
    }
 }
body::-webkit-scrollbar {
	width: 15px;           
        

}
body::-webkit-scrollbar-track{
	background: #ffffff;
}
body::-webkit-scrollbar-thumb{
	background: #000000
}