@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 {

    /* overflow-y: scroll;

    overflow-x: auto; */

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-size: cover;

    background-color: rgb(226, 210, 178);

}






header {

    z-index: 8;

    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: relative;

    width: 90%;

    /* max-width: 100%; */

    height: 50px;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    position: relative;


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

}



header .navigation .navigation-items a {



    position: relative;

    color: #fafcdf;

    font-size: 16px;

    font-weight: 500;

    text-decoration: none;

    margin-left: 30px;

    transition: 2s ease-in-out;

}



#kontakt {



    bottom: 0px;

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

    animation: col 2.0s ease forwards 0s;



}



@keyframes col {

    from {

        color: #fafcdf;

    }



    to {

        color: #8def1d;

        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: 108px;

    bottom: -30px;

    width: 70px;

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

    border-radius: 4px;

    animation: obj 1s ease forwards 0s;

}



@keyframes obj {

    to {

        height: 0px;



    }

}



section {

    padding: 100px 200px;

}



.home {

    position: relative;

    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    flex-direction: column;





}



.home:before {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;



}



.home .content {

    z-index: 2;

    color: #a999f9;



    mix-blend-mode: lighten;



    font-size: 1.5em;

    width: 100%;

    margin-top: 50px;

    display: none;

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



}



.home .content.active {

    display: block;

    text-align: center;

}




.home .content h1 {

    font-size: 4em;

    font-weight: 200;

    text-transform: uppercase;

    letter-spacing: 5px;

    line-height: 75px;

    margin-bottom: 40px;

}

span {

    font-size: 1.0em;

    font-weight: 600;
    color: #09ee23;
    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: rgb(17, 18, 17);

    mix-blend-mode:screen;



}


.home .content h1 span {

    font-size: 1.5em;

    font-weight: 400;

    color: #05e1f5;

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

    -webkit-text-stroke-color: rgb(43, 38, 53);



}



.home .content p {

    margin-bottom: 65px;



}



.home .content a {

    background: #fff;

    padding: 15px 35px;

    color: #e5fe03;

    font-size: 1.1em;

    font-weight: 500;

    text-decoration: none;

    border-radius: 2px;



}






















.lottie-container-hamburger {

    display: none;

}





.lottie-container-logo {

    z-index: 2;



    position: fixed;



    /* transition: 0.3s ease; */

    display: inline-flexbox;

    top: -20%;

    left: 50px;





}



.lottie-container-logo lottie-player {

    width: 30vw;

    animation: przenika 2.8s ease forwards 10s;

}



@keyframes przenika {

    to {

        opacity: 1.0;
        /* zmien tą wartość jak chcesz, żeby zanikał */

    }

}



























.lottie-container-hello {

    margin: auto;

    justify-content: right;

    align-items: center;

    display: flex;

    background-color: transparent;

}



.lottie-container-hello lottie-player {

    width: 200px;

    height: 200px;

}





.lottie-container-logo lottie-player {

    width: 70vw;



    animation: przenika 2.8s ease forwards 10s;

    /* height: 600px; */

}







@media (max-width: 670px) {

    .lottie-container-logo {

        z-index: 2;

        position: fixed;

        padding-top: 20%;



        transition: 0.3s ease;

        display: inline-flexbox;

        padding-inline: 0rem;



        /* top: 30%;

        left: 50%;

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



    }



    .lottie-container-logo lottie-player {

        width: 90vw;



        transform: translate(-10%, 0%);

    }







    #ustka {

        width: 300px;

        height: 180px;

        transform: translate(0%, 50%);

    }



}



@media (max-width: 1040px) {

    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: 7;

    }



    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: #c0bfbf;

        }

    }



    .lottie-container-logo {

        top: 10px;

        left: 15%;

    }



    .lottie-container-hamburger {



        margin: auto;

        justify-content: center;

        align-items: center;

        display: flex;

        background-color: transparent;

        z-index: 8;

        position: fixed;

        top: 10px;

        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: 8;

    }



    .content,

    .content.active {



        h1 {

            font-size: 2em;

            font-weight: 500;

            text-transform: uppercase;

            letter-spacing: 2px;

            line-height: 75px;

            margin-bottom: 40px;

        }



        span {

            font-size: 1.0em;

            font-weight: 600;
            color: #09ee23;
            -webkit-text-stroke-width: 1px;

            -webkit-text-stroke-color: rgb(17, 18, 17);

            mix-blend-mode:screen;



        }

    }





}



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





.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: 50px;

    /* 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: 7;

    font-family: sans-serif;

    transition: opacity 0.5s ease;
    /* ← DODAJ TO */



}