@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=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{
	font-family: 'Lato', sans-serif;
	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: #fff;
            background-color: #0e0e0e;
            line-height: 1.6;
}
       /* Hero Section */
        .hero {
            
             background: 
        linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) no-repeat,
        url('./Images/img3.jpg') center/cover no-repeat;
    
    background-size: 100% 40%, cover; /* First value: gradient height, second value: image */
            display: flex;
            align-items: center;
            padding: 0 5%;
			width: 100%;
            height: 100vh;
        }
		

        .hero-content {
            max-width: 600px;
        }

        .hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
        }
		.containero {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 30px;
			margin: 50px auto;
		}
		
		.text-content {
			width: 60%;
			color: white;
			
			padding: 20px;
			border-radius: 8px;
			text-align: center;
		}
		
		.text-content h1 {
			font-size: 2rem;
			margin-bottom: 10px;
		}
		
		.text-content h2 {
			font-size: 1.2rem;
			color: #aaa;
			margin-bottom: 10px;
		}
		
		.text-content p {
			font-size: 1rem;
			line-height: 1.5;
		}
		
		.image-content {
			width: 80%;
		}
		
		.image-content img {
			width: 100%;
			height: auto;
			border-radius: 8px;
			object-fit: cover;
		}
		
		/* Responsywność */
		@media (max-width: 768px) {
			.text-content {
				width: 90%;
			}
		
			.image-content {
				width: 95%;
			}
		
			.text-content h1 {
				font-size: 1.5rem;
			}
		}
		
        .photo-section {
			max-width: 1200px;
			margin: 0 auto;
			padding: 40px 20px;
			color: white;
			
			font-family: 'Lato', sans-serif;
		  }
		  
		  .row {
			display: flex;
			flex-wrap: wrap;
			gap: 20px;
			margin-bottom: 20px;
			align-items: center;
		  }
		  
		  .first-row {
			justify-content: center;
		  }
		  
		  .first-row .photo {
			width: 38%;
			object-fit: cover;
			height: 300px;
		  }
		  
		  .first-row .text-block {
			width: 60%;
		  }
		  .text-block h2{
			font-size: 40px;
		  }
		  
		  .second-row {
			justify-content: center;
			margin-bottom: 75px;
		  }
		  
		  .second-row .photo {
			width: 49%;
			object-fit: cover;
			height: 300px;
		  }
		  
		  .third-row {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
		  }
		  
		  .left-section {
			width: 55%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		  }
		  
		  .left-section .text-block {
			margin-bottom: 20px;
		  }
		  
		  .photo-pair {
			display: flex;
			gap: 20px;
		  }
		  
		  .photo-pair .photo {
			width: 50%;
			object-fit: cover;
			height: 200px;
		  }
		  
		  .right-photo {
			width: 43%;
			display: flex;
			align-items: center;
		  }
		  
		  .right-photo img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		  }
		  
		  /* Responsywność */
		  @media (max-width: 900px) {
			.first-row,
			.second-row,
			.third-row {
			  flex-direction: column;
			}
		  
			.first-row .photo,
			.first-row .text-block,
			.second-row .photo,
			.left-section,
			.right-photo {
			  width: 100%;
			}
		  
			.photo-pair {
			  flex-direction: column;
			}
		  
			.photo-pair .photo {
			  width: 100%;
			}
		  }
		  .faq{
			padding:20px!important;
		}
        
        .containerfaq {
            display: flex;
            width: 80%;
            max-width: 1100px;
			margin-bottom:100px;
			font-family: 'Lato', sans-serif;
        }
        .faq {
            width: 50%;
            padding: 50px 100px;
			background-color: #000000;
        }
		.faqcontent{
			padding: 20px 0;
			font-size: 18px;
		}
		.faqcontent h4{
			padding:10px 0;
			border-bottom: 2px solid #232121;
			border-top: 2px solid #232121;
			margin-bottom:10px;
		}
        .imagefaq {
            width: 50%;
            background: url('./Images/35.jpg') no-repeat center center/cover;
        }
		@media (max-width: 768px) {
			.imagefaq{
				display: none;
			}
			.faq{
				width: 100%;
			}
		}

        .buttons {
            display: flex;
            justify-content: center;
            margin-top: 20px;
			gap: 20px;
			
        }
		  .centered-div {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin: 50px auto;
			max-width: 1100px;
			padding: 20px;
			font-family: 'Lato', sans-serif;
			font-size: 20px;
		}
		.button {
			
			color: white;
			padding: 10px 20px;
			text-decoration: none;
			margin-top: 15px;
			border: none;
			cursor: pointer;
			font-size: 20px;
    }

	 button {
            padding: 10px 20px;
            border: none;
            background-color: #232121;
            color: white;
            cursor: pointer;
			z-index: 16;
			margin-right:10px;
        }

		.button:hover {
			background-color: #333;
		}
		.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-item {
			  flex: 1 1 calc(50% - 10px);
			  max-width: calc(50% - 10px);
			}
		  }
		  
		  @media (max-width: 480px) {
			.gallery-item {
			  flex: 1 1 100%;
			  max-width: 100%;
			}
		  }
         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;
			
        }

        .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 */
		}
		
			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 {
			
			
            background-color: white;
            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: 13.125vw;
			height:1.5vw;
			margin: 0px auto 0px; /* Center the UV element */
		}
		.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:10px;
			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: -px; /* Place it just below the fixed footer */
		margin-top: 50px;
		left: 50%;
		transform: translateX(-50%); /* Center it horizontally */
		font-size: 8px;
		color: #6c757d;
		}
        
		.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
}