@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-image: url('assets/dom1.jpg');

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-size: cover;

    

  }







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;



}







/* svg napis style*/



.svgbrand {

    fill: none;

    stroke: white;

    stroke-miterlimit: 10;

    stroke-width: 0.4px;

    z-index: 1;



    width: 80vw;

    transform: scale(2.5);

    filter: drop-shadow(2px 2px 4px rgba(3, 251, 114, 0.5));

}





#svgnapis {

    position: relative;

    top: 0%;

    left: 0%;

    transform: translate(0%, 0%);

    animation: fill 0.8s ease forwards 3s;

}



#svgnapis path:nth-child(1) {

    stroke-dasharray: 315.05px;

    stroke-dashoffset: 315.05px;

    animation: line-anim 4s ease forwards;

}



#svgnapis path:nth-child(2) {

    stroke-dasharray: 62.75px;

    stroke-dashoffset: 62.75px;

    animation: line-anim 2s ease forwards 0.3s;

}



#svgnapis path:nth-child(3) {

    stroke-dasharray: 84.84px;

    stroke-dashoffset: 84.84px;

    animation: line-anim 2s ease forwards 0.6s;

}



#svgnapis path:nth-child(4) {

    stroke-dasharray: 84.79px;

    stroke-dashoffset: 84.79px;

    animation: line-anim 2s ease forwards 0.9s;

}



#svgnapis path:nth-child(5) {

    stroke-dasharray: 141.08px;

    stroke-dashoffset: 141.08px;

    animation: line-anim 2s ease forwards 1.2s;

}



#svgnapis path:nth-child(6) {

    stroke-dasharray: 279.75px;

    stroke-dashoffset: 279.75px;

    animation: line-anim 2s ease forwards 1.5s;

}



#svgnapis path:nth-child(7) {

    stroke-dasharray: 141.08px;

    stroke-dashoffset: 141.08px;

    animation: line-anim 2s ease forwards 1.5s;

}



#svgnapis path:nth-child(8) {

    stroke-dasharray: 57.42px;

    stroke-dashoffset: 57.42px;

    animation: line-anim 2s ease forwards 1.5s;

}



#svgnapis path:nth-child(9) {

    stroke-dasharray: 141.08px;

    stroke-dashoffset: 141.08px;

    animation: line-anim 2s ease forwards 1.5s;

}



@keyframes line-anim {

    to {

        stroke-dashoffset: 0;

    }

}



@keyframes fill {

    from {

        fill: transparent;

    }



    to {

        fill: rgb(255, 255, 255);

    }

}



/* svg napis style end */



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: 0.3s ease;

}





#kontakt {

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

}



section {

    padding: 100px 200px;

}



.home {

    padding-left: 0%;

 

    position: relative;

    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    flex-direction: column;

    background: rgba(245, 201, 143, 0.247);

  

}



.home:before {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;



}



.home .content {

    z-index: 2;

    color: #fff;

    width: 70%;

    margin-top: 50px;

    padding-left: 0%;

    display: none;

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



}



.home .content.active {

    

    display: block;

    text-align: center;

}



.whatsapp{

    

    width: 70%;

    display:block;

    text-align: center;

    position:relative;

    /* justify-content: center; */

    z-index: 2;

}



.home .content h1 {

    font-size: 4em;

    font-weight: 200;

    text-transform: uppercase;

    letter-spacing: 5px;

    line-height: 75px;

    margin-bottom: 40px;

}



.home .content h1 span {

    

    font-size: 2.2em;

    font-weight: 400;

    color: #05e1f5;

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

    -webkit-text-stroke-color: rgb(85, 4, 247);



}

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



}









.home video {

    z-index: 000;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.map{

    z-index: 6;



}



#ramkamapa{

    width:90%;

    height:600px;

}





/* Set the size of the div element that contains the map */





.lottie-container{

    display:none;

}





@media (max-width: 1040px) {

    header {

        padding: 12px 20px;

    }



    section {

        padding: 100px 20px;

    }



    .home .media-icons {

        right: 10px;

    }



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



        margin: auto;

        justify-content:center;

        align-items:center;

        display: flex;

        background-color: transparent;

        z-index:8;

        position:fixed;

        top:20px;

        right:20px;

        transition: 0.3s ease;

        }



        .lottie-container:hover {

            scale: 1.3;

        }



    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{

        width:200px;

        margin:auto;

  

      

        h1 {

            font-size: 2em;

            font-weight: 500;

            text-transform: uppercase;

            letter-spacing: 2px;

            line-height: 75px;

            margin-bottom: 40px;

        }

        

        span {



            font-size: 1em;

            font-weight: 100;

        

        }





    }

    .map{

        width:100%;

    }



    



}



.whatsapp{

    margin: auto;

}



.map{

    width:110%;

}

/* text-align: right;

align-items: right;

justify-content: right; */



/* scroll video */



.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.008), rgba(0,0,0,0.9)); */

  }

  



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

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

  }

  

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

  }