header {
    position: relative;
    z-index: 10000;
}
#dropdown-explore {
    position: absolute;
    z-index: 99999;
}


header, .container {
    overflow: visible;
}

/* Style untuk Garis pada Ikon Hamburger */
.hamburger-line {
    display: block;
    width: 30px; /* Lebar garis */
    height: 3px;  /* Ketebalan garis */
    margin: 6px auto; /* Jarak antar garis */
    background-color: #ffffff; /* Warna putih agar kontras */
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

@import url('https://fonts.cdnfonts.com/css/mulled-wine-season');
        body {font-family: 'Mulled Wine Season', sans-serif;}
        @keyframes blink {
        0% {
        opacity: 1;
        }
        50% {
        opacity: 0;
        }
        100% {
        opacity: 1;
        }
    }

    #map { height: 500px; }
    #kmz-viewer { height: 300px; overflow-y: auto; }

    .animate-blink {
        animation: blink 1s infinite;
    }

    .swiper {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 380px;
        height: 380px;
    }

    .swiper-slide img {
        display: block;
        width: 200%;
    }

    .roll-in-left {
        animation: roll-in-left 0.6s ease-out both;
        }
        /* ----------------------------------------------
        * Generated by Animista on 2024-10-24 8:56:23
        * Licensed under FreeBSD License.
        * See http://animista.net/license for more info.
        * w: http://animista.net, t: @cssanimista
        * ---------------------------------------------- */

        /**
        * ----------------------------------------
        * animation roll-in-left
        * ----------------------------------------
        */
        @keyframes roll-in-left {
        0% {
            transform: translateX(-800px) rotate(-540deg);
            opacity: 0;
        }
        100% {
            transform: translateX(0) rotate(0deg);
            opacity: 1;
        }
        }

        /* carousel */
        .carousel{
            height: 100vh;
            /* margin-top: -50px; */
            width: 100vw;
            /* overflow: hidden; */
            position: relative;
        }
        .carousel .list .item{
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0 0 0 0;
        }
        .carousel .list .item img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .carousel .list .item .content{
            position: absolute;
            top: 20%;
            width: 1140px;
            max-width: 80%;
            left: 50%;
            transform: translateX(-50%);
            padding-right: 30%;
            box-sizing: border-box;
            color: #fff;
            text-shadow: 0 5px 10px #0004;
        }
        .carousel .list .item .author{
            font-weight: bold;
            letter-spacing: 10px;
        }
        .carousel .list .item .title,
        .carousel .list .item .topic{
            font-size: 5em;
            font-weight: bold;
            line-height: 1.3em;
        }
        .carousel .list .item .topic{
            color: #f1683a;
        }
        .carousel .list .item .buttons{
            display: grid;
            grid-template-columns: repeat(2, 130px);
            grid-template-rows: 40px;
            gap: 5px;
            margin-top: 20px;
        }
        .carousel .list .item .buttons button{
            border: none;
            background-color: #eee;
            letter-spacing: 3px;
            font-family: Poppins;
            font-weight: 500;
        }
        .carousel .list .item .buttons button:nth-child(2){
            background-color: transparent;
            border: 1px solid #fff;
            color: #eee;
        }
        /* thumbail */
        .thumbnail{
            position: absolute;
            bottom: 50px;
            left: 50%;
            width: max-content;
            z-index: 100;
            display: flex;
            gap: 20px;
        }
        .thumbnail .item{
            width: 150px;
            height: 220px;
            flex-shrink: 0;
            position: relative;
        }
        .thumbnail .item img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
        }
        .thumbnail .item .content{
            color: #fff;
            position: absolute;
            bottom: 10px;
            left: 10px;
            right: 10px;
        }
        .thumbnail .item .content .title{
            font-weight: 500;
        }
        .thumbnail .item .content .description{
            font-weight: 300;
        }
        /* arrows */
        .arrows{
            position: absolute;
            top: 80%;
            right: 52%;
            z-index: 100;
            width: 300px;
            max-width: 30%;
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .arrows button{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #eee4;
            border: none;
            color: #fff;
            font-family: monospace;
            font-weight: bold;
            transition: .5s;
        }
        .arrows button:hover{
            background-color: #fff;
            color: #000;
        }

        /* animation */
        .carousel .list .item:nth-child(1){
            z-index: 1;
        }

        /* animation text in first item */

        .carousel .list .item:nth-child(1) .content .author,
        .carousel .list .item:nth-child(1) .content .title,
        .carousel .list .item:nth-child(1) .content .topic,
        .carousel .list .item:nth-child(1) .content .des,
        .carousel .list .item:nth-child(1) .content .buttons
        {
            transform: translateY(50px);
            filter: blur(20px);
            opacity: 0;
            animation: showContent .5s 1s linear 1 forwards;
        }
        @keyframes showContent{
            to{
                transform: translateY(0px);
                filter: blur(0px);
                opacity: 1;
            }
        }
        .carousel .list .item:nth-child(1) .content .title{
            animation-delay: 1.2s!important;
        }
        .carousel .list .item:nth-child(1) .content .topic{
            animation-delay: 1.4s!important;
        }
        .carousel .list .item:nth-child(1) .content .des{
            animation-delay: 1.6s!important;
        }
        .carousel .list .item:nth-child(1) .content .buttons{
            animation-delay: 1.8s!important;
        }
        /* create animation when next click */
        .carousel.next .list .item:nth-child(1) img{
            width: 150px;
            height: 220px;
            position: absolute;
            bottom: 50px;
            left: 50%;
            border-radius: 30px;
            animation: showImage .5s linear 1 forwards;
        }
        @keyframes showImage{
            to{
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 0;
            }
        }

        .carousel.next .thumbnail .item:nth-last-child(1){
            overflow: hidden;
            animation: showThumbnail .5s linear 1 forwards;
        }
        .carousel.prev .list .item img{
            z-index: 100;
        }
        @keyframes showThumbnail{
            from{
                width: 0;
                opacity: 0;
            }
        }
        .carousel.next .thumbnail{
            animation: effectNext .5s linear 1 forwards;
        }

        @keyframes effectNext{
            from{
                transform: translateX(150px);
            }
        }

        /* running time */

        .carousel .time{
            position: absolute;
            z-index: 1000;
            width: 0%;
            height: 3px;
            background-color: #f1683a;
            left: 0;
            top: 0;
        }

        .carousel.next .time,
        .carousel.prev .time{
            animation: runningTime 3s linear 1 forwards;
        }
        @keyframes runningTime{
            from{ width: 100%}
            to{width: 0}
        }


        /* prev click */

        .carousel.prev .list .item:nth-child(2){
            z-index: 2;
        }

        .carousel.prev .list .item:nth-child(2) img{
            animation: outFrame 0.5s linear 1 forwards;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        @keyframes outFrame{
            to{
                width: 150px;
                height: 220px;
                bottom: 50px;
                left: 50%;
                border-radius: 20px;
            }
        }

        .carousel.prev .thumbnail .item:nth-child(1){
            overflow: hidden;
            opacity: 0;
            animation: showThumbnail .5s linear 1 forwards;
        }
        .carousel.next .arrows button,
        .carousel.prev .arrows button{
            pointer-events: none;
        }
        .carousel.prev .list .item:nth-child(2) .content .author,
        .carousel.prev .list .item:nth-child(2) .content .title,
        .carousel.prev .list .item:nth-child(2) .content .topic,
        .carousel.prev .list .item:nth-child(2) .content .des,
        .carousel.prev .list .item:nth-child(2) .content .buttons
        {
            animation: contentOut 1.5s linear 1 forwards!important;
        }

        @keyframes contentOut{
            to{
                transform: translateY(-150px);
                filter: blur(20px);
                opacity: 0;
            }
        }
        @media screen and (max-width: 678px) {
            .carousel .list .item .content{
                padding-right: 0;
            }
            .carousel .list .item .content .title{
                font-size: 30px;
            }
        }
        /**typing text**/
        @keyframes typing {
        from { width: 0; }
        to { width: 10%; }
    }

    @keyframes blink {
        50% { border-color: transparent; }
    }

    .typing {
        overflow: hidden;
        white-space: nowrap;
        border-right: 3px solid white;
        width: 0;
        animation: typing 2s steps(10, end) forwards;
    }

    /* Menghapus kursor setelah animasi selesai */
    .typing::after {
        content: "";
        display: inline-block;
        width: 3px;
        height: 1.2em;
        background: white;
        animation: blink 0.8s infinite;
    }

    .typing.done::after {
        display: none; /* Menghilangkan kursor setelah animasi selesai */
    }

    .line-v {
        width: 2px;
        background-color: #d1d5db;
    }
    .line-h {
        height: 2px;
        background-color: #d1d5db;
    }
    .line-connector {
        position: absolute;
        height: 2px;
        background-color: #4b5563;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
    }
    .box:hover {
        background-color: #2563eb;
        color: white;
        box-shadow: 0 0 12px #60a5fa;
        transition: all 0.3s ease-in-out;
    }