@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
#loader {
    width: 100%;
    height: 100vh;
    background-color: white;
    position: absolute;
    z-index: 10;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    position: relative;
    overflow: hidden;
}
body::-webkit-scrollbar {
    width: 0;
}

/* .hidden {
    display: none;
} */

.width-zero {
    width: 0;
}

.zIndex-1 {
    z-index: 1 !important;
}

.iframe-container {
    position: absolute;
    width: 100%;
    height: 100vh;
    /*background-color: blue;*/
    z-index: 11;
}
.iframe-container > iframe {
    width: 100% !important;
    height: 100% !important;
}

/* New CSS Start */

.iframe-container > .option-container {
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(0,-50%);
    /* background-color: #55041d ; */
    border: 2px solid #e5ba5c;
    color: white;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2px;
    transition: 1s;
}

.option-container .wrapper {
    background-color: rgba(14, 28, 64, 0.8);
}

.option-container .line {
    width: 80%;    
    height: 3px;
    background-color: #e5ba5c;
    margin-bottom: 16px;
}

.option-container .option, 
.option-container .logo {
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    margin-bottom: 20px;
} 

.option-container .logo {
    margin-bottom: 40px;
}

.btn-toggle-navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.btn-toggle-navbar img {
    width: 20px;
}

.side-btn {
    position: absolute;
    top: 50%;
    left: calc((1% + 90px - 8px));
    width: 50px;
    height: 90px;
    /* border-radius: 50%; */
    transform: translate(0, -50%);
    z-index: -1;
    cursor: pointer;
    background-color: unset !important;
    background-image: url("../asset/sidenav/mshape.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.iframe-container > .option-container.hideBar {
    left: -100px;
    transition: 1s;
}


.option-container .option .icon  {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.option-container .option .icon img {
    width: 35px;
    width: 35px;
    object-fit: cover;
}

.option-container .logo .icon img {
    width: 90px;
    height: 90px;
    padding-inline: 10px;
    object-fit: contain;
}

.option-container .option .text {
    font-size: 0.6rem;
    text-transform: uppercase;
    font-family: "Cinzel", serif !important;
    /* font-family: PassionSansPDaiSemiBold; */
    margin-top: 8px;
    font-weight: 500;
    transform: 1s;
}
.option-container .option.active .text {
    font-size: 0.6rem;
    text-transform: uppercase;
    font-family: "Cinzel", serif !important;
    /* font-family: PassionSansPDakBold; */
    font-weight: 700;
    transform: 1s;
}

.option-container .logo .line {
    margin-top: -20px;
    margin-bottom: 20px;
}

.option-container .option .line{
    width: 0%;
    transition: 1s;
}

.option-container .option.active .line {
    width: 40%;
    transition: 1s;
}

/* New CSS End */
.content-container-2 img {width: 100%; height: auto; object-fit: contain;}
.content-container, .content-container-2 {
    /*position: absolute;*/
    /*width: 100%;*/
    /*height: 100vh;*/
    /*background-color:rgb(0 0 0 / 20%);*/
    /*z-index: 0;*/
    /*overflow-y: scroll;*/
    position: absolute;
    left: 100%;
    width: 100%;
    height: 100vh;
    background-color:rgb(0 0 0 / 20%);
    z-index: 0;
    overflow-y: scroll;
}
.content-container::-webkit-scrollbar, .content-container-2::-webkit-scrollbar{
    width: 0;
}
.content-container > .close-floor, .content-container-2 > .close-floor{
    position: fixed;
    top: 4%;
    right: 3%;
    font-size: 7dvh;
    cursor: pointer;
    color: white;
    background-color: black;
    padding: 4px;
    z-index: 999;
}
/* .content-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
} */

.mapify-holder.active {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}


.clickable-div {
  background: transparent;
}
.fullscreen-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  justify-content: center;
  align-items: center;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
.fullscreen-image img {
  /*max-height: 100%;*/
  max-width: 100%;
  /*height: 100%;*/
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: black;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 22px;
  font-weight: bold;
}



@media only screen and (max-width: 750px) {
    .content-container > .close-floor, .content-container-2 > .close-floor{
        font-size: 3dvh;
    }
    .iframe-container > .option-container {
        padding: 0;
        border: 1px solid #d5a060;
        left: 2%;
    }
    .text p {
        font-size: 7px;
    }
    .option-container .logo {
        margin-bottom: 0px;
        width: 60px;
    }
    .option-container .option {
        width: 70px;
    }
    .option-container .logo {
        margin: 0 auto 20px auto;
        width: 60px;
    }
    .option-container .logo .icon img {
        width: 70px;
        padding-inline: 8px;
    }
    .option-container .option, 
    .option-container .logo {
        margin-bottom: 10px;
    }
    .option-container .option .icon img {
        width: 25px;
    }
    
    
    .side-btn {
        left: calc((1% + 72px - 8px));
        width: 40px;
    }
    
     .iframe-container > .option-container.hideBar {
        left: -17%;
    }
}


/*@media screen and (width <= 750px) {*/
/*    .content-container > .close-floor {*/
/*        font-size: 3dvh;*/
/*    }*/
/*}*/