@charset "utf-8";
/* import fontu z google */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
/* font-family: "Outfit", sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Anaheim:wght@400..800&display=swap');
/*font-family: "Anaheim", sans-serif;*/
@import url('https://fonts.cdnfonts.com/css/nats');
/*font-family: 'NATS', sans-serif;*/

/* SELEKTORY GLOBALNE */
*{
	transition: 1s;
	box-sizing: border-box;
	
}
html{
	scroll-behavior: smooth;
	font-family: NATS;
	font-size: 14px; /* 1rem = 10px */
}
body{
	font-size: 2rem;
	background: linear-gradient(180deg, rgba(183, 218, 240, 0.54) 0%, rgba(188, 224, 255, 0.87) 15.38%, rgba(20, 78, 126, 0.89) 37.5%, #02102F 83.66%);
	overflow-x: hidden;
}

a{
	text-decoration: none;
}

img{
	max-width: 100%;
}

p{
	line-height: 140%;
}

/* NAWIGACJA MOBILE */
.burger1{
/*	background-color: red;*/
	position: fixed;
	top: 1rem;
	right: 2rem;
	padding: .5rem 2rem;
	display: none;
	cursor: pointer;
	z-index: 1;
}
.nakladka{
	background-color: #02102F;
	position: fixed;
	opacity: .9;
	right: 0;
	top: 0;
	height: 0;
	width: 0;
	overflow: hidden;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nakladka ol{
	width: 100%;
	text-align: center;
}
.nakladka ol li a{
	display: block;
	padding: 2vh;
	margin-bottom: 1rem;
	color: #fff;
	font-size: 3rem;
}
.nakladka ol li a:hover{
	background-color: #fff;
	color: #111;
}
.burger2{
/*	background-color: green;*/
	position: absolute;
	top: 1rem;
	right: 2rem;
	padding: .5rem 2rem;
	cursor: pointer;
}



/* NAWIGACJA DESKTOP */
.burger1, .burger2{
	display: none;
}
nav{
	background-color: #144E7E;
	opacity: 0.8;
	position: fixed;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}
nav ol{
	display: flex;
	justify-content: space-evenly;
	max-width: 2000px;
	width: 100%;
}
nav ol li a{
	padding: 1rem 3vw;
	display: block;
	color: #FFFFFF;
	padding: 7px;
	margin: 4px;
}
nav ol li a:hover{
	background-color: #C8E2F3;
	color: #1E3143;
	border-radius: 18px;
}

/* WSZYSTKIE SEKCJE */
section{
	min-height: 90vh;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	scroll-margin-top: 3rem;
}
.zawartosc{
/*	background-color: #82B5EC;*/
	max-width: 1300px;
	width: 100%;
	
	padding: 2rem;
}

/* POSZCZEGÓLNE SEKCJE */

#pierwsza .zawartosc{
	display: flex;
	justify-content: flex-end;
	align-items: center;
/*	background-color: red;*/
	height: 130vw;
}
.dino-mobile {
  display: none;
}
#pierwsza img{
	max-width: 3000px;
	width: 100%;
	position: absolute;
	top: 100px;
	left: -5px;
	justify-content: space-between;
}
#pierwsza p{
/*	background-color: blue;*/
	max-width: 38%;
	text-align: right;
	font-family: Anaheim;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	z-index: 1;
}

#druga{
/*	background-color: #ddd;*/
/*	margin-top: 100px;*/
/*	height: auto !important;*/
}
#druga .zawartosc{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	max-width: 1400px;
/*	background-color: red;*/
	gap: 15rem;
	
}
img{
	max-width: 140%;
	}
article{
	max-width: 461px;
	position: relative;
	min-height: 747px;
	background-color: #79A2C5;
	border-radius: 44px;
	
}
.left, .right{
	filter: blur(10px);
  	transition: filter 0.3s ease;
}
.left:hover, .right:hover{
	filter: none;
}

#druga h1{
	color: #FFF;
	text-align: center;
	align-items: center;
	font-family: NATS;
	font-size: 50px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 4.5px;
}
#druga p{
	color: #FFF;
	text-align: center;
	font-family: Anaheim;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: 1.26px;
}
.left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.left img{
	position: absolute;
	left: -18%;
	top: 12%;
	max-width: 300%;
	width: 150%;
}
.left p{
	padding: 0 10% 80px 10%;
}
.right {
	display: flex;
	flex-direction: column;
}
.right img{
	position: absolute;
	bottom: 7%;
	left: -18%;
	max-width: 300%;
	width: 150%;
}
.right p{
	padding: 0 10% 0 10%;
}




#trzecia{
/*	margin-top: auto!important;*/
	background-image: url("../img/rybki.png");
	background-repeat: no-repeat;
	background-size: 70%;
	background-position: center;
}
#trzecia .zawartosc{
	display: flex;
	flex: 1 0 0;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	gap: 70px;
}
#trzecia .zestawy{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 40px;
}
#trzecia p {
	color: #FFF;
	text-align: center;
	font-family: Anaheim;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 1.26px;
	width: 363px;
}
#trzecia .slider-progress{
	display: none;
}



#czwarta{
}
#czwarta .zawartosc{
	 display: flex;
	 gap: 50px;
}
.waz-mobile{
	display: none;
}
#czwarta .ciekawostki{
	color: #FFF;
	font-family: Anaheim;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 1.26px;
	display: flex;
	flex-direction: column;
	width: 651px;
	justify-content: center;
}
#czwarta .ciekawostki h2{
	font-weight: 800;
}

#stopka{
	min-height: auto;
	padding: 50px 0;
	color: #fff;
	text-align: center;
	justify-content: center;
	font-size: 25px;
}

/************************************************/
/**********************RWD***********************/

@media all and (max-width:1800px){
	#druga{
/*	margin-top: 70px;*/
		margin-top: auto!important;
		padding-top: 200px;
		
	}
	
	#trzecia{
		background-position: center auto!important;
		margin-top: auto!important;
		padding-top: 300px;
	}
	#czwarta{
/*		margin-top: -100px;*/
	    margin-top: auto!important;
	}
}

@media all and (max-width:1500px){
	#druga .zawartosc{
		max-width: 95%;
		margin-left: 10px;
	}
}
	
@media all and (max-width:1550px){
	#trzecia{
		margin-top: 200px;
	}
		#czwarta{
		margin-top: 300px;
	}
}
@media all and (max-width:1350px){
	#druga .zawartosc{
		max-width: 90%;
		margin-left: 30px;
	}
	#trzecia{
		margin-top: 200px;
	}
	#czwarta{
		margin-top: 300px;
	}
}
@media all and (max-width:1270px){
	#druga .zawartosc{
		max-width: 90%;
		margin-left: 30px;
	}
}
@media all and (max-width:1220px){
	#druga .zawartosc{
		max-width: 85%;
		margin-left: 64px;
	}
}
@media all and (max-width:1200px){
	.burger1, .burger2{
		display: block;
	}
	nav{
		display: none;
	}
	.dino-desktop {
    	display: none;
  	}
    .dino-mobile {
    	display: block;
		margin: -40px 0 0 0;
 	}
	#pierwsza p{
		min-width: 60%;
		margin-top: 800px;
		padding: 50px;
	}
	
	#druga{
		margin-top: 400px;
}
	
	#druga .left, .right{
		filter: none;
	}
	#druga .zawartosc {
		display: flex;
		flex-wrap: nowrap;
		width: max-content;
		max-width: none;
		position: relative; 
	}
	#druga article{
		max-width: 461px;
		min-height: 747px;
	}
	
	#druga p {
		font-size: 20px;
	}
	
	.slide {
		flex: 0 0 100vw;
		scroll-snap-align: center;
		box-sizing: border-box;
		padding: 60px 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#druga .slider-wrapper {
		width: 100%;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		padding-inline: 0;
		scrollbar-width: none;
	}
	#druga .slider-progress {
	  display: flex !important;
	  justify-content: center;
	  align-items: center;
	  gap: 12px;
	  width: 100% !important;
	  margin: 12px auto 0 auto;
	  pointer-events: auto;
	}

	#druga .progress-icon {
	  width: 14px;
	  height: 14px;
	  border-radius: 50%;
	  background-color: #ccc;
	  opacity: 0.2;
	  cursor: pointer;
	  transition: opacity 0.3s ease, background-color 0.2s ease;
	}

	#druga .progress-icon.active {
	  opacity: 1;
	  background-color: #79A2C5;
	  transform: scale(1.2);
	}
	
	#trzecia{
		background-size: 90%;
		margin-top: -300px;
	}
	#trzecia .slider-wrapper {
		width: 100%;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		padding-inline: 0;
		scrollbar-width: none;
	}

	#trzecia .zawartosc {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		width: max-content;
		max-width: none;
		position: relative; 
/*		background-color: antiquewhite;*/
	}

	.zestawy {
		flex: 0 0 100vw;
		scroll-snap-align: center;
		box-sizing: border-box;
		padding: 60px 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	

	#trzecia img {
		width: 80%;
		max-width: 350px;
		height: auto;
	}
	#trzecia p {
		font-size: 20px;
		line-height: 1.6;
		width: 60%;
	}
	
	.slider-progress {
	  display: flex !important;
	  justify-content: center;
	  align-items: center;
	  gap: 10px;
	  width: 100% !important;
  	  margin: auto;
	  position: absolute; 
/*		background-color: red;*/
		
	}
	.slider-progress img{
		width: 7vw !important;
		margin-top: -40px;
	}

	.progress-icon {
	  opacity: 0.3;
	  transition: opacity 0.3s ease;
	}

	.progress-icon.active {
	  opacity: 1;
	  transform: scale(1);
	}

	
	#czwarta{
		background: url("../img/wąż mobile 1.png"), url("../img/wąż mobile 2.png");
		background-repeat: no-repeat, no-repeat;
  		background-position: top left, bottom right;
		background-size: auto 100%, auto 100%;
		height: 100vh;
}
	.ciekawostki{
		font-size: 20px !important;
		line-height: 180% !important; 
		letter-spacing: 2px !important;
		
	}
	.fakt1{
		margin: -400px 0 0 400px;
		width: 80% !important;
	}
	.fakt2{
		margin: 100px 0 0 250px;
		width: 100% !important;
	}
	.fakt3{
		margin: 100px 0 0 100px;
		width: 110% !important;
	}
	
	.waz-desktop{
		display: none;
	}

	
}
@media all and (max-width:1100px) {
	#pierwsza p{
		min-width: 60%;
		margin-top: 800px;
		padding: 0 30px 0 0;
	}
	#druga{
		margin-top: 600px;
	}
	#trzecia{
		margin-top: 400px;
	}
	
	.fakt1{
		margin: -100px 0 0 200px;
		width: 100% !important;
	}
	.fakt3{
		margin: 100px 0 0 50px;
	}
	
}
@media all and (max-width:990px) {
	
	#pierwsza p{
		margin-top: 600px;
		padding: 0 50px 0 0;
		font-size: 20px;
	}
	
	#czwarta{
		background-size: auto 90%, auto 90%;
	}
	.ciekawostki{
		font-size: 20px !important;
		line-height: 180% !important; 
		letter-spacing: 2px !important;
		
	}
	.fakt1{
		width: 90% !important;
	}
	.fakt2{
		margin: 80px 0 0 180px;
		width: 90% !important;
	}
	.fakt3{
		margin: 80px 0 0 0;
		width: 100% !important;
	}	
}
@media all and (max-width:900px){
	#trzecia{
		margin-top: 200px;
	}
	
}
@media all and (max-width:870px) {
	
	#trzecia img {
		width: 30%;
		max-width: 350px;
		height: auto;
	}
	
	
	
	.fakt1{
		width: 70% !important;
	}
	.fakt2{
		margin: 80px 0 0 100px;
		width: 90% !important;
	}
	.fakt3{
		margin: 80px 0 0 0;
		width: 90% !important;
	}	
}
@media all and (max-width:770px){
	.burger1, .burger2{
		margin-right: -2rem;
		margin-top: 1rem;
	}
	
	.nakladka ol li a{
		font-size: 2.5rem;
	}
	
	.left img{
	width: 140%;
	}
	.right img{
	width: 140%;
	}
	#druga article{
		max-width: 461px;
		min-height: 747px;
	}
	#trzecia{
		background-position: center 300px;
	}
	
	.fakt1{
		margin: -50px 0 0 170px;
		width: 70% !important;
	}
	.fakt2{
		margin: 60px 0 0 80px;
		width: 80% !important;
	}
	.fakt3{
		margin: 60px 0 0 0;
		width: 80% !important;
	}	
	#stopka{
		font-size: 18px;
	}
}
@media all and (max-width:660px){
	.nakladka ol li a{
		font-size: 2rem;
	}
	#pierwsza p{
		min-width: 70%;
		margin-top: 250px;
		padding: 0 20px 0 0;
		font-size: 18px;
	}
	
	#druga article{
		max-width: 420px;
		min-height: 747px;
	}
	.left img{
	left: -10%;
	top: 12%;
	width: 120%;
	}
	.right img{
	bottom: 7%;
	left: -10%;
	width: 120%;
	}
	#trzecia img {
		width: 30%;
		max-width: 350px;
		height: auto;
	}
	#trzecia p{
		font-size: 18px;
		width: 70%;
	}
	#czwarta{
/*		background-size: auto 70%;*/
	}
	.ciekawostki{
		font-size: 18px !important;
		line-height: 180% !important; 
		letter-spacing: 1px !important;
		
	}
	.fakt1{
		margin: -50px 0 0 130px;
		width: 70% !important;
	}
	.fakt2{
		margin: 60px 0 0 50px;
		width: 80% !important;
	}
	.fakt3{
		margin: 60px 0 0 0;
		width: 80% !important;
	}	
}

@media all and (max-width:550px) {
	.burger1 {
		width: 110px;
		height: auto;	
		right: 3rem;
	}
	.burger2 {
		width: 110px;
		height: auto;	
		right: 3rem;
	}
	#pierwsza p{
		min-width: 65%;
		padding-top: 200px;
	}
	#trzecia{
		background-position: center 350px;
	}
	
	.fakt1{
		width: 60% !important;
	}
	.fakt2{
		margin: 40px 0 0 30px;
		width: 85% !important;
	}
	.fakt3{
		margin: 40px 0 0 0;
		width: 70% !important;
	}	
}
@media all and (max-width:500px){
	#pierwsza p{
		min-width: 60%;
		margin-top: -20px;
		padding: 0 10px 0 0;
		font-size: 16px;
	}
	
	#druga article{
		max-width: 350px;
		min-height: 650px;
	}
	#druga p{
		font-size: 16px;
	}
	#druga h1{
		font-size: 45px;
	}
	.left img{
	left: -5%;
	top: 12%;
	width: 110%;
	}
	.right img{
	bottom: 7%;
	left: -5%;
	width: 110%;
	}
	#trzecia{
		background-position: center 500px;
	}
	#czwarta{
		margin-top: -70px;
	}
	.ciekawostki{
		font-size: 16px !important;
		line-height: 180% !important; 
		letter-spacing: 1px !important;
	}

}
@media all and (max-width:450px){
	#pierwsza p{
		min-width: 70%;
/*		margin-top: -40px;*/
		padding: 130px 0 0 0;
	}
	
	#trzecia img {
		width: 30%;
		max-width: 350px;
		height: auto;
	}
	#trzecia p{
		font-size: 16px;
		width: 80%;
		}
	#czwarta{
		margin-top: -200px;
	}
	.fakt1{
		margin: -50px 0 0 100px;
		width: 65% !important;
	}
	.fakt2{
		margin: 20px 0 0 0;
		width: 85% !important;
	}
	.fakt3{
		margin: 20px 0 0 -20px;
		width: 75% !important;
	}	
}
@media all and (max-width:420px){
	#pierwsza p{
		min-width: 65%;
		margin-top: 30px;
		padding: 240px 0 0 0;
	}
	#druga{
		padding-top: 50px!important;
	}
	#trzecia{
/*		height: auto!important;*/
		background-position: center 300px;
		margin-top: 100px!important;
	}
	
}
@media all and (max-width:400px){
	#pierwsza p{
		min-width: 60%;
/*		margin-top: -65px;*/
		padding: 300px 0 0 0;

	}
	#druga{
		margin-top: auto;
	}
	
	#czwarta{
		margin-top: auto;
	}
	.fakt1{
		margin: 0 0 0 100px;
		width: 65% !important;
	}
	.fakt2{
		margin: 0 0 0 0;
		width: 85% !important;
	}
	.fakt3{
		margin: 0 0 0 -20px;
		width: 80% !important;
	}	
}

@media all and (max-width:380px){
	#pierwsza p{
		min-width: 55%;
/*		margin-top: 120%;*/
		padding: 380px 0 0 0;
		font-size: 14px;
	}
	
	#trzecia{
		margin-top: auto!important;
/*		background-position: center 300px;*/
	}
	#czwarta{
		background-size: auto 90%;
	}
	
	.fakt1{
		margin: 80px 0 0 100px;
		width: 65% !important;
	}
	.fakt2{
		margin: 0 0 0 -30px;
		width: 85% !important;
	}
	.fakt3{
		margin: 0 0 0 -40px;
		width: 80% !important;
	}	
	#stopka{
		margin-top: 300px;
		height: auto;
	}
	
}