body {
    overflow-x: visible;
}
.custom-background {
    background: hsla(0, 95%, 16%, 1);
    background: linear-gradient(-180deg, rgba(67, 0, 0, 0.19) 0%, rgb(45, 1, 1) 20%, hsla(0, 100%, 3%, 1) 40%, hsla(0, 0%, 0%, 1) 65%, hsla(0, 0%, 1%, 1) 100%);
    top: 91%;
    z-index:2;
}
.logo-fn::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 75%;
    top: 12%;
    background-color: #fff;
}
.nav-spy-link:has(.active) > .nav-link {
    color: #fff !important;
    background-color: transparent !important;
}

.nav-spy-link > .nav-link {
    color: #fff !important;
    padding-left: 0px !important;
    background-color: transparent !important;
}

.nav-spy-link:has(.active) {
    text-decoration: underline 3px  #ed0000;
    text-underline-offset: 8px;
}
.footer-bottom {
    border-bottom: .25rem solid #ed0000;
}
.navbar-toggler span {
    display: block;
    background-color: #ed0000;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}

.navbar-dark .navbar-toggler {
    border-color: transparent;
}

button:focus {
    outline: 0 !important;
}

.navbar-toggler {
    border: 0px !important;
}

    /* Define the shape and color of the hamburger lines */
.navbar-toggler span {
    display: block;
    background-color: #ed0000;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}


/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
}

/**
* Animate collapse into X.
*/

/**
* Animate collapse open into hamburger menu
*/

/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg) ;
}
/* middle line goes back to regular color and opacity */
.navbar-toggler span:nth-child(2) {
    opacity: 1;
}
/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg) ;
}

/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}
/* center line goes transparent */
.navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}
/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button  */
.navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg) ;
}

.button-slash-black {
    display: flex;
    /* width: 200px;
    height: 50px; */
    border: 2px solid black;
    background: linear-gradient(-60deg, #000 50%, #fff 50%);
    cursor: pointer;
    background-size: 250% 100%;
    background-position: bottom left;
    transition: all 0.1s ease-out;
    text-decoration: none;
    margin: auto;
}

.button-slash-black span {
    color: black;
    margin: auto;
    letter-spacing: 1px;
}

.button-slash-black:hover {
    text-decoration: none;
    background-position: bottom right;
    color: #fff;
}

.button-slash-black:hover span {
    color: #fff;
}

/* transparent */

.button-slash-transparent {
    display: flex;
    /* width: 200px;
    height: 50px; */
    border: 2px solid white;
    background: linear-gradient(-60deg, #fff 50%, transparent 50%);
    cursor: pointer;
    background-size: 250% 100%;
    background-position: bottom left;
    transition: all 0.1s ease-out;
    text-decoration: none;
    margin: auto;
}

.button-slash-transparent span {
    color: #fff;
    margin: auto;
    letter-spacing: 1px;
}

.button-slash-transparent:hover {
    text-decoration: none;
    background-position: bottom right;
    color: #000;
}

.button-slash-transparent:hover span {
    color: #000;
}

.bg-black {
    background-color: #000;
}

@-moz-document url-prefix() {
    .bg-shadow {
        transform: translateY(-100%);
    }

    .shadow-light {
        transform: translateY(-100%);
    }

    .shadow {
        transform: translateY(-100%);
    }
}

.mystery-card {
    z-index:-1;
    top:65%;
    left: 0%;
}

/* @media (min-width: 401px) and (max-width: 500px) {
    .mystery-card {
        top: 60% !important;
    }
} */

.detail-button {
    bottom: 15%;
    left: 17%;
    z-index: 5;
}

@media (max-width: 500px) {
    .mystery-card {
        top: 60% !important;
    }
}

.font-alamat {
    font-size: 1rem;
}

@media (width <= 400px) {
    .font-alamat {
        font-size: 1.15rem !important;
    }
}

.top-50 {
    top: 50% !important;
}

.start-50 {
    left: 50% !important;
}

.translate-middle {
    transform: translate(-50%, -50%) !important;
}

.object-fit-cover {
    object-fit: cover !important;
}

.object-fit-contain {
    object-fit: contain !important;
}

@media (width > 1024px) {
    .bg-banner {
        object-position: 50% 80px !important;
        height: 100vh !important;
    }

    .video-frame {
        height: 700px !important;
    }
}

@media (width < 1024px) {
    .detail-button {
        left: 50% !important;
        transform: translate(-50%);
    }
}

@media (min-width: 821px) and (max-width: 1024px) and (orientation: landscape ){
    .bg-banner {
        object-position: 50% 60px !important;
        height: 100vh !important;
    }

    .video-frame {
        height: 600px !important;
    }
}

@media (min-width: 968px) and (max-width: 1024px) and (orientation: portrait){
    .bg-banner {
        object-position: 50% 60px !important;
        height: 100% !important;
    }

    .video-frame {
        height: 600px !important;
    }
}

@media (min-width: 821px) and (max-width: 967px) and (orientation: portrait){
    .bg-banner {
        object-position: 50% 10px !important;
        height: 100% !important;
    }

    .video-frame {
        height: 600px !important;
    }
}

@media (min-width: 768px) and (max-width: 820px) {
    .video-frame {
        height: 640px !important;
    }
}

@media (min-width: 700px) and (max-width: 767px) {
    .video-frame {
        height: 600px !important;
    }
}

.video-frame {
    height: 480px;
}

/* .video-frame {
    height: 80vh;
} */

.bg-banner {
    height: 100%;
}

.loop-video {
    margin-top: -40px;
}

@media (width >= 1024px) and (width <= 1279px) {
    .loop-video {
        margin-top: auto !important;
    }

    .detail-button {
        left: 12% !important;
    }
}

@media (width >= 1280px) and (width <= 1300px) {
    .loop-video {
        margin-top: 1rem !important;
    }

    .detail-button {
        left: 10% !important;
    }
}

@media (width >= 1301px) and (width <= 1400px){
    .loop-video {
        margin-top: 4rem !important;
    }
}

@media (width >= 1401px) and (width <= 1500px){
    .loop-video {
        margin-top: 7.5rem !important;
    }
}

@media (width >= 1401px) {
    .loop-video {
        margin-top: 10rem !important;
    }
}