@media screen and (min-width:768px) and (max-width:820px ){
/* nvbar sidbar  */
/* .page-wrapper.extended {
    top: 96px;
} */
.navbar-mobile#mainNavbar {
    position: fixed;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: transparent;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
    z-index: 1000;
    width: 100%;
    border-end-end-radius: 16px;
    border-end-start-radius: 16px;
    -webkit-transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
    -moz-transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
    -ms-transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
    -o-transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}
.navbar-mobile#mainNavbar.scroll-nav {
    background-color: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
    border-end-end-radius: 16px;
    border-end-start-radius: 16px;
}
.navbar-mobile .container-flex {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 44px;
    padding: 0 9%;
    column-gap: 20px;
    margin: 27px 0;
}

.navbar-mobile .container-flex .brand  {
    font-size: 1.4rem;
    text-decoration: none;
    font-weight: 550;
    display: block;
    padding-left: 37px;
    width: 145px;
    margin-top: -22px;
}

.brand  img {
    width: 100%;
}
.navbar-mobile .container-flex .menu-navbar  {
    display: flex;
    flex-direction: row;
    margin-left: auto;
}
.navbar-mobile .container-flex .menu-navbar{
    color: white;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    column-gap: 11px;
    margin-left: auto;
    margin-top: -16px;
}
.navbar-mobile .container-flex .brand-mobile  {
    font-size: 1.4rem;
    text-decoration: none;
    font-weight: 550;
    display: block;
    padding: 12px;
    width: 105px;
    height: 100px;
    margin-top: -28px;
}
.navbar-mobile .container-flex .brand-mobile img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.navbar-mobile .menu-navbar ul li {
    padding: 8px 11px;
    display: block;
}
.navbar-mobile .container-flex .menu-navbar ul.menu li .icon{

    width: 31px;

 }
.navbar-mobile .container-flex .menu-navbar ul.menu li .icon.love{

    width: 41px;

 }
 .navbar-mobile .container-flex .menu-navbar ul.menu li .icon-header-noti{
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 19px;
    background: #ff0400;
    top: 24px;
    text-align: center;
    color: white;
    font-size: 16px;
    margin-left: -16px;
}

.burger {
    width: 37px;
    height: 34px;
    display: flex;
}
.burger img{
    width: 100%;

}

.bg-sidebar{
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1012;
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: 100%;
    /* display: flex; */
    justify-content: flex-end;
    transition: all 0.5 ease;
    -webkit-transition: all 0.5 ease;
    -moz-transition: all 0.5 ease;
    -ms-transition: all 0.5 ease;
}
.show {
    left: 444px;
}
.hidde {
    left: 1182px;
}

/* -- Latar Belakang Overlay -- */
.bg-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1011;
    opacity: 0;
    visibility: hidden; 
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* -- Sidebar Menu -- */
.sidebar {
    position: fixed;
    top: 0;
    right: 0; 
    width: 386px; 
    height: 100%;
    padding: 20px;
    background-color: rgb(20, 20, 20);
    box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.25);
    color: #fafafa;
    z-index: 1012;
    list-style: none;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
}


.bg-sidebar.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.sidebar.is-active {
    transform: translateX(0);
}


.bg-sidebar ul.sidebar li {
    list-style: none;
     font-size: 25px;
}
.bg-sidebar ul.sidebar li a{
    display: block;
    text-decoration: none;
    color: white;
    font-size: 29px;
    font-weight: 500;
    padding-bottom: 10px;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
}
.bg-sidebar ul.sidebar li a:hover{
    border-bottom: 1px solid white;
    margin-left: 20px;
    font-weight: 800;
}

.sub{
    width: 150px;
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition:all 0.5s ease 0s;
    -webkit-transition:all 0.5s ease 0s;
    -moz-transition:all 0.5s ease 0s;
    -ms-transition:all 0.5s ease 0s;
    -o-transition:all 0.5s ease 0s;
}
.sub-show{
    height: 100%;
    opacity: 1;
    visibility: visible;
}

.sub-hidde{
    height: 0px;
    opacity: 0;
    visibility: hidden;
}

.sub .item-sub{
    padding-bottom: 2px;
    transition:all 0.5s ease 0s;
    -webkit-transition:all 0.5s ease 0s;
    -moz-transition:all 0.5s ease 0s;
    -ms-transition:all 0.5s ease 0s;
    -o-transition:all 0.5s ease 0s;
}
.sub .item-sub a:hover{
 border-bottom: 1px solid white;
 margin-left: 10px;
}

/*  */
    /* banner */
.banner-home {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    position: relative;
    cursor: pointer;
    width: 100%;
    /* margin-top: 115px; */
}
.banner-home .img-banner-home {
    display: inline-block;
    overflow: hidden;
    height: 458px;
    width: 100%;
    position: relative;
    cursor: pointer;
    background-position: center;
    z-index: 0;
}

.banner-home .img-banner-home .motive {
    margin-block: -249px;
    margin-left: -29px;
}
.img-banner-home .motive .tage-line-banner {

    padding: 104px;
    background-color: #80808091;
    width: 19%;
    position: absolute;
    margin-left: 85px;
    margin-top: -166px;
    border-radius: 145px;
    box-shadow: 10px -2px 11px rgb(171 171 171 / 88%);
    color: white;

}
.img-banner-home .motive .tage-line-banner2 {

    margin-top: -78px;
    padding: 104px;
    background-color: #80808091;
    width: 19%;
    position: absolute;
    margin-left: -33px;
    border-radius: 134px;
    box-shadow: 2px 6px 8px rgb(171 171 171 / 88%);


}
.img-banner-home .motive .tage-line-banner3 {

    margin-top: -262px;
    padding: 104px;
    font-size: 16px;
    font-weight: 700;
    background-color: #80808091;
    width: 19%;
    position: absolute;
    margin-left: -83px;
    border-radius: 134px;
    box-shadow: 4px -6px 4px rgb(171 171 171 / 62%);
}
.img-banner-home .motive .text-line{
    position: absolute;
    margin-top: -115px;
    margin-left: 8em;
    z-index: 2000;
    font-size: 15px;
    width: 151px;
}
.banner-home .img-banner-home.slick-slide img{
	 width: 100%;
  	height: 100%;
	object-fit: cover;
}
.img-banner-vip {
    display: inline-block;
    overflow: hidden;
    height: 513px;
    width: 100%;
    position: relative;
    cursor: pointer;
    background-position: center;
    background-image: url('../img/image room vip.png');
    background-size: cover;
    z-index: 0;
}
    .img-banner {
        display: inline-block;
        overflow: hidden;
        height: 777px;
        width: 100%;
        position: relative;
        cursor: pointer;
        background-position: center;
        /* background-image: url('../img/image room vip.png'); */
        background-size: cover;
        z-index: 0;
    }
    .image-actifitas .image {
        width: 304px;
        height: 321px;
    }
    .img-banner img{
        max-width: 100%;
        object-fit: cover;
        height: 921px;
    }
    .banner-home .img-banner-menu{
        display: inline-block;
        overflow: hidden;
        height: 652px;
        width: 100%;
        position: relative;
        cursor: pointer;
        background-position: center;
        /* background-image: url('../img/image room vip.png'); */
        background-size: cover;
        z-index: 0;
    }
    .banner-home .img-banner-menu img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .text-menu-banner {
        display: flex;
    }
    .text-menu-banner .text-header {
        display: flex;
        flex-direction: row;
        padding-left: 9px;
        padding-top: 10px;
        font-size: 33px;
        font-weight: 700;
        width: 293px;
    }
    .text-menu-banner .text-header::before {
        content: "";
        width: 13px;
        height: 145px;
        background: white;
        display: block;
        position: absolute;
        margin-top: -268px;
    }

    .text-menu-banner .text-header p.txt-banner {
        margin-top: -271px;
        margin-left: 37px;
        color: white;
    }
    .banner-home .img-banner-menu .container .hero-text{
        display: block;
        position: relative;
        align-content: center;
        justify-items: center;
        text-align:start;
        width: 43px;
        height: 110px;
        margin-top: -387px;
        margin-top: -289px;
        left: 0;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .banner-home .img-banner-menu .container .hero-text .text-header{
        height: 182px;
        padding-left: 19px;
        border-left: 11px solid #f8fafa;
        border-top: none;
    }
    .banner-home .img-banner-menu .container .hero-text .text-header .txt-banner{
        font-weight: 700;
        color: #fff;
        font-size: 50px;
        line-height: 1;
        letter-spacing: 8px;
        padding-top: 8px;
        width: 406px;
    }

    .banner-home .img-home .container .hero-text {
        margin-top: 225px;

    }
    .banner-home .img-home .container .hero-text .text-header {
        display: flex;
        padding-left: 0px;
        flex-direction: column;
        align-items: center;
        border-left: none;
    }
    .br-top-thint.text-header:before {
        content: "";
        background: white;
        width: 97px;
        height: 6px;
        border-radius: 12px;
        display: block;
        /* margin-left: -487px; */
    }
    .banner-home .img-home .container .hero-text .text-header .txt-banner {
        font-weight: 700;
        color: #fff;
        font-size: 40px;
        line-height: 1;
        letter-spacing: 13px;
        padding-top: 8px;
    }
    .hero-txt-widht {
        width: 100%;
    }
    .txt-widht {
        width: 576px;
    }
    .ft-size-txt-banner {
        font-size: 67px;
    }
    /* .mr-top-hero {
        margin-top: 0px;
    } */
    /* .top-hero {
        top: -878px;
    } */
    .left33 {
        left: 0;

    }
    .des-banner {
        display: block;
        position: relative;
        margin-top: 0px;
        width: 260px;
        color: white;
        font-size: 25px;
    }
    /* isi about */
    .content-about .image-logo {
        text-align: center;
        padding: 20px;
        width: 300px;
    }
    .image-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .content-about .isi-about {
        margin-top: 30px;
        font-weight: 500;
        font-size: 27px;
        line-height: 46px;
    }
    .btn-more-about {
        background-color: black;
        color: white;
    }
    .btn-more-about:hover {
        background-color: rgb(252, 252, 252);
        border-color: black;
        color: rgb(5, 5, 5);
    }
    /*inetraksi imge  */
    .image-actifitas {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }
    .image-ak1 {
        width: 80%;
        height: 80%;
    }
    .image-ak1 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .image-ak2 {
        grid-area: image-ak2;
        min-height: 450px;
    }
    .image-ak2 img {
        max-width: 100%;
        height: 473px;
        object-fit: cover;
    }
    /* card menu home */
    .menu-home {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding-top: 66px;
        margin-bottom: 25px;
    }
    .menu-home .card-menu {
        display: flex;
        flex-direction: column;
        width: 275px;
        height: 493px;
        margin-bottom: 20px;
        background-color: #2B2B2B;
        /* gap: 20px; */
    }
    .menu-home .card-menu .image-card-menu {
        display: block;
        position: relative;
        width: 252px;
        height: 241px;
    }
    .menu-home .card-menu .image-card-menu img {
        width: 100%;
        height: 243px;
        border-radius: 10px 0 0 10px;
    }
    .isi-card-menu {}
    .menu-home .card-menu .isi-card-menu .titel-menu {
        color: white;
        font-size: 25px;
        font-weight: 500;
        padding-top: 12px;
        width: 200px;
    }
    .menu-home .card-menu .isi-card-menu .dsc-menu {
        color: white;
        width: 273px;
        padding-right: 9px;
        font-size: 14px;
        margin-top: -7px;
    }
    .menu-home .card-menu .btn-card-home {
        color: #efefef;
        text-decoration-line: underline;
        width: 42px;
        height: 28px;
        padding: 6px;
        font-size: 18px;
        font-weight: 500;
        margin-top: -12px;
    }
    .btn {
        font-weight: 600;
    }
    /* end */
    /*vip room  */
    .banner-vip {
        display: flex;
        position: relative;
        background-image: url('../img/image room vip.png');
        background-position: center;
        background-size: cover;
        max-width: 100%;
        height: 603px;
        padding-top: 73px;
        padding-left: 100px;
        gap: 25px;
    }
    .banner-vip .judul-vip-room {
        color: white;
        border-top: 5px solid;
        width: 87px;
        margin-top: 44px;
    }
    .banner-vip .judul-vip-room p {
        width: 265px;
        font-size: 49px;
        font-weight: 600;
    }
    .banner-vip .des-room {
        width: 339px;
        color: white;
        font-size: 19px;
    }
    .btn-view-room {
        background-color: black;
        color: white;
    }
    .btn-view-room:hover {
        background-color: rgb(252, 252, 252);
        color: rgb(5, 5, 5);
    }
    /* place */
    .place {
        display: block;
        position: relative;
        /* background-image: url('../img/Group 7.png'); */
        background-size: cover;
        max-width: 100%;
        height: 368px;
        /* overflow: auto; */
        justify-content: center;
        text-align: center;
    }
    .isi-place {
        color: rgb(7, 7, 7);
        padding-top: 47px;
    }
    .isi-place .judul-place {
        font-size: 47px;
        font-weight: 600;
    }
    .isi-place p {
        font-size: 57px;
    }

    .mapouter
    {
        height: 404px;
        position: relative;
        text-align: right;
        width: 100%;
        margin-top: 10px;
    }
    .gmap_canvas{
        height: 408px;
        overflow: hidden;
        background: none!important;
        width: 100%;
    }
    .gmap_iframe{
        height: 404px!important;
        width: 100%!important;
    }
    /* contact-us */
    .contact-us {
        display: flex;
        position: relative;
        overflow: hidden;
        background-image: url('../img/bg contect us.png');
        background-size: cover;
        background-position: center;
        height: 711px;
        width: 100%;
        justify-content: center;
    }
    .contact-us .card-contact {
        display: flex;
        position: relative;
        background: rgba(31, 31, 31, 0.5);
        border-radius: 36px;
        top: 281px;
        width: 984px;
        height: 368px;
    }
    .card-contact .isi-contact {
        position: relative;
        justify-items: center;
        align-items: center;
        /* display: flex; */
        flex-wrap: nowrap;
        padding-top: 65px;
        padding-left: 144px;
        width: 966px;
    }
    .isi-contact .contact-header {
        text-align: center;
        padding-left: -28px;
        color: white;
        font-size: 42px;
        font-weight: 600;
    }
    .isi-contact .list-contact {
        display: flex;
        position: relative;
        flex-wrap: wrap;
        width: 100%;
        gap: 62px;
    }
    .list-contact .isi-list {
        display: flex;
        width: 359px;
        color: white;
        font-weight: 600;
    }
    .isi-list p {
        padding-top: 13px;
        padding-left: 29px;
        font-size: 23px;
    }
    /* tittel bast menu  */
    .border-header {
        position: relative;
        width: 8%;
        /* margin-top: 77px; */
        border-top: 7px solid;
    }
    .border-header .bst-text-tittel {
        width: 357px;
        line-height: 0.5;
        padding-top: 14px;
        margin-bottom: 30px;
    }
    .w-text-623{
        width: 623px;
    }
    .border-header .bst-text-tittel p {
        font-size: 54px;
        font-weight: 700;
    }

    /* banner */
    .banner {
        display: block;
        position: relative;
        width: 100%;
        height: 273px;
    }
    .banner-sub {
        display: block;
        position: relative;
        width: 1140px;
        height: 557px;
    }
    .banner-sub img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }
    /* detail header  */

    /* card detail */
    .menu-detail {
        display: flex;
        flex-direction: row;
        width: 100%;
        /* padding-top: 45px;
        column-gap: 10px; */
        align-items: center;
    }
    .menu-detail .image-detail {
        display: flex;
    }


    .menu-detail .img-detail  {
        display: block;
        position: relative;
        width: 317px;
        height: 100%;
        filter: drop-shadow(5px 4px 9px rgba(0, 0, 0, 0.20));
    }
    .menu-detail .img-detail img {
        width: 100%;
        object-fit: cover;
    }
    .menu-detail .detail {
        display: flex;
        justify-content: space-between;
        position: relative;
        background: none;
        top: 0;
        margin-top: 0;
        flex-wrap: nowrap;
    }


    /* detail isi */

    .menu-detail .detail .detail-isi{
        display: block;
        position: relative;
        background-color: black;
        width: 367px;
        height: 528px;
        margin-top: 0px;
    }
    .menu-detail .detail .detail-isi .border-name {
        border-left: 7px solid white;
        margin-left: 48px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        position: relative;
        top: 27px;
    }
    .detail-isi .nama-menu {
        font-size: 38px;
        font-weight: 550;
        width: 287px;
        height: 98px;
        padding-left: 11px;
        color: white;
        padding-top: 0px;
    }
    .detail-isi .dsc {
        display: block;
        position: relative;
        width: 196px;
        margin: 70px 70px;
    }
    .detail-isi .dsc p {
        font-size: 20px;
        color: white;
    }
    .detail-isi .dsc .font-des {
        font-size: 16px;
        margin-top: 20px;
    }
     .detail-isi .harga {
        font-size: 29px;
        margin: 12px 40px;
        color: white;
    }
    .detail-isi .harga .detail-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
     /* .detail-isi .order-now {
        font-weight: 600;
        margin-top: 47px;
    } */
    a {
        text-decoration: none;
        color: #030303;
    }
    /* judul */
    .judul {
        font-weight: 600;
        display: flex;
        position: relative;
        justify-content: center;
        font-size: 42px;
        padding-bottom: 28px;
    }
    .judul2 {
        font-weight: 600;
        display: flex;
        position: relative;
        justify-content:space-between;
        font-size: 42px;
        padding-bottom: 28px;
        column-gap: 77px;
    }
    .judul2 p {
        margin-bottom: 0;

    }
    .judul2 .link-more {
        font-size: 25px;
        margin-top: 19px;
    }
/* menu */
.menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0px 0px;
}
.menu .card-menu{
    width: 23%;
    height: 50%;
    padding: 10px;
    margin-bottom: 32px;
    background: #fff;
}
.menu .card-menu a{
    color: black;
    text-decoration: none;
}

.menu .card-menu a .product-menu{
    border-radius: 10px;
    padding-bottom: 10px;
}
.product-menu .img-menu{
    object-fit: cover;
    width: 100%;
    height: 209px;
}
.product-menu .img-menu img{

}
.menu .card-menu a .product-menu .img-menu .promo{
    position: relative;
    color: white;
    background: rgb(175, 29, 47);
    height: 20px;
    width: 32px;
    padding: 0px 6px;
    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    text-align: center;
    cursor: default;
    display: flex;
    flex-direction: row;
    user-select: none;
    border-radius: 3px;
    z-index: 1;
    top: 20px;
    left: 0px;
}
.product-menu .promo p{

}
.product-menu .img-menu .tittel-menu{
    border-radius: 10px;
    height: 87%;
    width: 100%;
    padding: 7% 11% 7% 11%;
}

.product-menu .img-menu .tittel-menu .footer-name{
    font-size: 15px;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}
.product-menu .img-menu .tittel-menu .footer-harga{
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}
/*  */
    /* footer */
    .footer {
        display: block;
        position: relative;
        max-width: 100%;
        background-color: black;
        color: white;
        background-size: cover;
    }
    .footer .base-part {
        display: inline-flex;
        position: relative;
        width: 100%;
        overflow: hidden;
        padding-left: 1px;
    }
    .base-part .part-menu-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100%;
        padding: 14px 6px;
    }
    .footer .base-part .part-menu-footer .image-logo {
        width: 13%;
        height: 54%;
        padding-top: 10px;
    }
    .base-part .part-menu-footer .image-logo img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .base-part .part-menu-footer .part-bottom-footer {
        display: flex;
        flex-direction: column;
        padding-top: 18px;
    }
    .part-bottom-footer .isi-footer {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    .list-menu-footer {
        list-style: url('../img/poligon.png');
        font-size: 33px;
        font-weight: 600;
    }
    .menu-footer {}

    .navbar-mobile .container-flex .menu-navbar ul.menu {
        text-decoration: none;
        display: flex;
        flex-direction: row;
        column-gap: 11px;
        margin-left: auto;
        color: white;
    }


    .menu:hover {
        color: white;
    }
    .sosial-media {
        list-style: none;
        display: flex;
    }
    .sosial-media .icon-image {
        width: 79%;
        height: auto;


    }
    .sosial-media .icon-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bottom-footer {
        text-align: center;
        padding: 9px;
        width: 722px;
        display: inline-block;
    }
    .bottom-footer p{
        font-size: 16px;
        margin-bottom: 0px;
    }
    .bottom-footer small{
        font-size: 10px;
    }
    /* card banner about  */
    .ps{
        padding: 1px 293px 0px 30px;
        margin-top: -126px;
    }
    .ps .card-bg-about{
        background: rgba(17, 17, 17, 0.51);
        backdrop-filter: blur(2px);
        border-radius: 8px;
        padding: 10px;
        color: white;
        width: 635px;
        height: 278px;
        margin-top: -215px;
    }
    .ps .card-bg-about .border-card{
        border: 2px solid white;
        padding: 20px;
        height: 100%;

    }
    .ps .card-bg-about .border-card .judul-about{
        font-size: 32px;
        font-weight: 800;
    }
    .ps .card-bg-about .border-card .isi-about{
        font-size: 26px;
        width: 100%;
        margin-top: 0;
        font-weight: 0;

        line-height: 34px;
    }

    .judul-border {
        display: inline-block;
        position: relative;
        border-left: 7px solid;
        height: 67px;
    }
    .txt-about{
        font-size: 17px;
    }
    .judul-border .txt-judul {
        padding: 7px 20px;
        width: 324px;
        line-height: 1;
    }
    .judul-border .txt-judul .text {
        font-size: 50px;
        font-weight: 900;;
    }
    .border-h {
        height: 74px;
        margin-bottom: 17px;
    }
    .border-h-145 {
        height: 95px;
    }
    .ft-size-txt-banner {
        height: 145px;
    }
    .w-txt {
        width: 458px;
    }
    .w-txt-363 {
        width: 363px;
    }
    /*  galery */
    .show.slick-slide {
        display: block;
        width: 100%;
        height: 593px;
    }
    .slick-initialized .slick-slide img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .item-slick .list-img {
        width: 213px;
        height: 176px;
    }
    .list-img img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .row-service {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        position: relative;
        width: 100%;
        padding-top: 70px;
    }

    /* service */
    .row-service .service-card {
        display: block;
        position: relative;
        width: 33%;
        height: 100%;
        padding: 5px;
        margin-bottom: -69px;
    }
    .row-service .service-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .js-center {
        justify-content: center;
        align-content: center;
    }
    .row-service .service-card .dsc-service {
        display: block;
        position: relative;
        margin-top: 5px;
        top: -154px;
        padding-left: 7px;
        max-width: 202px;
        width: 273px;
        border-left: 5px solid white;
        margin-left: 13px;
        color: white;
    }
    .row-service .service-card .dsc-service .judul-service {
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 0;
    }
    .row-service .service-card .dsc-service .isi-service {
        font-size: 15px;
    }

    /*registrasi  */
    .pd-top95 {
        padding-top: 95px;
    }
    .pd-top70 {
        padding-top: 70px;
    }
    .pd-bottom30 {
        padding-bottom: 30px;
    }
    .card-auth {
        display: flex;
        flex-direction: row;
        position: relative;
        width: 100%;
        border-radius: 15px;
        background-color: black;
    }
    .card-auth .image-card {
        height: 476px;
        width: 371px;
    }
    .card-auth .image-card img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 18px;
    }
    .card-auth .form-auth {
        display: flex;
        padding: 41px;
        font-size: 19px;
        justify-content: center;
        align-items: center;
    }
    .input-form {
        width: 100%;
    }
    .label {
        font-size: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        color: white;
    }
    .buttom-action-login {
        display: flex;
        position: relative;
        justify-content: center;
        align-content: center;
        background: #fdfcfc;
        width: 100%;
        color: black;
        border-radius: 7px;
        padding: 3px;
        height: 45px;
        font-size: 20px;
        font-weight: 600;
    }
    .buttom {
        border-radius: 10px;
        width: 410px;
        height: 45px;
        font-size: 20px;
        font-weight: 600;
    }
    .buttom:hover {
        background-color: rgb(26, 25, 25);
        color: white;
    }
    .buttom .btn-action {}
    .smal-txt-ection {
        display: flex;
        justify-items: center;
        align-items: center;
        flex-direction: column;
        padding-top: 138px;
        padding-left: 0px;
        color: white;
    }
    .smal-txt-ection a {
        color: white;
    }
    .smal-txt-ection a:hover {
        text-decoration: underline;
    }
    .br-top-thint {
        border-top: none;
    }
    .fw-400 {
        font-weight: 400;
    }
    .ls27 {
        letter-spacing: 23px;
    }
    .ls13 {
        letter-spacing: 13px;
    }

    /* vip room */
    .vip-room {
        display: flex;
        flex-direction: row;
        position: relative;
        width: 100%;
        column-gap: 16px;
    }
    .vip-room .card-room {
        display: block;
        position: relative;
        width: 340px;
        height: 511px;
        padding-bottom: 25px;
    }
    .img-room img {
        max-width: 100%;
        height: 561px;
        object-fit: cover;
    }
    .vip-room .card-room .isi-card-room {
        display: block;
        position: relative;
        top: -354px;
        margin-top: 0;
        padding: 0px 21px;
        width: 309px;
        color: white;
    }
    .border-thint {
        border-top: 3px solid white;
        width: 53px;
    }
    .vip-room .card-room .isi-card-room .border-thint .card-title-room {
        width: 224px;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 7px;
        padding-top: 10px;
    }
    .card-text-room {
        font-weight: 100;
        font-size: 14px;
    }
    .btn-card-room {
        cursor: pointer;
        text-decoration: none;
        padding: 10px;
        border-radius: 5px;
        color: white;
        background: #03030366;
        font-weight: bold;
    }
    .btn-card-room:hover {

        background-color:rgb(255, 254, 254);
        color: rgb(0, 0, 0);
    }

    .img-banner-room{
        display: inline-block;
        overflow: hidden;
        height: 624px;
        width: 100%;
        position: relative;
        cursor: pointer;
        background-position: center;
        background-size: cover;
        z-index: 0;
    }
    .img-banner-room img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .img-banner-room .hero-text{
        display: flex;
        margin-top: -394px;
        position: relative;
        font-size: 22px;
        /* margin-left: 0px; */
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
    .img-banner-room .hero-txt-widht {
        width: 100%;
        margin-left: 0;
    }

    .img-banner-room .bst-text-tittel {
        width: 341px;
        line-height: 1;
        padding-top: 14px;
    }
    .fw-800 {
        font-weight: 800;
    }
    .btn-send{
        width: 100%;
        background: black;
        color: white;
    }
    .btn-send:hover{

        background: rgb(138, 136, 136);
        color: rgb(8, 8, 8);
    }
    /* end detail vip room */

    /* pop up  */
    .modal-popup{
        z-index: 1000;
        position: absolute;
        /* width: 90%; */
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 35px 178px;
    }

    .modal-popup .pesan{
        display: flex;
        background: rgba(19, 19, 19, 0.54);
        backdrop-filter: blur(2px);
        border-radius: 6px;
        height: 400px;
        padding: 31px;
        flex-direction: column;
        align-items: center;
        color: white;
    }
    .modal-popup .pesan .text-popup{
        text-align: center;
    }
    .modal-popup .pesan .image-cek{
        width: 153px;
        height: 157px;
    }
    .modal-popup .pesan .image-cek img{
        width: 100%;

    }
    .modal-popup .pesan .btn-action{
        background: white;
        color: black;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
    }
    .modal-popup .pesan .btn-action:hover{
        background: rgb(90, 89, 89);
        color: rgb(255, 255, 255);

    }

    /* pannel */
    .panel-container .panel{
        display: none;
    }
    .panel-container .panel.active{
        display: flex;
    }
    .panel-container .panel .panel-navigation-row{
        display: flex;
        padding-top: 20px;
        padding-right: 10px;
    }
    .panel .panel-navigation-row .next, .back{
        background: black;
        color: white;
        padding: 6px;
        border-radius: 6px;
        cursor: pointer;
    }


    /* contact us */
.page-content{
    padding: 21px 60px;
}
.m-top-buttom{
    margin: 26px 0;
}
.mapouter{
    position:relative;
    text-align:right;
    width:100%;
    height:400px;
}
.gmap_canvas {
    overflow:hidden;
    background:none!important;
    width:100%;
    height:400px;
}
.gmap_iframe {
    width:100%!important;
    height:400px!important;
}
.btn-send-message{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 20px;
}

/* menu kategori */
.banner-home .img-home{
    width: 100%;
    height: 515px;
}
.banner-home .img-home img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* cart */
.bg-dark {
    background-color: #212529!important;
    padding: 20px;
    height: 293px;
}
.bg-dark .header-cart{
    color: white;
    font-size: 51px;
    font-weight: 800;
    padding: 37px;
    margin-top: 100px;
}

.tabel-cart{
    width: 100%;
}
.tabel-cart tr{
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 5px;
}

.tabel-cart .produk{
    width: 204px;
}

.item-menu .product-order{
    width: 100%;
    height: 72%;
    display: flex;
    flex-direction: column;
    padding: 4px;
}
.product-order img{
    width: 100%;
    height: 50%;
    object-fit: cover;
}
.product-order .nama-menu-tabel{
    font-size: 18px;
    padding-top: 5px;
    font-weight: 800;
}

.item-menu .harga{
    text-align: start;
    font-size: 15px;
}
.item-menu .qty{
    text-align: center;
    font-size: 15px;
}
.item-menu .subtotal{
    text-align: center;
    font-size: 15px;
}
.item-menu .hapus{
    cursor: pointer;
    width: 16px;
    margin-top: -19px;
}
.item-menu .hapus img{
    width: 100%;
    height: 100%;
}
tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    padding: 5px;
}

.card-subtot{
    border: 1px solid;
    border-radius: 12px;
    margin: 22px 0;
    padding: 14px;
}

.card-subtot .card-isi{

}
.card-subtot .card-isi .total-order .subtotal{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.card-subtot .card-isi .total-order .btn-dark-order{
    width: 100%;
    background: black;
    color: white;
}

/* dashboard user */
.header-dashboard{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    width: 100%;
    height: 338px;
}
.header-dashboard .image-bg{
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url('../img/bg-profile2.png');
    background-position: center;
}
/* .header-dashboard .image-bg img{
    width: 100%;
    height: 100%; */

/* } */
.menu-setting-profile {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    padding: 4px 16px;

}
.menu-setting-profile .setting-menu img {
    width: 100%;
    height: 100%;
}
.menu-setting-profile .setting-menu {
    width: 30px;
    height: 30px;
    margin-top: 41px;
}
.off{
    display: none;
}
.header-dashboard  .menu-setting-profile .drop-menu {
    margin-top: 81px;
    z-index: 10000;
    position: absolute;
    background: white;
    color: white;
    border-radius: 10px;
}
.menu-setting-profile .drop-menu ul.itme {
    list-style: none;
    color: black;
    padding: 10px;
}
.drop-menu ul.itme li.itm-menu {
    color: black;
    margin-bottom: 5px;
    cursor: pointer;
}
button.box-panel {
    border: none;
    background: none;
}
.header-dashboard .profile{
    justify-content: center;
    text-align: center;
    padding: 10px;
    width: 74%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}
a {
    text-decoration: none;
    color: black;
}
.header-dashboard a .get-gift {
    display: flex;
    background: white;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    padding: 10px 22px;
    font-weight: 700;
    border-radius: 0px 38px 0px 0px;
    justify-content: space-between;
    font-size: 22px;
}
.get-gift span.txt-button {
    font-size: 20px;
    font-weight: 900;
}

.header-dashboard .profile .img-profile{
    width: 14%;
    height: 47%;
    border-radius: 55px;
    border: 2px solid;
}
.header-dashboard .profile .img-profile img{
    width: 100%;
    height: 100%;
border-radius: 55px;
}
.header-dashboard .profile .point {
    display: flex;
    font-size: 20px;
}
.header-dashboard .profile .nama{
    font-size: 22px;
    font-weight: 800;
}
.header-dashboard .profile .link-halaman{
    font-size: 19px;
    margin-top: 16px;
}

.panel-halaman{
    padding: 15px 0;
}
.panel-halaman .list-panel{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.panel-halaman .list-panel .box-panel{
    display: flex;
    color: white;
    background: black;
    border-radius: 0px 16px 0px 0px;
    height: 37px;
    width: 87px;
    font-size: 11px;
    text-align: center;
    margin-bottom: 5px;
    align-self: center;
    border: none;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-evenly;
}
.panel-halaman .list-panel .box-panel.active{
    color: white;
    background: rgb(128, 128, 128);
    display: flex;
    border-radius: 0px 16px 0px 0px;
    height: 37px;
    width: 103px;
    font-size: 11px;
    text-align: center;
    margin-bottom: 5px;
    align-self: center;
    border: none;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-evenly;
}
.list-history .card-history {
    position: relative;
    width: 47%;

}
.pop-up-qr {
    position: absolute;
    z-index: 2000;
    height: auto;
    padding: 30px 253px;
}
.part-card-gitf .card-gift {
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0px 7px 11px rgb(134 134 134 / 25%);
    width: 326px;
    height: auto;
    background: white;
    padding: 7px;
    display: flex;
    gap: 20px;
}
.part-card-gitf .card-gift .img-card {
    height: 131px;
    width: 124px;
}
.header-part {

    margin-top: 40px;
}
.point-user-rwd {
    display: flex;
    font-size: 17px;
    font-weight: 600;

}
.part-detail {

    margin-bottom: 37px;
}
.part-detail .image-detail {
    width: 100%;
    height: 233px;
}
.part-detail .text-detail {
    margin-top: 10px;
    font-size: 23px;
}
.part-detail .total-point {

    font-size: 22px;
}
}

@media screen and (min-width:1024px) and (max-width:1180px){

    /* navbar */
   .navbar-mobile#mainNavbar {
    position: fixed;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: transparent; 
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; 
    z-index: 1000; 
    width: 100%;
    border-end-end-radius: 16px;
    border-end-start-radius: 16px;
}
.navbar-mobile#mainNavbar.scroll-nav {
    background-color: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
    border-end-end-radius: 16px;
    border-end-start-radius: 16px;
}
    .navbar-mobile .container-flex {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 77px;
        padding: 23px;
        column-gap: 20px;
    }
    .navbar-mobile .container-flex .brand-mobile {
        width: 62px;
        height: auto;
    }
    .navbar-mobile .container-flex .brand-mobile a img {
        width: 100%;
        height: auto;
    }

    /* sidbar */
    /* -- Latar Belakang Overlay -- */
.bg-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1011;
    opacity: 0;
    visibility: hidden; 
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* -- Sidebar Menu -- */
.sidebar {
    position: fixed;
    top: 0;
    right: 0; 
    width: 386px; 
    height: 100%;
    padding: 20px;
    background-color: rgb(20, 20, 20);
    box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.25);
    color: #fafafa;
    z-index: 1012;
    list-style: none;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
}


.bg-sidebar.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.sidebar.is-active {
    transform: translateX(0);
}


    /* banner home */
    .banner-home .img-banner-home {
        display: inline-block;
        overflow: hidden;
        height: 535px;
        width: 100%;
        position: relative;
        cursor: pointer;
        z-index: 0;
    }

    /* about home */
.border-header .bst-text-tittel p {
    font-size: 39px;
    font-weight: 700;
}
    .border-header {
        position: relative;
        width: 4%;
        border-top: 4px solid;
    }
    .border-header .bst-text-tittel {
        width: 352px;
        line-height: 0.5;
        padding-top: 14px;
    }
    .border-header .bst-text-tittel {
        width: 352px;
        line-height: 0.5;
        padding-top: 14px;
    }
    .isi-about p {
        font-size: 24px;
    }

    .image-actifitas {
        display: flex;
        flex-direction: row;
        column-gap: 10px;
        position: relative;
        width: 100%;
        padding-bottom: 23px;
    }
    .image-actifitas .image {
        width: 459px;
        height: 471px;
    }

    /* vip room home */
    .banner-vip {
        display: flex;
        flex-direction: revert;
        position: relative;
        /* background-image: url(../img/image room vip.png); */
        background-position: center;
        background-size: cover;
        justify-content: space-around;
        width: 100%;
        height: 324px;
        padding: 85px;
    }
    .banner-vip .judul-vip-room {
        color: white;
        border-top: none;
        width: 230px;
        margin-top: 44px;
    }
    .banner-vip .judul-vip-room p {
        width: 688px;
        font-size: 31px;
        font-weight: 600;
    }
    .banner-vip .judul-vip-room p:before {
        content: "";
        background: white;
        width: 42px;
        height: 6px;
        border-radius: 10px;
        display: block;
    }
    .banner-vip .des-room {
        width: 265px;
        color: white;
        font-size: 14px;
    }

    /* menu home */
    .menu-home .card-menu {
        border-radius: 10px;
        width: 221px;
        height: 394px;
        padding: 10px;
        padding-bottom: 10px;
        background: #222;
    }

    .menu-home .card-menu .image-card-menu {
        width: 100%;
        height: 200px;
    }
    .menu-home .card-menu .image-card-menu img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
.border-header .bst-text-tittel {
        width: 352px;
        line-height: 0.5;
        padding-top: 25px;
    }
    .place .isi-place p {
        font-size: 38px;
        width: 95%;
    }

    /* about banner */
    .ps .card-bg-about {
        background: rgba(17, 17, 17, 0.51);
        backdrop-filter: blur(2px);
        border-radius: 8px;
        padding: 14px;
        width: 485px;
        color: white;
        margin-top: -261px;
    }

    .ps .card-bg-about .border-card {
        border: 2px solid white;
        padding: 10px;
    }
    .ps .card-bg-about .border-card .isi-about {
        font-size: 20px;
    }

    .judul-border {
        border-left: 7px solid;
        height: auto;
        margin-bottom: 3px;
        padding-left: 10px;
    }

    .judul-border .txt-judul {
        width: 260px;
        height: auto;
    }

    .judul-border .txt-judul .text {
        font-size: 54px;
    	font-weight: 800;
    }
    .content-about {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .content-about .image-logo {
        text-align: center;
        padding: 20px;
        width: 284px;
    }
    .content-about .isi-about {
        padding: 0px 20px 15px;
        font-size: 15px;
    }
    .visi {
        font-size: 20px;
    }
    .content-about .isi-about b {
        font-size: 28px;
    }
    .row-service {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0px 0px;
    }
    .row-service .service-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .row-service .service-card {
        width: 230px;
        height: 100%;
        padding: 5px;
        margin-bottom: 36px;
    }
    .row-service .service-card .dsc-service {
        display: block;
        position: relative;
        margin-top: -108px;
        padding-left: 7px;
        max-width: 140px;
        border-left: 5px solid white;
        margin-left: 13px;
        color: white;
    }
    .row-service .service-card .dsc-service .judul-service {
        font-weight: 700;
        font-size: 15px;
        margin-bottom: 0;
    }

 /* menu */
    .banner-home .img-home {
        width: 100%;
        height: 601px;
    }
    .menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0px 0px;
    }
    .menu .card-menu {
        width: 19%;
        height: 50%;
        padding: 10px;
        background: #fff;
    }


/* detail menu */
    .menu-detail {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        padding-top: 40px;
        gap: 20px;
    }
    .menu-detail .img-detail {
        width: 398px;
        height: 100%;
    }
    .menu-detail .detail {
        padding: 27px;
        background: #1c1c1c;
        margin-top: 2px;
        color: white;
    }
    .menu-detail .detail .detail-isi .border-name {
        height: 96px;
        border-left: 7px solid;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    .detail-isi .border-name .nama-menu {
        font-size: 31px;
        font-weight: 800;
        font-size: 37px;
        font-weight: 550;
        width: 287px;
        height: 98px;
        padding-left: 11px;
        color: white;
        padding-top: 0px;
    }


 /* vip room  */
    .img-banner-vip {
        display: inline-block;
        overflow: hidden;
        height: 513px;
        width: 100%;
        position: relative;
        cursor: pointer;
        background-position: center;
        /* background-image: url(../img/image room vip.png); */
        background-size: cover;
        z-index: 0;
    }
    .left33 {
        left: 0;
    }
    .hero-txt-widht {
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: -webkit-center;
    }
    .br-top-thint {
        border-top: none;
    }
    .br-top-thint.text-header:before {
        content: "";
        background: white;
        width: 65px;
        height: 6px;
        border-radius: 12px;
        display: block;
        margin-left: -457px;
    }
    .ls27 {
        letter-spacing: 23px;
    }
    .fw-400 {
        font-weight: 400;
    }
    .ft-size-txt-banner {
        height: 145px;
    }
    .ft-size-txt-banner {
        font-size: 67px;
    }
    .txt-widht {
        width: 576px;
    }
    .des-banner {
        display: block;
        position: relative;
        margin-top: 0px;
        width: 260px;
        color: white;
        font-size: 25px;
    }
    .vip-room {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0px 0px;
    }
    .vip-room .card-room {
        position: relative;
        width: 49%;
        height: 511px;
        padding-bottom: 25px;
    }
    .vip-room .card-room .isi-card-room .card-text-room {
        font-size: 17px;
    }

 /* detail vip room banner */
    .img-banner-room .hero-txt-widht {
        width: 100%;
        margin-left: 0;
    }
    .img-banner-room .hero-text {
        display: flex;
        margin-top: -394px;
        position: relative;
        font-size: 22px;
        /* margin-left: 0px; */
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .img-banner-room .hero-txt-widht {
        width: 100%;
        margin-left: 0;
    }
    .fw-800 {
        font-weight: 800;
    }
    .ls13 {
        letter-spacing: 13px;
    }
    .br-top-thint.text-header:before {
        content: "";
        background: white;
        width: 97px;
        height: 6px;
        border-radius: 12px;
        display: block;
        /* margin-left: -487px; */
    }

.img-banner-room {
    display: inline-block;
    overflow: hidden;
    height: 509px;
    width: 100%;
    position: relative;
    cursor: pointer;
    background-position: center;
    background-size: cover;
    z-index: 0;
}
    /* footer */
    .footer .base-part .part-menu-footer .image-logo {
    width: 17%;
    height: auto;
}
}