* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
@keyframes zmiana-koloru{
			from{
				filter: hue-rotate(0);
			}
			to{
				filter: hue-rotate(360deg);
  }}
@keyframes zmiana-blur{
			0%{
				filter: blur(10px);
			}
			50%{
				filter: blur(1px);
			}
  100%{
    filter: blur(10px);
  }
		}

body {
  background: #fff;
  color: white;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat';
}

/** NAWIGACJA **/
.hamburger {
  display: none;
  font-size: 2rem;
  cursor: pointer;
}
nav {
  position: fixed;
  top: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
}
nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 15rem;
  list-style: none;
}
nav a {
  color: #ff9900;
  text-decoration: none;
  font-size: 1.5vw;
  font-weight: 500;
}

/** GŁÓWNA STRONA **/

.hero {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}
.fish {
  position: absolute;
  min-width: 95vw;
  height: auto;
  z-index: 2;
}
.title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  mix-blend-mode: difference;
}
.title h1 {
  font-size: 20vh;
  font-weight: 900;
  text-transform: uppercase;
}

.title p {
  font-size: 2rem;
  margin-top: 0.5rem;
  color: white;
}

/** sekcja 1 **/

.korzenie {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 3rem;
  overflow: hidden;
  min-height: 100vh;
  box-sizing: border-box;
}
.smoczek {
  width: 40%;
  color: #00084d;
  font-size: 1.5vw;
  text-align: center;
  margin-bottom: 43vh;
  margin-left: 10vw;
  z-index: 2;
}
.blokgraficzny {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}
.circle {
  width: 30vw;
  z-index: 0;
}
.nazwa {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  color: white;
  font-size: 1.5vw;
  z-index: 2;
}
.swim {
  position: absolute;
  top: -15vh;
  right: -1vw;
  width: 20vw;
  z-index: 3;
}
.dno {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}

/** sekcja 2 **/

 .rodzina {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 3rem;
  overflow: hidden;
  box-sizing: border-box;
}
.text{
  width: 25%;
  margin-left: 5vw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.5vw;
  z-index: 2;
}
.tarlo {
 transform: translateX(-29%) translateY(18%);
}
.mamy {
  width: 63%;
  transform: translateX(158%) translateY(46%);
}
.rybki{
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}
.m1{
  position: absolute;
  top: -15vh;
  right: 3vw;
  width: 28vw;
  z-index: 3;
}
.m2{
  position: absolute;
  top: -32vh;
  right: 28vw;
  width: 33vw;
  z-index: 3;
}
.m3{
  position: absolute;
  max-height: 14;
  top: 25vh;
  right: 5vw;
  width: 13vw;
  z-index: 3;
}

.bable {
  position: absolute;
  bottom: 0;
  margin-left: -220px;
  width: 100vw;
  height: auto;
  z-index: 1;
}

/** sekcja 3 **/

.dieta {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

.blokrybny {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 85vh;
  z-index: 2;
}

.jedzenie{
  text-align: center;
  width: 20vw;
  font-size: 1.9vw;
  margin: 0.1vw;
  transform: translate(0%);
  order: 2;
}
.hfish1{
  height: 80vh;
  object-fit: cover;
  align-self: flex-start;
  order: 3;
}
.hfish2{
  height: 80vh;
  object-fit: cover;
  align-self: flex-start;
  order: 1;
}

.zielipsa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 80vh;
  z-index: 0;
  pointer-events: none;
}

/** sekcja 4 **/

.zycie{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}
.blokkoncowy{
  width: 54vw;
  margin-bottom: 50vh;
  flex-direction: column;
  text-align: center;
  z-index: 1;
}
.wolnosc{
  margin-bottom: 4vh;
  justify-content: space-between;
  color: #00084d;
  font-size: 1.5vw;
}
.dno2{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

/**stopka**/

.stopka {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 50vh;
  overflow: hidden;
  box-sizing: border-box;
}
.kolumny p{
  font-size: 1.5vw;
  color: white;
  padding: 1vw;
  text-align: center;
  line-height: 6vh;
}

.kolumny {
  display: flex;
  flex-direction: row;     
  justify-content: center;   
  align-items: center;   
  gap: 4vw;                 
  min-width: 25vw;        
  margin: 0 auto;           
  padding: 40px;                        
  z-index: 2;
}
.dnostopka {
  width: 100%;
  position: absolute;
  z-index: 0;
}
.kolumny img{
  display: block;
  margin: 0 auto;
}
/* MEDIA NA TELEFON DOPASOWANIE*/
/**DOPASOWANIE DO WYSWIETLANIA MOBILNEGO**/

@media screen and (max-width: 768px) {

  nav ul{
    display: none;
    flex-direction: column;
    position: absolute;
    background: white;
    top: 100%;
    left: 0;
    right: 0;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
    .hamburger {
    display: block;
  }
  .nav ul li img{
    max-width: 18vw;
  }
  .fish{
  max-width: 250vw;
  }
  .background{
    min-width: 300vw;
    left: -200px;
  }
  .title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
  .title h1{
  margin: 0 auto;
  word-wrap: break-word;
  max-width: 100vw;
  text-align: center;
  font-size: 5rem;
  }
  .title p{
    font-size: 3rem;
  }
  
  
  /*SEKCJA 2*/
  .korzenie {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 3rem;
  overflow: hidden;
  min-height: 100vh;
  box-sizing: border-box;
}
.smoczek {
  width: 70vw;
  color: #00084d;
  font-size: 0.7rem;
  text-align: center;
  margin-top: -21vh;
  margin-left: 0;
  z-index: 2;
}
.blokgraficzny {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}
.circle {
  width: 63vw;
  margin-left: -78px;
  z-index: 0;
}
.nazwa {
  position: absolute;
  top: 31%;
  left: 25%;
  width: 50vw;
  color: white;
  font-size: 0.7rem;
  z-index: 2;
}
.swim {
  position: absolute;
  top: -23vh;
  right: -1vw;
  width: 27vh;
  z-index: 3;
}
.dno {
  left: -500px;
  width: 364vw;
}

  /*SEKCJA RODZINA*/
  .rodzina {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 3rem;
  overflow: hidden;
  box-sizing: border-box;
}
.text{
  width: 97%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.7rem;
  z-index: 2;
}
.tarlo {
 transform: translateX(-15%) translateY(35%);
}
.mamy {
  width: 47%;
  transform: translateX(253%) translateY(87%);
}
.rybki{
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}
.m1{
  position: absolute;
  top: -37vh;
  right: -8vw;
  width: 34vw;
  z-index: 3;
}
.m2{
  position: absolute;
  top: -36vh;
  right: 6vw;
  width: 54vw;
  z-index: 3;
}
.m3{
  position: absolute;
  max-height: 14;
  top: -22vh;
  right: -18vw;
  width: 21vw;
  z-index: 3;

}
.bable {
  position: absolute;
  bottom: 0;
  margin-left: -220px;;
  width: 353vw;
  height: 100vh;
  z-index: 1;
}
    /*SEKCJA DIETA*/

.jedzenie{
  width: 25vw;
  font-size: 0.7rem;
  margin-top: 127px;
}
.hfish1{
  margin-left: -150px;
  margin-top: 18px;
  height: 40vh;
}
.hfish2{
  margin-right: -150px;
  margin-top: 56vh;
  width: auto;
  height: 40vh;
  order: 1;
}
.zielipsa {
  height: 50vh;
  margin-top: 58px;
}
  
  /*SEKCJA ŻYCIE*/
  

.blokkoncowy{
  width: 69vw;
  margin-bottom: 21vh;
}
.wolnosc{
  color: #00084d;
  font-size: 0.7rem;
}
.dno2{
  transform: translateX(-24%);
  width: auto;
  height: 67vh;
}

  /*stopka*/

.kolumny p{
  font-size: 0.7rem;
  color: white;
  padding: 1vw;
  text-align: center;
  line-height: 6vh;
}
.kolumny img{
  display: block;
  margin: 0 auto;
}

  }
.kolumny {
  display: flex;
  flex-direction: column;     
  justify-content: center;   
  align-items: center;                  
  min-width: 55vw;               
  padding: 23px;                        
}
.dnostopka {
  height: 100%;
  object-fit: cover;
}