@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Poppins", sans-serif;

}


body{
    background-color: #fae7bb;
}

.fallback-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50vw;
  max-width: 1200px;
  transform: translate(-50%, -50%) rotate(-5deg);
  border: 10px solid rgb(152, 98, 98);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  z-index: -1;
  transition: opacity 0.8s ease;
  
}


header {

    z-index: 6;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0px 20px;

    transition: 0.5s ease;
}




header .navigation {

    position: fixed;

    top:0px;
    right:168px;

    width: 90%;

    /* max-width: 100%; */

    height: 50px;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    

    z-index: 5;

    text-shadow: 0 8px 10px rgba(0, 0, 0, 0.532);

}

header .navigation.hidden {
    transform: translateY(-200%);
    transition: transform 0.3s ease;
}



header .navigation .navigation-items a {



    position: relative;

    color: #fafcdf;

    font-size: 16px;

    font-weight: 500;

    text-decoration: none;

    margin-left: 30px;

    /* transition: 2s ease; */

}



#onas {

    bottom: 0px;

    text-shadow: 0 8px 10px rgba(0, 0, 0, 0.532);

    animation: col 0.5s ease forwards 0s;

}



@keyframes col {

    from {

        color: #fafcdf;

    }



    to {

        color: #b9f971;

        bottom: 5px;

        text-shadow: 0 14px 10px rgba(0, 0, 0, 0.384);

    }

}







header .navigation .navigation-items a:before {

    content: '';

    position: absolute;

    background: #fff;

    width: 0;

    height: 3px;

    bottom: 0;

    left: 0;

    transition: 0.3s ease;

}



header .navigation .navigation-items a:hover:before {



    width: 100%;

}



#marker {

    position: relative;

    height: 0px;

    left: 28px;

    bottom: -30px;

    width: 50px;

    background: rgb(100 97 255 / 53%);

    border-radius: 4px;

    animation: obj 1s ease forwards 0s;

}



@keyframes obj {

    to {

        height: 0px;

    }

}



section {

    padding: 0px 0px;

}



.home {

    position: relative;

    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    flex-direction: column;

    background: rgba(47, 224, 24, 0);

}



.home:before {



    content: '';

    position: absolute;



    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 1;

}



.home .content {

    z-index: 2;

    color: #fff;

    width: 95%;

    margin-top: 50px;

    display: none;

    transform: skew(0deg, -3deg);

    text-shadow: 0 8px 10px rgba(0, 0, 0, 0.76);



}



.home .content.active {

    display: block;



}



.home .content h1 {

    font-size: 4em;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 5px;

    line-height: 75px;

    margin-bottom: 40px;



    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: rgb(123, 72, 0);

    background: -webkit-linear-gradient(rgb(251, 218, 246), rgb(26, 63, 38));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



  .parallax {

    will-change: transform;   

  }



.home .content h2 {

    font-size: 4em;

    font-weight: 600;



    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: rgb(0, 0, 0);

    background: -webkit-linear-gradient(rgb(3, 248, 3), rgb(2, 225, 255));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;



}



.home .content h2 span {

    font-size: 0.8em;

    font-weight: 600;

    /* color: #f5ad05;

    -webkit-text-stroke-color: rgb(0, 0, 0); */



    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: rgb(0, 0, 0);

    background: -webkit-linear-gradient(rgb(12, 191, 241), rgb(247, 150, 242));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;



}



.home .content p {

    margin-bottom: 65px;

    transform: skew(0deg, 3deg);



}



/* .home .content a {

    background: #fff;

    padding: 15px 35px;

    color: #e5fe03;

    font-size: 1.1em;

    font-weight: 500;

    text-decoration: none;

    border-radius: 2px;



} */



.home .media-icons {

    z-index: 888;

    position: absolute;

    right: 30px;

    display: flex;

    flex-direction: column;

    transition: 0.5s ease;



}



.home .media-icons a {

    color: #fff;

    font-size: 1.6em;

    transition: 0.3s ease;



}



.home .media-icons a:not(:last-child) {

    margin-bottom: 20px;

}



.home .media-icons a:hover {

    transform: scale(1.3);

}



.home video {

    z-index: 000;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.slider-navigation {

    z-index: 1;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    transform: translateY(120px);

    margin-bottom: 150px;
    

}



.slider-navigation .nav-btn {

    width: 12px;

    height: 12px;

    background: #fff;

    border-radius: 50%;

    cursor: pointer;

    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);

    transition: 0.3s ease;
    

}



.slider-navigation .nav-btn.active {

    background: #2696E9;


 


}



.slider-navigation .nav-btn:not(:last-child) {

    margin-right: 20px;

}



.slider-navigation .nav-btn:hover {

    transform: scale(1.8);

}



.video-slide {

    position: absolute;

    width: 100%;

    clip-path: circle(0% at 50% 95%);

}



.video-slide.active {

    clip-path: circle(200% at 50% 95%);

    transition: 3s ease;

    transition-property: clip-path;

}



.lottie-container-hamburger {

    display: none;

}



/* slonce klik */



.ramka {

    /* height: 0px; */

    width:90%;

    transition: 0.9s ease;

    border-style: double;

    background-color: white;

}



.ramka p{

    color: #2f3f2f;

}



.iframe1class {

    display: none;

  

}



.iframe1class.active {

    display:flex;

    width:100%;

height:600px;

}



.lottie-container2 {

    z-index: 2;

    position: relative;

    top: 0px;

    left: 0%;

    transition: 0.3s ease;

    display: inline-flex;

    padding-inline: 1rem;

}



.lottie-container2 lottie-player {

    width: 60px;

    height: 60px;

}



.lottie-container-logo {

    z-index: 1;

    position: absolute;

    top: 30%;

    left: 0%;

    /* transition: 0.3s ease; */

    display: inline-flex;

    padding-inline: 2rem;

    justify-content: center;

    

}



.lottie-container-logo lottie-player {

    width: 50%;

    animation: przenika 2.8s ease forwards 10s;

    /* height: 600px; */

}



@keyframes przenika {

    to {

        opacity:1.0;

    }

}



.sunclick:hover {

    scale: 1.2;

    transition: 0.3s ease;

}



.sunclick:active {

    scale: 0.8;

}







.tekst.active {

    display: none;

}



/* slonce klik end */



/* rower klik */

.rowerclick:hover {

    scale: 1.2;

    transition: 0.3s ease;

}

.rowerclick:active {

    scale: 0.8;

}

.tekst.active {

    display: none;

}

/* rower klik end */



/* kajak klik */

.canoeclick:hover {

    scale: 1.2;

    transition: 0.3s ease;

}

.canoeclick:active {

    scale: 0.8;

}



.tekst.active {

    display: none;

}

/* rower klik end */



@media (max-width: 1200px) {

    header {

        /* padding: 12px 20px; */

    }



    section {

        /* padding: 100px 20px; */

    }



    .home .media-icons {

        right: 15px;

    }



    #svgnapis {

        position: relative;

        top: 0%;

        left: 0%;

        transform: translate(0%, 0%);

        animation: fill 0.8s ease forwards 3s;

    }



    header .navigation {

        display: none;



    }



    header .navigation.active {

        position: fixed;

        width: 100%;

        height: 100vh;

        top: 0;

        left: 0;

        display: flex;

        justify-content: center;

        align-items: center;

        background: transparent;

        z-index: 5;

    }















    header .navigation .navigation-items a {

        color: #222;

        font-size: 18px;

        margin: 20px;



    }



    header .navigation.active .navigation-items a:before {

        background: #222;

        height: 5px;

    }



    header .navigation .navigation-items {

        background: #fff;

        animation: tlokolor 2s ease forwards 0.5s;

        width: 300px;

        max-width: 600px;

        margin: 20px;

        padding: 40px;

        display: flex;

        flex-direction: column;

        align-items: center;

        border-radius: 35px;

        box-shadow: 0 5px 25px rgb(1 1 1 / 70%);

    }



    @keyframes tlokolor {

        to {

            background: #955f2995;

        }

    }





    .lottie-container-hamburger {



        margin: auto;

        justify-content: center;

        align-items: center;

        display: flex;

        background-color: transparent;

        z-index: 6;

        position: fixed;

        top: 20px;

        right: 20px;

        transition: 0.3s ease;

    }



    .lottie-container-hamburger:hover{

        scale: 1.3;

    }



    .lottie-container-hamburger lottie-player {

        width: 50px;

        height: 50px;



        margin: auto;

        justify-content: center;

        align-items: flex-start;

        display: flex;

        background-color: transparent;

        z-index: 0;

    }









    .content,

    .content.active {



        width: 100%;



        h1, h2 {

            font-size: 24px;

            font-weight: 500;

            text-transform: uppercase;

            letter-spacing: 2px;

            line-height: 75px;

            text-align: center;

            margin-bottom: 40px;

        }



        p {

            text-align: center;

            padding-right: 20%;

            padding-left: 10%;

        }



        span {

            font-size: 1.2em;

            font-weight: 100;

        }

        .tekscik span literka {

            font-size: 5.2em;

        }



        #animated-paragraph {

            white-space: pre-wrap; /* Zachowaj białe znaki, jak spacje i nowe linie */

            font-size: 12px;

            line-height: 1.6;

            margin-top: 20px;

            text-align: center;

           

          }

    }





}



p {

    text-align: center;

    padding-right: 20%;

    padding-left: 10%;

}



#animated-paragraph {

    white-space: pre-wrap; /* Zachowaj białe znaki, jak spacje i nowe linie */

    font-size: 16px;

    line-height: 1.6;

    margin-top: 20px;

   

  }



  #animated-paragraph span {

    display: inline-block;

    opacity: 0;

    color: #05e1f5;

    

    transform: translateX(-400px); /* Początkowa pozycja nad ekranem */

    animation: fade-in-up 3.0s forwards; 

    

  }









  /* .tekscik {

    display: inline-block;

    opacity: 1;

    color: #f505d5;

    

    transform: translateX(10px); /* Początkowa pozycja nad ekranem */

    

    

 



  h1{

    opacity: 0;

    transform: translateX(-400px); /* Początkowa pozycja nad ekranem */

    animation: fade-in-up 2s forwards 1s; 

  

  }



  .tekscik{

    animation: znikam 2s ease forwards 15s;

  } 







  /* #nowyviator{



    animation: znikam 2s ease forwards 4s;

  }  */



  /* p{

    filter: blur(4px);

    animation: fade-in-up 4.0s forwards;

  } */



  /* Animacja przesuwania w górę */

  @keyframes fade-in-up {

    0%{

        opacity: 0;

        scale: 3;

        filter: blur(20px);

    }

    25% {

       

        color: #ec4306;

        filter: blur(20px);

      }



    50% {

        color: #06ec5a;

      }



    100% {

    

      opacity: 1.0;

      color: #ffffff;

      

      transform: translateX(0); /* Końcowa pozycja */

      /* filter: drop-shadow(2px 2px 4px rgb(255, 1, 1)); */

      filter: blur(0px);

      

    }

  }



  @keyframes fadeoutek {

    0%{

        color: #ffffff;

        opacity: 1.0;

        

        

        transform: translateX(0); /* Końcowa pozycja */

        /* filter: drop-shadow(2px 2px 4px rgb(255, 1, 1)); */

        filter: blur(0px);





    }





    15% {

       

        color: #ec4306;

     

      }



    23% {

        color: #06ec5a;

      }



    100% {

    

        opacity: 0;

        scale: 3;

        filter: blur(20px);

        transform: translateX(-400px);

      

    }

  }



  @keyframes znkamm {

    0%{

        opacity: 1;

        stroke-width: 2px;

    }





    100% {

     filter: blur(20px);

      opacity: 0;

      stroke-width: 1px;

    }

  }





  @keyframes znikam {

    0%{

        opacity: 1;

       

    }





    100% {

       

     filter: blur(20px);

      opacity: 0;

      

    }

  }



/*----------------*/

.tekst {

        position: relative;

      

        

        color: white;

        padding: 50px;

   

    }



    .tekst h2, .tekst p {

        position: relative;

        text-align: center;

        z-index: 2;

    }



    .tekst::before {

        content: '';

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        width: 100%;

        height: 100%;

        background: radial-gradient(circle, #ff00ff92, #00ffff81, #00ff0081, #ff000074);

        filter: blur(50px);

        opacity: 0.5;

        z-index: 1;

        pointer-events: none;

    }



    .tekst span {

        color: #ffd700;

    }

  /* //------------------ */





.video-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    z-index: -1;

}



video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.scroll-space {

    position: relative;

    z-index: 1;

    color: white;

    padding: 0px;

    /* background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.9)); */

}



/*--------------------*/





/*--------------------*/





#loader-bar {

    width: 300px;

    height: 20px;

    background: #333;

    border-radius: 10px;

    overflow: hidden;

    margin-bottom: 10px;

}



#loader-progress {

    width: 0%;

    height: 100%;

    background: #0f0;

    transition: width 0.2s ease;

}



#loader-percent {

    font-size: 1.2rem;

}





#preloader {

    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background: #00000018;

    color: #ffffff;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 1;

    font-family: sans-serif;

    opacity: 0.5;
    /* ← DODAJ TO */



}



#lottie-container-scrolleffect {
    /* position: sticky; */
    position: fixed;
    top: -35%;
    left: -25%;
    width: 150vw;
    height: 150vh;
    margin: 0px auto;
    transition: opacity 0.5s ease;

 
  }