/* global class */
.mg-b-30{
    margin-bottom: 30px;
}

.mobile-header{
    background: #d9d9d9;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-family: 'bahnschrift';
}

.mobile-header .header-left{
    display: flex;
}

.mobile-header .header-txt{
    font-weight: bold;
    margin-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 14px;
}

.mobile-header .header-box{
    display: flex;
    margin-top: auto;
    display: flex;
    margin-bottom: auto;
    margin-right: 20px;
}

.header-box .header-item{
    width: 20px;
    height: 20px;
    margin-left: 3px;
    margin-right: 3px;
}

.header-box .header-item a{
    text-decoration: none;
}

.header-box .header-item a img{
    width: 100%;
    height: 100%;
}

.header-box .header-item span{
    width: 25px;
    height: 25px;
}

.header-box .header-item span img{
    width: 100%;
    height: 100%;
}

.mobile-header .header-link{
    font-size: 10px;
    text-align: end;
    margin-top: auto;
    margin-bottom: auto;
    line-height: 15px;
}

.mobile-header .header-link a{
    color: #CFA322;
}

.mobile-body{
    background: #262523;
    height: 100%;
    width: 100%;
    font-family: 'bahnschrift';
    color: #fff;
}

.mobile-body .desain-top{
    display: flex;
    justify-content: space-between;
    margin: 0px 20px 15px 20px;
    padding: 15px 0px;
    border-bottom: 1px solid #fff;
}

.desain-top .desain-top-l{
    display: flex;
}

.desain-top-l .desain-logo{
    width: 40px;
    height: 40px;
    margin-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

.desain-top-l .desain-logo img{
    width: 100%;
    height: 100%;
}

.desain-top-l .desain-text{
    font-size: 12px;
    margin-top: auto;
    margin-bottom: auto;
}

.desain-text .desain-text-top span{
    color: #cfa322;
}

.desain-text .desain-text-bot span{
    color: #cfa322;
}

.desain-top .desain-top-r{
    width: 20px;
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
}

.desain-top .desain-top-r img{
    width: 100%;
    height: 100%;
}

.mobile-body .desain-slide{
    display: flex;
    flex-direction: column;
    padding: 0px 20px;
    margin-bottom: 30px;
}

.desain-slide .desain-slide-txt{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.desain-slide-txt .slide-txt-left{
    width: 50%;
    font-weight: bold;
    font-size: 18px;
}

.slide-txt-left span{
    color: #cfa322;
}

.desain-slide-txt .slide-txt-right{
    width: 50%;
    font-size: 7.7px;
    text-align: right;
}

.desain-slide .desain-slide-img{
    display: flex;
    flex-direction: column;
    position: relative;
}

.desain-slide-img .slide-img-item{
    height: 250px;
}

.slide-img-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.desain-slide-img .slide-img .banner-nav{
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: flex;
}

.desain-slide-img .slide-img .banner-nav .banner-prev{
    font-size: 20px;
    width: 30px;
    background: #CFA332;
    text-align: center;
}

.desain-slide-img .slide-img .banner-nav .banner-next{
    font-size: 20px;
    width: 30px;
    background: #CFA332;
    text-align: center;
}

.mobile-body .desain-process{
    padding: 0px 20px;
    margin-bottom: 30px;
}

.desain-process .process-img-item{
    position: relative;
}

.process-img-item .img-item{
    width: 100%;
    height: 250px;
}

.process-img-item .img-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
}

.process-img-item .txt-item{
    background: #00000070;
    width: 100%;
    bottom: 0px;
    padding: 15px;
    position: absolute;
}

.process-img-item .txt-item .txt-item-title{
    font-size: 20px;
    font-weight: bold;
}

.process-img-item .txt-item .txt-item-title span{
    color: #CFA332;
}

.process-img-item .txt-item .txt-item-sub{
    font-size: 12px;
}

.process-img .owl-dots{
    display: flex;
    border: 1px solid #aeaeae;
    justify-content: center;
    margin-top: 10px;
    width: 120px;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
}

.process-img .owl-dots .owl-dot{
    width: 40px;
    height: 7px;
}

.process-img .owl-dots .owl-dot.active{
    background: #CFA332;
}

.mobile-body .desain-cat {
    display: flex;
    flex-direction: column;
    padding: 0px 20px;
}

.desain-cat .desain-cat-title{
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}

.desain-cat-title .desain-cat-title-bot{
    font-size: 24px;
    color: #CFA332;
}

.desain-cat .desain-cat-content{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.desain-cat-content .cat-item-count{
    margin-top: -30px;
    background: #CFA332;
    width: 145px;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 5px;
}



/* Container Carousel */
.desain-cat-content-item {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 600px;
    border-radius: 20px;
    overflow: hidden;
}

/* Header Top */
.desain-cat-content-item .cat-content-item-top {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    top: 10px;
    z-index: 4;
}

.cat-content-item-top .cat-item-top-3d,
.cat-content-item-top .cat-item-top-real {
    background: rgba(0, 0, 0, 0.5);
    width: 70px;
    text-align: center;
    border-radius: 20px;
    padding: 5px;
    color: white;
    font-size: 14px;
	transition: all 0.3s linear;
}

.cat-content-item-top .cat-item-top-3d.reverse{
	background: rgba(255, 255, 255, 0.9);
	color: #0a0a0a;
}

.cat-content-item-top .cat-item-top-real.reverse{
	background: rgba(255, 255, 255, 0.9);
	color: #0a0a0a;
}

.cat-content-item-top .cat-item-top-3d {
    margin-left: 10px;
}

.cat-content-item-top .cat-item-top-real {
    margin-right: 10px;
}

/* Gambar 3D dan REAL */
.desain-cat-content-item .cat-content-item-img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
}

.content-multiple-image-bg{
	position:absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-repeat: no-repeat;
	transition: width 0.3s ease;
}

.content-item-img-3d,
.content-item-img-real {
    height: 100%;
    overflow: hidden;
}

.content-item-img-3d.animate{
	transition: width 0.3s linear;
}


.content-item-img-3d {
    width: 50%;
    position: absolute;
	top: 0;
	bottom:0;
	left: 0;
	z-index: 2;
}

.content-item-img-real {
    width: 100%;
    position: absolute;
	top: 0;
	bottom:0;
	left: 0;
	z-index: 1;
}

.desain-cat-content-item .cat-content-item-img img {
    width: unset;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Kontrol Slider */
.content-item-control {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-item-control.animate{
	transition: left 0.3s linear;
}


.vertical-slider {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: ew-resize;
}

.slider-bar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: #00c8c4;
}

.slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: #00c8c4;
    border-radius: 50%;
    cursor: ew-resize;
    z-index: 4;
    text-align: center;
    display: flex;
    justify-content: space-around;
}

.slider-handle i{
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
}

/* Teks Kategori */
.desain-cat-content-item .cat-content-item-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 2;
}

.cat-content-item-text .cat-item-text-cat {
    font-size: 18px;
    color: white;
}

.cat-content-item-text .cat-item-text-title {
    font-size: 20px;
    color: #CFA332;
}

.cat-content-item-text .cat-item-text-qty {
    font-size: 14px;
    margin-bottom: 10px;
    color: white;
}

.cat-content-item-text .cat-item-text-qty span {
    color: #CFA332;
}

.cat-content-item-text .cat-item-text-link{
    border: 1px solid #CFA332;
    padding: 2px 20px;
    text-decoration: none;
    color: #fff;
    border-radius: 20px;
    transition: background 0.3s, color 0.3s;
    width: 130px;
    text-align: center;
}

.cat-content-item-text .cat-item-text-link:hover {
    background: #CFA332;
    color: black;
}

/* Navigasi Carousel */
.desain-cat-content-box .owl-nav {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
}

.desain-cat-content-box .owl-nav .owl-prev,
.desain-cat-content-box .owl-nav .owl-next {
    background: #CFA332;
    font-size: 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 5px;
    cursor: pointer;
    color: #fff;
}

.desain-cat-content-box .owl-nav .owl-prev {
    margin-left: -15px;
}

.desain-cat-content-box .owl-nav .owl-next {
    margin-right: -15px;
}

.desain-cat .desain-cat-info-all{
    background: #CFA332;
    padding: 10px;
}

.desain-cat .desain-cat-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    margin-bottom: 10px;
}

.desain-cat-info .desain-cat-info-title span{
    color: #000;
}

.desain-cat .desain-cat-all{
    display: flex;
    justify-content: center;
}

.desain-cat .desain-cat-all a{
    text-decoration: none;
    color: #fff;
    background: #000;
    padding: 5px 20px;
    display: flex;
    border-radius: 10px;
}

.desain-cat .desain-cat-all a .cat-all-text{
    font-size: 12px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 20px;
}

.desain-cat .desain-cat-all a .cat-all-img{
    width: 15px;
    height: 15px;
}

.desain-cat .desain-cat-all a .cat-all-img img{
    width: 15px;
    height: 100%;
    margin-bottom: 10px;
    margin-left: 10px;
}

.mobile-body .desain-consul{
    padding: 0px 20px;
    font-size: 14px;
    margin-bottom: 30px;
}

.desain-consul .desain-consul-top{
    margin-bottom: 30px;
}

.desain-consul-top .desain-consul-top-title{
    text-align: center;
}

.desain-consul .desain-consul-content{
    display: flex;
    flex-direction: column;
    background: #fff;
}

.desain-consul-content .consul-content-title{
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #000;
    padding: 20px;
    font-weight: bold;
}

.consul-content-title .consul-content-title-top{
    margin-bottom: 10px;
    font-size: 12px;
}

.consul-content-title .consul-content-title-top span{
    color: #CFA332;
}

.consul-content-title .consul-content-title-bot{
    font-size: 15px;
}

.consul-content-title .consul-content-title-bot span{
    color: #CFA322;
}

.desain-consul-content .consul-content-slide{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    position: relative;
}

.consul-content-slide .consul-content-slide-item{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 400px;
    padding: 0px 20px;
}

.consul-content-slide .consul-content-slide-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consul-content-slide .banner-nav{
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    width: 100%;
}

.consul-content-slide .banner-nav .banner-prev{
    width: 30px;
    background: #CFA332;
    font-size: 30px;
    display: flex;
    justify-content: center;
    height: 50px;
    padding: 10px;
}

.consul-content-slide .banner-nav .banner-next{
    width: 30px;
    background: #CFA332;
    font-size: 30px;
    display: flex;
    justify-content: center;
    height: 50px;
    padding: 10px;
}

.desain-consul-content .consul-content-txt{
    text-align: center;
    color: #000;
    padding: 0px 10px;
    font-size: 10px;
    margin-bottom: 30px;
}

.desain-consul-content .consul-content-txt span{
    font-weight: bold;
}

.desain-consul-content .consul-content-line{
    border-bottom: 2px solid #000;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
}

.desain-consul-content .consul-content-bot{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0px 20px;
    margin-bottom: 30px;
}

.consul-content-bot .consul-content-bot-l{
    width: 50%;
    color: #000;
}

.consul-content-bot-l .content-bot-l-t{
    font-size: 17px;
    margin-bottom: 20px;
}

.consul-content-bot-l .content-bot-l-t span{
    font-weight: bold;
}

.consul-content-bot-l .content-bot-l-b{
    font-size: 5px;
}

.content-bot-l-b .bot-l-b-text{
    margin-bottom: 20px;
}

.content-bot-l-b .bot-l-b-link a{
    text-decoration: none;
    background: #CFA332;
    display: flex;
    justify-content: space-between;
    color: #fff;
    border-radius: 20px;
}

.content-bot-l-b .bot-l-b-link a .link-text{
    font-size: 12px;
    margin-left: 10px;
    padding-top: 5px;
    margin-bottom: 5px;
}

.content-bot-l-b .bot-l-b-link a .link-icon{
    background: #ffffff60;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 30px;
}

.content-bot-l-b .bot-l-b-link a .link-icon img{
    width: 20px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-top: 4px;
    margin-left: 5px;
}

.consul-content-bot .consul-content-bot-r{
    width: 50%;
    display: flex;
    justify-content: flex-end;
}

.consul-content-bot-r .content-bot-r-img{
    display: flex;
    flex-direction: column;
    margin-left: auto;
}

.content-bot-r-img .content-bot-r-img-item.top{
    width: 100px;
    height: 70px;
    margin-left: auto;
}

.content-bot-r-img .content-bot-r-img-item.top img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-bot-r-img .content-bot-r-img-item.bot{
    width: 100px;
    height: 70px;
    margin-top: -20px;
    margin-right: 15px;
}

.content-bot-r-img .content-bot-r-img-item.bot img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-body .desain-info{
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    border-top: 2px solid #CFA332;
    border-bottom: 2px solid #CFA332;
    width: 100%;
}

.desain-info .desain-info-left{
    width: 49%;
    padding: 20px 5px;
    display: flex;
    flex-direction: column;
}

.desain-info-left .desain-info-text{
    margin-bottom: 15px;
}

.desain-info-left .desain-info-text span{
    color: #CFA322;
}

.desain-info-left .desain-info-sub{
    font-size: 5px;
    margin-bottom: 20px;
}

.desain-info-left .desain-info-sub span{
    color: #CFA322;
}

.desain-info-left .desain-info-link{
    display: flex;
}

.desain-info-left .desain-info-link a{
    display: flex;
    text-decoration: none;
    color: #fff;
    background: #CFA332;
    border-radius: 10px;
}

.desain-info-left .desain-info-link a .desain-info-link-txt{
    font-size: 8px;
    padding: 0px 5px;
    margin-top: auto;
    margin-bottom: auto;
}

.desain-info-left .desain-info-link a .desain-info-link-icon{
    background: #ffffff50;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

.desain-info-left .desain-info-link a .desain-info-link-icon img{
    width: 14px;
}

.desain-info .desain-info-mid{
    border-left: 2px solid #CFA332;
    width: 2%;
}

.desain-info .desain-info-right{
    width: 49%;
    padding: 20px 10px;
}

.desain-info-right .desain-info-box{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.desain-info-box .desain-info-item{
    display: flex;
    flex-direction: column;
    width: 50%;
}

.desain-info-item .desain-info-item-main{
    color: #CFA332;
    font-size: 26px;
}

.desain-info-item .desain-info-item-sub{
    font-size: 4px;
}

.desain-info-item .desain-info-item-sub span{
    font-weight: bold;
}

.desain-menu-blackout{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 12;
    background: #00000050;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
}

.desain-menu-container{
    width: 100%;
    height: 100%;
}

.desain-menu-content{
    background: #000;
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.desain-menu-content .desain-menu-content-box{
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: end;
    padding: 30px;
}

.desain-menu-content-box .desain-menu-content-item{
    margin-bottom: 5px;
}

.desain-menu-content-item a{
    text-decoration: none;
    color: #fff;
}

.desain-menu-content .desain-menu-close{
    padding: 20px 30px;
    display: flex;
    font-size: 24px;
    justify-content: end;
}

.mobile-body .desain-list-content{
    display: flex;
    flex-direction: column;
    padding: 0px 20px;
}

.desain-list-content .desain-list-top{
    display: flex;
    flex-direction: column;
}

.desain-list-top .desain-list-sub{
    font-weight: bold;
    font-size: 20px;
}

.desain-list-top .desain-list-main{
    font-size: 30px;
    color: #CFA332;
    font-weight: bold;
    margin-bottom: 10px;
}

.desain-list-content .desain-list-search{
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}

.desain-list-search .inSearch{
    width: 100%;
    border: 1px solid #CFA332;
    background: none;
    padding: 5px;
    outline: none;
    color: #fff;
    border-radius: 15px;
}

.desain-list-search .search-icon{
    position: absolute;
    right: 0px;
    background: #CFA332;
    padding: 5px;
    width: 40px;
    text-align: center;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.desain-list-content .desain-list-project{
    display: flex;
    flex-direction: column;
}

.desain-list-content .desain-list-project a{
    text-decoration: none;
    color: #fff;
}

.desain-list-project .desain-list-project-item{
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 20px;
}

.desain-list-project-item .project-item-img{
    position: relative;
    margin-bottom: 10px;
}

.project-item-img .project-item-img-box{
    width: 95%;
    height: 200px;
}

.project-item-img-box .item-img-box{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 180px;
}

.project-item-img-box .item-img-box .img-top{
    top: 0;
    left: 20px;
    position: absolute;
}

.project-item-img-box .item-img-box .img-mid{
    top: 10px;
    left: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 5px 2px 10px rgba(15, 15, 15, 0.6);
}

.project-item-img-box .item-img-box .img-bot{
    top: 20px;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 5px 2px 10px rgba(15, 15, 15, 0.6);
}

.project-item-img .project-item-img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.project-item-img .project-item-img-count{
    position: absolute;
    top: 50%;
    right: 0px;
    z-index: 2;
    background: #00000070;
    padding: 10px;
    border-radius: 50%;
}

.desain-list-project-item .project-item-text{
    padding-left: 10px;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.project-item-text .item-txt-left{
    display: flex;
    flex-direction: column;
    line-height: 30px;
}

.project-item-text .item-txt-left .item-txt-cat{
    margin-bottom: 4px;
}

.project-item-text .item-txt-left .item-txt-main{
    font-size: 27px;
    color: #CFA332;
}

.project-item-text .item-txt-right{
    margin-bottom: auto;
    margin-top: auto;
}

.item-txt-right .item-txt-link a img{
    width: 50px;
}

.project-item-text .item-text-cat{
    font-size: 12px;
}

.project-item-text .item-text-main{
    font-weight: bold;
    color: #CFA322;
}

.project-item-text .item-text-location{
    font-size: 12px;
}

.project-item-text .item-text-link{
    font-size: 12px;
}

.project-item-text .item-text-link a{
    text-decoration: none;
    color: #fff;
    border: 1px solid #CFA332;
    padding: 3px 10px;
    border-radius: 10px;
}

.desain-detail-content{
    display: flex;
    flex-direction: column;
    padding: 0px 20px;
}

.desain-detail-content .desain-detail-nav{
    margin-bottom: 5px;
}

.desain-detail-content .desain-detail-nav .nav-home{
    color: #fff;
}

.desain-detail-content .desain-detail-nav .nav-home-slash{
    color: #fff;
}

.desain-detail-content .desain-detail-nav .nav-cat{
    color: #fff;
}

.desain-detail-content .desain-detail-nav .nav-pt{
    color: #CFA322;
}

.desain-detail-content .desain-detail-title{
    font-size: 24px;
    color: #CFA332;
    font-weight: bold;
    margin-bottom: 10px;
}

.desain-detail-content .desain-detail-slide{
    margin-bottom: 20px;
}

.desain-detail-slide .detail-slide-img{
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 20px;
}

.detail-slide-img .detail-content-img-item{
    width: calc(120vw - 70px);
    height: 220px;
}

.detail-slide-img .detail-content-img-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-slide-img .banner-nav{
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 45%;
    width: 100%;
}

.detail-slide-img .banner-nav .banner-next{
    background: #CFA332;
    padding: 5px 10px;
    margin-right: -15px;
    font-size: 20px;
}

.detail-slide-img .banner-nav .banner-prev{
    background: #CFA332;
    padding: 5px 10px;
    margin-left: -15px;
    font-size: 20px;
}

.detail-slide-img .owl-dots{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.detail-slide-img .owl-dots .owl-dot{
    width: 10px;
    height: 10px;
    background: #4B4B4C;
    border-radius: 20px;
    margin-left: 5px;
    margin-right: 5px;
}

.detail-slide-img .owl-dots .owl-dot.active{
    background: #6f6f70;
}

.desain-detail-content .desain-detail-2d-denah{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.desain-detail-2d-denah .desain-detail-2d{
    display: flex;
}

.desain-detail-2d-denah .desain-detail-2d img{
    width: 100%;
    height: 220px;
}

.desain-detail-2d-denah .detail-2d-denah-nav{
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}

.detail-2d-denah-nav .desain-detail-nav-2d{
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
}

.desain-detail-nav-2d .nav-2d-img{
    margin-right: 10px;
}

.desain-detail-nav-2d .nav-2d-txt{
    margin-top: auto;
    margin-bottom: auto;
}

.desain-detail-nav-2d.active{
    border-bottom: 3px solid #CFA322;
    padding-bottom: 5px;
}

.desain-detail-2d-denah .desain-detail-virtual img{
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.detail-2d-denah-nav .desain-detail-nav-virtual{
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
}

.desain-detail-nav-virtual .nav-virtual-img{
    margin-right: 5px;
}

.desain-detail-nav-virtual .nav-virtual-txt{
    margin-top: auto;
    margin-bottom: auto;
}

.desain-detail-nav-virtual.active{
    border-bottom: 3px solid #CFA322;
    padding-bottom: 5px;
}

.desain-detail-text{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;
    margin-bottom: 20px;
}

.desain-detail-content .desain-detail-other{
    display: flex;
    flex-direction: column;
}

.desain-detail-other .desain-detail-other-title{
    display: flex;
    margin-bottom: 15px;
    text-align: center;
    justify-content: center;
    color: #CFA322;
}

.desain-detail-other .desain-detail-other-content{
    padding: 0px 10px;
}

.desain-detail-other-content .other-content-box{
    display: flex;
    flex-wrap: wrap;
}

.other-content-box .other-content-item{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.other-content-item .other-item-img-box{
    position: relative;
    height: 100%;
    width: 100%;
    margin-bottom: 30px;
}

.other-item-img-box .other-img-box{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 200px;
    width: 300px;
}

.other-item-img-box .other-img-box .other-img-top{
    top: 0;
    left: 20px;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 5px 2px 10px rgba(15, 15, 15, 0.6);
    padding: 20px;
}

.other-item-img-box .other-img-box .other-img-mid{
    top: 10px;
    left: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 5px 2px 10px rgba(15, 15, 15, 0.6);
    padding: 20px;
}

.other-item-img-box .other-img-box .other-img-bot{
    top: 20px;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 5px 2px 10px rgba(15, 15, 15, 0.6);
    padding: 20px;
}

.other-item-img-box .other-img-jml{
    position: absolute;
    top: 50%;
    right: 0;
    background: #00000060;
    padding: 5px 20px;
}

.other-content-item .other-item-txt-box{
    display: flex;
    justify-content: space-between;
}

.other-item-txt-box .other-txt-left{
    display: flex;
    flex-direction: column;
}

.other-item-txt-box .other-txt-left .other-txt-main{
    font-size: 20px;
    color: #CFA322;
}

.other-item-txt-box .other-txt-right{
    margin-top: auto;
    margin-bottom: auto;
}

.mobile-body .desain-custom-underconstructor{
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 300px;
}

.mobile-body .desain-custom-underconstructor img{
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
}

.desain-custom-underconstructor .desain-custom-home{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.desain-custom-underconstructor .desain-custom-home a{
    text-decoration: none;
    color: #CFA322;
    font-size: 18px;
    font-weight: bold;
}

.desain-custom-underconstructor .desain-custom-home a:hover{
    color: #fff;
}




.mobile-body .desain-custom-ruang{
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
}

.desain-custom-ruang .custom-ruang-title{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.custom-ruang-title .custom-ruang-top{
    font-size: 26px;
}

.custom-ruang-title .custom-ruang-main{
    font-size: 100px;
    line-height: 95px;
    font-weight: bold;
    color: #CFA332;
}

.custom-ruang-title .custom-ruang-bot{
    font-size: 26px;
    margin-top: -10px;
}

.desain-custom-ruang .custom-ruang-content{
    display: flex;
    flex-direction: column;
}

.custom-ruang-content .custom-ruang-form{
    display: flex;
    flex-direction: column;
}

.custom-ruang-form .custom-ruang-item{
    display: flex;
    margin-bottom: 10px;
}

.custom-ruang-item label{
    width: 50%;
    color: #CFA332;
}

.custom-ruang-item input{
    border-radius: 10px;
}

.custom-ruang-item .x{
    width: 91.5px;
}

.custom-ruang-item .y{
    width: 91.5px;
}

.custom-ruang-item span{
    margin-left: 5px;
    margin-right: 5px;
}

.custom-ruang-form .custom-ruang-item.btn{
    padding: 0px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 30px;
}

.custom-ruang-item.btn .ruang-item.back{
    background: #fff;
    padding: 5px 15px;
    border-radius: 10px;
    width: 45%;
}

.custom-ruang-item.btn .ruang-item.create{
    background: #CFA332;
    padding: 5px 15px;
    border-radius: 10px;
    color: #fff;
    width: 45%;
}


.mobile-body .custom-layout{
    display: flex;
    flex-direction: column;
    background: #fff;
}

.custom-layout .custom-layout-top{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-size: 22px;
    background: #CFA332;
    align-items: center;
}

.custom-layout-top .custom-layout-top-left{
    display: flex;
}

.custom-layout-top .custom-layout-top-left i{
    margin-right: 20px;
}

.custom-layout-top .custom-layout-top-right img{
    width: 30px;
    height: 30px;
}

.custom-layout .custom-layout-content{
    width: 100%;
    height: 500px;
    padding: 10px;
}

.custom-layout-content .custom-layout-content-main{
    background: #dcdcdc;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .custom-layout-content-main {
        overflow: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

.custom-layout-content-main .grid{
    border: 30px solid #000;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}










.custom-layout .custom-layout-bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 3px solid #dcdcdc;
    padding: 10px;
    background: #fff;
}

.custom-layout-bottom .custom-layout-panel{
    display: flex;
    justify-content: space-between;
    overflow: scroll;
    width: 100%;
    overflow-x: visible;
}

.custom-layout-panel .layout-panel-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    padding-left: 10px;
}

.layout-panel-item.active {
    background-color: #CFA332;
    border-radius: 10px;
}

.layout-panel-item.active img,
.layout-panel-item.active label {
    color: white;
    filter: brightness(0) invert(1);
}

.custom-layout-panel .layout-panel-item img{
    width: 50px;
    height: 50px;
}

.custom-layout-panel .layout-panel-item label{
    font-size: 10px;
    color: #000;
    text-align: center;
}

.custom-layout-bottom .custom-item-panel{
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px solid #000;
    padding: 5px;
    width: 100%;
    border-radius: 20px;
    display: none;
}

.custom-item-panel .tag-product{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

.custom-item-panel .tag-product i{
    color: #000;
    font-size: 25px;
    margin-bottom: 5px;
}

.custom-item-panel .tag-product label{
    color: #000;
    font-size: 9px;
    text-align: center;
}

.custom-item-panel .rotate{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

.custom-item-panel .rotate img{
    width: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    object-fit: cover;
}

.custom-item-panel .rotate label{
    color: #000;
    font-size: 9px;
}

.custom-item-panel .duplicate{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

.custom-item-panel .duplicate img{
    width: 20px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8px;
    object-fit: cover;
}

.custom-item-panel .duplicate label{
    color: #000;
    font-size: 9px;
}

.custom-item-panel .delete{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

.custom-item-panel .delete img{
    width: 20px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
    object-fit: cover;
}

.custom-item-panel .delete label{
    color: #000;
    font-size: 9px;
}



.item-blackout{
    position: absolute;
    bottom: 110px;
    background: #fff;
    color: #000;
    border-top: 5px solid #dcdcdc;
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: none;
}

.item-container{
    width: 100%;
    height: 250px;
}

.item-content{
    display: flex;
    height: 100%;
    overflow: scroll;
    flex-wrap: wrap;
    justify-self: center;
}

.item-content .item{
    padding: 20px;
    text-align: center;
    width: 22%;
    height: 130px;
    border: 1px solid transparent;
    margin: 5px;
}

.item-content .item.selected{
    border: 1px solid #CFA332;
    border-radius: 10px;
}

.item-content .item img{
    width: 100%;
    margin-bottom: 10px;
}

.item-content .item label{
    text-align: center;
    display: flex;
    justify-content: center;
    font-size: 10px;
}

.mobile-body .desain-contact{
    padding: 0px 20px;
    display: flex;
    flex-direction: column;
}

.desain-contact .desain-contact-title{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.desain-contact-title .desain-contact-title-main{
    font-size: 85px;
    line-height: 90px;
    color: #CFA332;
    font-weight: bold;
}

.desain-contact-title .desain-contact-title-sub{
    font-size: 24px;
}

.desain-contact .desain-contact-content{
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.desain-contact-content .desain-contact-content-box{
    display: flex;
    flex-direction: column;
}

.desain-contact-content-box .desain-contact-content-item{
    margin-bottom: 10px;
}

.desain-contact-content-item span{
    display: flex;
}

.desain-contact-content-item span .contact-item-icon{
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

.desain-contact-content-item span .contact-item-icon img{
    width: 100%;
    height: 100%;
}

.desain-contact-content-item span .contact-item-txt{
    margin-top: auto;
    margin-bottom: auto;
    font-size: 20px;
    color: #CFA332;
}

.desain-contact-content-item a{
    display: flex;
    text-decoration: none;
}

.desain-contact-content-item a .contact-item-icon{
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

.desain-contact-content-item a .contact-item-icon img{
    width: 100%;
    height: 100%;
}

.desain-contact-content-item a .contact-item-txt{
    margin-top: auto;
    margin-bottom: auto;
    font-size: 20px;
    color: #CFA332;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(0.9, 0.9);
    }
    50% {
        transform: scale(0.7, 0.7);
    }
    100% {
        transform: scale(0.9, 0.9);
    }
}

.float-wa{
	position: fixed;
	z-index: 30;
	padding: 5px 25px;
	right: 15px;
	bottom: 60px;
	border-radius: 30px;
	width: 155px;
	cursor: pointer;
    animation: zoom-in-zoom-out 5s ease infinite;
    background-color: #1b9b11;
    color: #fff;
}

.float-wa .float-wa-icon svg{
	width: 20px;
    color: white;
	fill: currentColor;
}

.float-wa .float-wa-text{
	font-size: 16px;
	vertical-align: sub;
}