:root{
    --gold:#A68C3F;
    --transition:all .3s ease-in-out;
}

@font-face {
    font-family: "Avenir";
    src: url("../fonts/Avenir.ttc");
    font-display: swap;
}
@font-face {
    font-family: "Avenir";
    src: url("/fonts/AvenirNextLTProRegular.otf");
}
 
@font-face {
    src: url("/fonts/AvenirNextLTProIt.otf");
    font-family: Avenir-italic;
}
 
@font-face {
    src: url("/fonts/AvenirNextLTProBold.otf");
    font-family: Avenir-b;
}
@font-face {
    src: url("/fonts/29lt-bukra.ttf");
    font-family: "29lt-bukra";
}
@font-face {
    src: url("/fonts/29lt-bukra-bold.ttf");
    font-family: "29lt-bukra-bold";
}
@font-face {
    src: url("/fonts/bukraBold.ttf");
    font-family: "bukraBold";
}
@font-face {
    font-family: "Ge-Dinar Medium";
    src: url("/fonts/GEDinarOneMedium.otf");
}
.info.btnIcon:hover ~ #info1,
.safariIcon.btnIcon:hover ~ #info2,
.replay.btnIcon:hover ~ #info3 {
  display: block;
  animation:1s ZoomInFade forwards;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1);
    border-color:white;
  }
  50% {
    transform: scale(1.2);
    border-color:white;
  }
  100% {
    transform: scale(1);
  }
}
html, body{
    user-select: none;
    background-color: black;
    overflow-x: hidden;
}
.zoomOutBeforeFade {
  transform: scale(1);
  transition: transform 1s ease, opacity 1s ease;
}

.zoomOutBeforeFade.zoomed {
  transform: scale(3);
  opacity: 0;
}

.galleryInfo.modal {
    width: auto;
    height: auto;
    background: linear-gradient(to right, rgb(0 0 0 / 72%), rgb(0 0 0 / 67%), transparent);
    top: 10rem;
    /* position: relative; */
    z-index: 3;
    backdrop-filter: blur(2px);
}
/* blur overlay */
.galleryInfo.modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit; /* copies the same background as parent */
  filter: blur(25px)!important;
  /* progressive mask */
  -webkit-filter: blur(25px);
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 27%) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to right, rgb(0 0 0 / 27%) 0%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.galleryInfo.modal .galleryTitle{
    font-size: 1.15rem;
    color:white;
    text-transform: uppercase;
    letter-spacing: .07rem;
}
.galleryInfo.modal .galleryDescription{
    color: rgb(255 255 255 / 67%);
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient:vertical;
    font-size: 0.9rem;
    line-height:1.8;
    text-align: justify;
}
@keyframes moveToCenter{
    0%{
         top: 10rem;
        left:0;
        transform:translate(0,0);
    }
    100%{
         left: 50%;
         top: 50%;
         transform:translate(-50%,-50%)
    }
}
.galleryInfo.modal.moveCenter {
    height: auto;
    max-height: 80%;
    width: 95%;
    overflow:auto;
    border-radius: 1.5rem!important;
    border: 1px solid rgb(255 255 255 / 19%);
    background: linear-gradient(to right, rgb(0 0 0 / 25%), rgb(0 0 0 / 42%));
    backdrop-filter: blur(31px);
    text-align: justify;
    animation: 1s moveToCenter forwards;
    opacity: 1;
}
.galleryInfo.modal.moveCenter .modal-body .galleryDescription{
    display: block!important;
    overflow:visible;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    padding: 1rem 0.3rem;
}
.galleryInfo.modal.moveCenter .modal-footer{display:none;}
.galleryInfo.modal .modal-header{
    display:flex;
    justify-content:space-between;
    /* background: linear-gradient(
343deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%); */
    border-radius: 0!important;
    background-image: url("/media/pattt.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.galleryInfo.modal .modal-header{
    padding: 1rem 0.5rem 1rem 1.5rem;
    border: none;
    z-index: 1;
    position: relative;
    background-image: url("/media/headerpattt.png");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgb(255 255 255 / 15%);
}
.galleryInfo.modal .modal-footer{
    padding: .8rem 1.5rem;
    z-index: 1;
    position: relative;
    border:none;
    background: linear-gradient(
246deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
}
.galleryInfo.modal .modal-body{
    padding: 1rem;
    border-radius: 0;
}
.galleryInfo.modal .modal-header button.close{
    background-color: rgb(255 255 255 / 40%) !important;
    border-radius:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    height: 2.1rem;
    width: 2.1rem;
    padding: 0!important;
    margin: 0!important;
}
.galleryInfo.modal .modal-footer{
    display:flex;
    justify-content:flex-start;
}
.galleryInfo.modal .modal-footer button{
    border:none;
    background-color:transparent;
    color: var(--gold);
    font-size: .85rem;
    margin: 0;
    text-transform: capitalize;
}
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* Hero section transition */
.heroSection {
    transition: all 0.8s ease;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.tourContainer{
    display:none;
    background-color: black;
}
/* Pano container styling */
#pano {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease;
}

#pano.show {
    opacity: 1;
}
.loading-overlay.active {
  opacity: 1;
}

.loading-content {
  text-align: center;
  color: white;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.loading-overlay.active .loading-content {
  transform: translateY(0);
}

.loading-progress {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
  font-family: 'YourSansFont', sans-serif;
}

.loading-text {
  font-size: 1.2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fade-transition {
  position: relative;
}

.fade-transition .barba-container {
  position: absolute;
  width: 100%;
}
[data-barba="container"] {
  position: relative;
  z-index: 1;
}
a{
    text-decoration: none;
}
.container{
    max-width: 100%!important;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0;
}
@font-face {
  font-family: avenir-lt;
  src: url("../fonts/avenirnextltproregular.otf");
}
@font-face {
  src: url("../fonts/AvenirNextLTProIt.otf");
  font-family: Avenir-italic;
}
@font-face {
  src: url("../fonts/AvenirNextLTProBold.otf");
  font-family: Avenir-b;
}
@font-face {
  font-family: ge-dinar;
  src: url("../fonts/GEDinarOneMedium.otf");
}
@keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@keyframes moveLeft{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-100%);
    }
}
@keyframes fadeUpLoading{
   0%{
    opacity: 0;
    transform: translateY(100%);
   } 
   100%{
    opacity: 1;
    transform: translateY(0%);
   } 
}
@keyframes moveVideoToCenter{
    0%{
        right:7rem;
        transform:translateX(0);
    }
    100%{
       right:50%;
       transform:translateX(50%);
    }
}
@-webkit-keyframes smallBoxAnim {
  0% {
      transform: scale(0.2);
  }

  100% {
      transform: scale(0.75);
  }
}
@keyframes smallBoxAnim {
  0% {
      transform: scale(0.2);
  }

  100% {
      transform: scale(0.75);
  }
}
@-webkit-keyframes loaderAnim {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(90deg);
  }
}
@keyframes loaderAnim {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(90deg);
  }
}
@keyframes slideupp {
  0% {
      transform: translateY(200%);
  }

  100% {
      transform: translateY(0%);
  }
}
@keyframes slideUp {
  0% {
      transform: translateY(200%);
  }

  100% {
      transform: translateY(0%);
  }
}
@keyframes slideDown {
  0% {
      transform: translateY(-200%);
  }

  100% {
      transform: translateY(0%);
  }
}
@keyframes slideUp1 {
  0% {
      transform: translateY(2rem);
  }

  100% {
      transform: translateY(-12rem);
  }
}
@keyframes timeline-up {
  0% {
      transform: translateX(250%);
  }

  100% {
      transform: translateX(0%);
  }
}
@keyframes fadeout {
  0% {
      opacity: 1;
  }

  100% {
      opacity: 0;
  }
}
@keyframes fadein {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}
@keyframes navbar-reveal {
  0% {
      transform: translateY(-100%);
  }

  100% {
      transform: translateY(0%);
  }
}
@keyframes navbar-fullscreen {
  0% {
      transform: translateY(0%);
  }

  100% {
      transform: translateY(-100%);
  }
}
@keyframes anim-lineUp {
  0% {
      opacity: 0;
      transform: translateY(200%) scale(0);
  }

  20% {
      opacity: 0;
  }

  50% {
      opacity: 1;
  }

  100% {
      opacity: 1;
      transform: translateY(0%) scale(1);
  }
}
@keyframes anim-lineUp1 {
  0% {
      opacity: 0;
      transform: translateY(80%);
  }

  20% {
      opacity: 0;
  }

  50% {
      opacity: 1;
  }

  100% {
      opacity: 1;
      transform: translateY(0%);
  }
}
@keyframes nav-item-reveal {
  0% {
      transform: translateY(20%);
      opacity: 0;
  }

  100% {
      transform: translateY(0%);
      opacity: 1;
  }
}
@keyframes menuextend {
  0% {
      transform: translateX(-100%);
  }

  100% {
      transform: translateX(0%);
  }
}
@keyframes menucollapse {
  0% {
      transform: translateX(0%);
      opacity: 1;
  }

  100% {
      transform: translateX(-100%);
      opacity: 0;
  }
}
@keyframes close-btn-reveal {
  0% {
      right: 0px;
      opacity: 0;
  }

  100% {
      opacity: 0.8;
      right: 2rem;
  }
}
@keyframes links-reveal {
  0% {
      transform: translateX(-20%);
      opacity: 0;
  }

  100% {
      transform: translateX(0%);
      opacity: 1;
  }
}
@keyframes ts-dropdown {
  0% {
      opacity: 0;
      transform: translateY(-10%);
  }

  100% {
      opacity: 1;
      transform: translateY(0%);
  }
}
@keyframes search-popup-question {
  0% {
      opacity: 0;
      transform: translateY(-100%);
  }

  100% {
      opacity: 1;
      transform: translateY(0%);
  }
}
@keyframes search-popup-form {
  0% {
      opacity: 0;
      transform: translateY(-100%);
  }

  100% {
      opacity: 1;
      transform: translateY(0%);
  }
}
@keyframes search-popup-decoration {
  0% {
      transform: translateY(100%);
  }

  100% {
      transform: translateY(0%);
  }
}
@keyframes search-popup-anim {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}
@keyframes roomgallery-hide {
  0% {
      opacity: 1;
  }

  100% {
      opacity: 0;
  }
}
@keyframes roomgallery {
  0% {
      transform: translateY(100%);
      opacity: 0;
  }

  100% {
      transform: translateY(0%);
      opacity: 1;
  }
}
@keyframes roomgallery-alt {
  0% {
      filter: grayscale(1);
  }

  100% {
      filter: grayscale(0);
  }
}
@keyframes roomgallery-prevbutton {
  0% {
      left: -3rem;
      opacity: 0;
  }

  100% {
      left: 1rem;
      opacity: 1;
  }
}
@keyframes roomgallery-nextbutton {
  0% {
      right: -3rem;
      opacity: 0;
  }

  100% {
      right: 1rem;
      opacity: 1;
  }
}
@keyframes roomgallery-close {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}
@keyframes room-details-active {
  0% {
      transform: translateX(100%);
  }

  100% {
      transform: translateX(0%);
  }
}
@keyframes room-details-inactive {
  0% {
      transform: translateX(0%);
  }

  100% {
      transform: translateX(100%);
  }
}
@keyframes artificats-selected {
  0% {
      transform: translateX(-100%);
      opacity: 0;
  }

  100% {
      transform: translateX(0%);
      opacity: 1;
  }
}
@keyframes bottomnav {
  0% {
      opacity: 0;
      transform: translateY(100%);
  }

  100% {
      opacity: 1;
      transform: translateY(0%);
  }
}
@keyframes topheader {
  0% {
      opacity: 0;
      transform: translateY(-100%);
  }

  100% {
      opacity: 1;
      transform: translateY(0%);
  }
}
@keyframes soundcontrol {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}
@keyframes popupremove {
  0% {
      opacity: 0.1;
  }

  100% {
      opacity: 1;
  }
}
@keyframes moon {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}
@keyframes btnreveal {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}
header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    animation: 1s navbar-reveal forwards;
    display: block;
    opacity: 1;
}
.tourStarted header::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: linear-gradient(rgb(0 0 0 / 55%), rgb(0 0 0 / 44%), rgb(0 0 0 / 33%), rgb(0 0 0 / 22%), #00000000);

  /* Smooth glass blur effect */
    /* backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); */

  /* Remove harsh borders */
    border: none;
    box-shadow: none;

  /* Optional: smooth transitions if opacity changes */
    transition: backdrop-filter 0.3s ease, background 0.3s ease;

  /* Optional: smooth transition if you animate it later */
    transition: all 0.3s ease;
}
header .navbar {
    z-index: 99;
    width: 100%;
    background-color: transparent;
    animation: 0.5s ease 0s 1 normal none running navbar-reveal;
    padding: 1rem;
    flex-wrap: nowrap;
    justify-content: space-between !important;
}
html.hideNavbar header .navbar {
    animation: none!important;
    opacity: 0;
    transform: translateY(-100%);
}
html.tourStarted header .navbar {
    animation: 1s ease 0s 1 normal none running navbar-reveal;
}
header .navbar .navbar-brand img {
    width: 6rem;
    object-fit: cover;
}
header .navbar-brand {
    width: 7rem;
    z-index: 0;
}
header .navbar-nav {
    flex-direction: row !important;
    align-items: center;
}
header .navbar .search {
    margin: 0px 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
header .navbar .menu-btn {
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
.open-search {
    height: 100vh;
    width: 100vw;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    inset: 0px;
    justify-content: center;
    z-index: 90;
    display: none;
    align-items: center;
}
.menu.active {
    transform: translateX(0%);
    animation: 0.5s ease 0s 1 normal both running menuextend;
}
.menu {
    display: flex
;
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: 20;
    overflow: hidden;
    opacity: 1;
    flex-direction: column;
    transform: translateX(-100%);
    background-color: rgb(253, 253, 253);
}
.search-popup {
    opacity: 1;
    overflow: hidden;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: 0.5s ease 0s 1 normal none running search-popup-anim;
    width: 90%;
}
.search-popup .question {
    font-size: 1.6rem;
    font-family: avenir-lt;
    font-weight: bold;
    color: white;
    transform: translateY(0%);
    opacity: 1;
    margin-bottom: 2rem;
    animation: 0.3s ease 0.3s 1 normal both running search-popup-question;
    text-align: center;
}
.search-popup svg {
    height: 100%;
    width: 100%;
    fill: white;
}
.open-search .pattern {
    position: absolute;
    z-index: 9;
    opacity: 0.7;
    height: 100%;
    width: 100%;
}
.open-search .pattern img{
    height:100%;
    width:100%;
    object-fit:cover;
}
.close-btn {
    border: 1px solid rgb(46, 45, 42);
    opacity: 0.8 !important;
}
.close-btn {
    border-radius: 50%;
    opacity: 0.8;
    position: absolute;
    top: 2rem;
    right: 2rem;
    height: 3rem;
    width: 3rem;
    display: none;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease 0s;
    animation: 0.5s ease 0s 1 normal none running close-btn-reveal;
}
.close-btn svg {
    height: 100%;
    opacity: 1;
}
.nav-zone {
    width: 100%;
    height: 100%;
    padding-bottom: 2rem;
    display: flex;
    background-image: url("/media/pattern.webp");
}
.sec-zone {
    height: 25%;
    width: 100%;
    background-color: rgb(25, 25, 25);
    flex-direction: column;
    align-items: flex-start;
    padding-top: 1rem;
    padding-left: 2.5rem;
    background-image: linear-gradient(rgba(223, 209, 167, 0), rgba(223, 209, 167, 0)), url("/media/darkpattern.png");
    display: none;
}
    .open-search.close-search {
        animation: 0.3s ease 0s 1 reverse both running search-popup-anim;
    }

    .open-search.active {
        display: flex;
    }

.menu .rights {
    font-size: 0.8rem;
    position: absolute;
    align-items: flex-end;
    left: 530px;
    bottom: 22px;
    display: none;
    height: fit-content;
}

.menu {
    display: flex;
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: 1000;
    overflow: hidden;
    opacity: 1;
    flex-direction: column;
    transform: translateX(-100%);
    background-color: rgb(253, 253, 253);
}

    .menu.inactive {
        animation: 0.5s ease 0s 1 normal both running menucollapse;
    }

    .menu.active {
        transform: translateX(0%);
        animation: 0.5s ease 0s 1 normal both running menuextend;
    }

.close-btn {
    border: 1px solid rgb(46, 45, 42);
    opacity: 0.8 !important;
}

.close-search #Path_3, .close-search #Path_150 {
    stroke: rgb(255, 255, 255) !important;
}

.heroSection{
    height: 100vh;
    overflow: hidden;
}
header .navbar .search svg {
    width: 1.9rem;
    fill: white;
    display: block;
}
header .navbar .lang .en {
    border-right: 1px solid #ffffff;
    transition: all 0.3s ease 0s;
}
header .navbar .lang a {
    padding: 0px 6px;
    transition: all 0.3s ease 0s;
    border: none;
    border-radius: 0;
    color: white !important;
}
.heroSection video{
    height: 100%;
    width: 100%;
    object-fit: cover;
    scale: 1.23;
}
.heroSection .videoContainer {
    height: 27rem;
    width: 27rem;
    border-radius:100%;
    overflow:hidden;
    position: absolute;
    right: 50%;
    bottom: -50%;
    transform: translate(50%, -50%);
    z-index: 1;
    border: 2px solid rgb(255 255 255 / 25%);
    overflow: hidden;
    transition: all 1s ease-in-out;
}
.heroSection .videoContainer .videoCardOverlay{
    background:linear-gradient(45deg, rgb(0 0 0 / 40%), rgb(0 0 0 / 40%));
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    height:100%;
    width:100%;
    border-radius: 100%;
    overflow: hidden;
}
@keyframes fadeOut{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}
.heroSection .videoContainer .videoCardOverlay::after{
    content:"";
    height:100%;
    width:100%;
    background-repeat:no-repeat;
    background-size:cover!important;
    background-image:url("/media/Ellipse\ 15.png");
    position:absolute;
    top: 0;
    left: 0;
    transition:all 1s ease-in-out;
}
.heroSection .videoContainer .videoCardOverlay button{
    border-radius: 100%;
    overflow: hidden;
}
.heroSection .videoContainer .videoCardOverlay button.animate{
    animation: zoom-in-zoom-out 1s ease-out 3 forwards;
}
.heroSection .videoContainer .videoCardOverlay button.info{
    right: 11.3rem;
    top: 3rem;
}
.heroSection .videoContainer .videoCardOverlay .replay{
    left: 3rem;
    bottom: 16rem;
}
.heroSection .videoContainer .videoCardOverlay .safariIcon{
    right: 3rem;
    bottom: 16rem;
}
.heroSection .videoContainer .videoCardOverlay button{
    position:absolute;
    height: 3rem;
    width: 3rem;
    padding: 0;
    border-radius: 100%;
    background-color: rgb(0 0 0 /16%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgb(255 255 255 / 20%);
    transition: all .3s ease-in-out;
    z-index: 5!important;
}
.heroSection .videoContainer .videoCardOverlay button:hover{
    background-color:var(--gold);
    height: 3.3rem;
    width: 3.3rem;
    animation:none;
}
.heroSection .videoContainer .videoCardOverlay button svg{
    height:100%;
    width:100%;
    object-fit:contain;
}
.heroSection  .card-img-overlay{
    display:flex;
    align-items:center;
    background:linear-gradient(45deg, rgb(0 0 0 /40%), rgb(0 0 0 / 70%));
    background: rgb(0 0 0 / 60%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index:2;
    height: 100%;
}
.fadeUpLoading .customLoader{
    opacity:0;
    animation:1s fadeIn forwards;
}

.heroSection .card-img-overlay > .d-flex h1{
    z-index: 2;
}
.heroSection  .card-img-overlay .topic span{
    font-size: 1rem;
    color: #CFCFCF;
    text-transform: uppercase;
    margin: 0 0.7rem;
}
.heroSection  .card-img-overlay h1{
    color: white;
    font-size: 2rem;
    width: 100%;
    z-index: 2;
    line-height: 1.3;
    position: relative;
    font-family: "Avenir";
}
.heroSection .card-img-overlay .d-flex p{
    color: #CFCFCF;
    font-size: 1rem;
    line-height: 2.2;
    width: 100%;
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    z-index: 1;
    /* display: none; */
}
.heroSection  .card-img-overlay .startTour{
    background: transparent;
    border:none;
    z-index: 2;
}
.heroSection  .card-img-overlay .startTour .icon{
    border-radius:100%;
    height: 3rem;
    width: 3rem;
    display:flex;
    align-items:center;
    justify-content:center;
}
.heroSection  .card-img-overlay .startTour .icon svg{
    height:100%;
    width:100%;
    
}
.heroSection  .card-img-overlay .startTour span{
    color:white;
    margin: 0 .7rem;
    font-size: 1.1rem;
}
.heroSection  .card-img-overlay .startTour svg circle{
    transition:var(--transition);
}
.heroSection  .card-img-overlay .startTour:hover svg circle{
    fill:var(--gold);
}
.videoOverlay{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    mix-blend-mode: luminosity;
    background-blend-mode: luminosity;
    opacity: 20%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 0;
}
.videoOverlay video{
    height:100%;
    width:100%;
    object-fit:cover;
}
.informationContainer{
    background: linear-gradient(to bottom, rgb(0 0 0 / 20%) , rgb(0 0 0 / 54%) ,rgb(0 0 0 / 64%), rgb(0 0 0 / 74%));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 100%;
    height: 58%;
    width: 58%;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    z-index: 2;
    display: none;
    padding: 1rem;
}
@keyframes ZoomInFade{
    0%{
        scale:1.2;
        opacity:0;
    }
    100%{
        scale:1;
        opacity:1;
    }
}
.informationContainer.visibleItem{
    display: block;
    animation:1s ZoomInFade forwards;
}
.informationContainer .info{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-image: url("../../media/Group\ 3499.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.informationContainer .info h4{
    color: white;
    text-transform:uppercase;
    font-size: 1rem;
    text-align: center;
    line-height: 2;
    width: 90%;
}
.informationContainer .info p{
    color: rgb(255 255 255 / 50%);
    text-align: center;
    width: 74%;
    margin-top: 1rem;
    line-height: 1.8;
    font-size: 0.8rem;
    margin-bottom: 0;
}
.moveLeft{
    animation: 1s moveLeft forwards;
}
.moveToCenter{
    animation: 1s moveVideoToCenter 500ms forwards;
}
.videoLoader{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    z-index: 17;
    display: none;
    transform: translate(-50%, -50%);
}

.videoLoader .percentage{
    font-family: 'avenir-lt';
    font-weight: 800;
    font-size: 7rem;
    color: white;
    text-align: center;
    margin: auto;
    position: absolute;
    animation: 1.5s fadeUpLoading 1s forwards;
    text-shadow:0px -2px 4px rgba(166, 140, 63, 1), 0px 4px 30px rgba(0, 0, 0, 0.8);
    opacity: 1;
}

.videoLoader .loadingText{
    font-size: 1.2rem;
    color: white;
    text-transform: uppercase;
    position: absolute;
    bottom: 7rem;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    animation: 1.5s fadeUpLoading 1.3s forwards;
    transform: translateX(-50%) !important;
    letter-spacing: 0.73rem;
    padding-bottom:.7rem;
    opacity: 1;
}
.videoLoader .loadingText::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    background-color:rgb(255 255 255 / 20%);
    height:.2rem;
    width:3rem;
}
.fadeUpLoading{
    display: flex;
    align-items: center;
    justify-content: center;
}
.videoContainer img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.videoContainer .card-img-top.hidden{
    display: none;
}
.logo {
    position: absolute;
    top: 2.5rem;
    left: 1rem;
    z-index: 99;
    animation: 1s ease 0s 1 normal none running topheader;
}
.logo {
    position: absolute;
    top: 2.5rem;
    left: 1rem;
    z-index: 97;
    transform: translateY(0px);
    transition: all 0.3s ease 0s;
    animation: 1s ease 0s 1 normal none running topheader;
}
.sec-zone .logo {
    opacity: 0.8;
    position: relative;
    top: 33%;
    right: 0px;
    left: 0px;
    display: none;
}
.nav-zone .navbar-col {
    padding: 0px 15px;
    height: 100%;
    align-items: center;
    display: flex;
}
.nav-zone .navbar-col .nav-link {
    text-transform: uppercase;
    font-family: avenir-lt;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 1.4rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    padding: 0.7rem 0px;
    line-height: 2;
    color: rgb(46, 45, 42);
    transition: color 1s ease 0s;
}
.nav-zone .navbar-col .nav-item .nav-link::before {
    content: "";
    display: inline-block;
    height: 0.4rem;
    width: 0.4rem;
    background-color: transparent;
    border-radius: 50%;
    margin-right: 11px;
}
.close-btn #Path_3, .close-btn #Path_150 {
    stroke: rgb(46, 45, 42);
}
.close-btn svg g {
    height: 2rem;
    width: 2rem;
    opacity: 1;
}
.search-popup form {
    width: 100%;
}
.search-popup form {
    transform: translateY(0%);
    opacity: 1;
    animation: 0.3s ease 0.3s 1 normal both running search-popup-form;
    z-index: 10;
}
.search-popup .input-group-sm > .custom-select, .input-group-sm > .form-control, 
.input-group-sm > .input-group-append > .btn, .input-group-sm > .input-group-append > .input-group-text, 
.input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-prepend > .input-group-text {
    padding: 0.25rem 1.5rem !important;
}
.search-popup input {
    border: none;
    outline: none;
    height: 3rem !important;
    border-radius: 0px !important;
}
.search-popup input {
    background-color: rgb(42, 42, 42);
}
.search-popup .input-group-text {
    background-color: #ac944d;
    border: none;
    height: 100%;
    transition: all 0.3s ease 0s;
    border-radius: 0px;
}
.search-popup .input-group-prepend {
    height: 3rem;
    width: 3rem;
    border: none;
    outline: none;
    border-radius: 0px;
    padding: 0px;
}
.videoLoader{
    mix-blend-mode: plus-lighter;
    border-radius: 100%;
}
.videoLoader .customLoader{
    mix-blend-mode: plus-lighter;
    background-blend-mode:plus-lighter;
    height: 43vw;
    width: 43vw;
}
.percentage {
  position: relative;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
@keyframes fadeOutDown{
    0%{
        opacity:1;
        transform:translate(-50%,-50%);
    }
    100%{
        opacity:0;
        transform:translate(-50%, 100%);
    }
}
.blurryBackground{
     backdrop-filter: blur(7px);
     mask: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     border-radius: 0;
     z-index: 0;
}
.videoLoader .loadingText.fadeOutDown{
  animation:1s fadeOutDown forwards;
}
.videoLoader .percentage.fadeOutDown{
     animation:1s fadeOutDown 1s forwards;
}
iframe{
    height: 100%;
    width: 100%;
}
.mapContainerPopup{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform:translateX(-50%) translateY(-50%);
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
}
.mapContainerPopup .modal-dialog{
    height: 100%;
    max-width: 100%;
    margin: 0;
    background-color:transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mapContainerPopup .modal-dialog .modal-content{
    background-color: rgb(0 0 0 / 38%);
    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);
    width: 45%;
    border-radius: 0.9rem;
    overflow: hidden;
}
.mapContainerPopup .modal-dialog .modal-content .modal-header{
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-image: url("../media/mappopupheaderbg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-radius: 0;
}
.mapContainerPopup .modal-dialog .modal-content .modal-header button{
    border: none;
    border-left: 1px solid rgb(255 255 255 / 40%);
    padding: .6rem;
}
.mapContainerPopup .modal-dialog .modal-content .modal-header button svg{
    height: 0.8rem;
    width: 1.4rem;
}
.mapContainerPopup .modal-dialog .modal-content .modal-body{
    height: 100%;
    width: 100%;
    display: flex;
    align-items:center;
    justify-content:center;
    border-radius: 0;
    padding: 0;
    background-image: url("../media/grids.png");
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
}
.mapContainerPopup .modal-dialog .modal-content .modal-body .galleryName{
    position:absolute;
}
.mapContainerPopup .modal-dialog .modal-content svg{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.Room.active path{
    fill:var(--gold);
    stroke: var(--gold);
}
@media(min-width:768px){
        .nav-zone .navbar-col .nav-link {
        font-size: 2.2rem;
        padding: 0px;
        line-height: 3.2;
    }
        .navbar-col ul {
        align-items: flex-start;
        padding-top: 2rem;
    }
        .sec-zone .logo {
        display: block;
    }
        .sec-zone {
        padding-top: 8rem;
        align-items: center;
        padding-bottom: 8rem;
    }
        .sec-zone {
        width: 40%;
    }
        .nav-zone, .sec-zone {
        height: 100%;
    }
        header .navbar {
        flex-wrap: wrap;
        padding-top: 2rem !important;
    }
    .menu {
        flex-direction: row;
    }
        .navbar-col ul {
        align-items: flex-start;
        padding-top: 2rem;
    }
        .search-popup .input-group {
        width: 35rem;
    }
}
@media(min-width:992px){
    .galleryInfo.modal.moveCenter {
    width: 47%;
    }
    .galleryInfo.modal .modal-body {
    padding: 1rem 4em 0.5rem 1.5rem;
    border-radius: 0;
}
    .heroSection .videoContainer .videoCardOverlay button.info{
    right: 8.4rem;
    top: 3rem;
}
.galleryInfo.modal{
    width:30rem;
}
    .heroSection .card-img-overlay .d-flex p{
    width:39%;
        text-align:left;

}
.heroSection .videoContainer .videoCardOverlay .replay{
    left: 2.1rem;
    bottom: 10.5rem;
}
.heroSection .videoContainer .videoCardOverlay .safariIcon{
    right: 8.4rem;
    bottom: 3rem;
}
    .heroSection .videoContainer {
    height: 34rem;
    width: 34rem;
    border-radius:100%;
    overflow:hidden;
    position: absolute;
    right: 11rem;
    transform: none;
    bottom: unset;
    z-index: 1;
    border: 2px solid rgb(255 255 255 / 25%);
    overflow: hidden;
    transition: all 1s ease-in-out;
}
    .heroSection  .card-img-overlay::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: 0;
    bottom: 0;
    border: 2px solid rgb(255 255 255 / 25%);
    border-radius: 100%;
    height: 34rem;
    width: 34rem;
    z-index: 0;
}
    .heroSection .card-img-overlay h1{
        font-size:4.3rem;
        width:67%;
    }
    .heroSection .card-img-overlay .d-flex p{
        display:block;
    }
        .nav-zone {
        width: 80%;
    }
        .search-popup form {
        width: 35rem;
    }
        .search-popup .question {
        font-size: 2rem;
    }
        .close-btn #Path_3, #Path_150 {
        stroke: white !important;
    }
        .nav-zone .navbar-col .nav-link {
        font-size: 1.1rem;
        padding: .7rem 0;
        line-height: 2.2;
    }
        .nav-zone .navbar-col {
        padding: 0rem 4rem;
    }
        .menu .rights {
        display: block !important;
    }
        .sec-zone {
        display: flex
;
    }
        header .navbar .search svg {
        width: 1.6rem;
    }
        .close-btn {
        border: 1px solid white !important;
        opacity: 0.8 !important;
    }
}
@media(min-width:1200px){
    .heroSection .card-img-overlay h1{
        padding-bottom: 1.5rem;
    }
    .heroSection  .card-img-overlay h1::after{
        content:"";
        position:absolute;
        bottom: -0.5rem;
        left:0;
        height: 0.4rem;
        width: 12rem;
        background-color:#AC944D;
    }
    .container{
        padding-left: 7rem;
        padding-right: 7rem;
    }
    .nav-zone .navbar-col .nav-link {
        font-size: 1.8rem;
        padding: 0px;
        line-height: 2.6;
    }
}
@media(min-width:1600px){
    .menu .rights{
        font-size:1vw;
    }
    .nav-zone .navbar-col .nav-link {
        font-size: 1.8vw;
    }
        header .navbar .search svg {
        width: 1.6vw;
    }
    header .navbar .lang a{
        font-size:1vw;
    }
    header .navbar .navbar-brand img {
    width: 6vw;
}
    .heroSection .videoContainer,
    .heroSection .card-img-overlay::after{
    height: 38vw;
    width: 38vw;
}
    .heroSection .videoContainer .videoCardOverlay .replay{
    left: 2.7vw;
    bottom: 10.5vw;
}
.heroSection .videoContainer .videoCardOverlay .safariIcon{
    right: 8.4vw;
    bottom: 3.5vw;
}
    .heroSection .videoContainer .videoCardOverlay button.info{
    right: 8.4vw;
    top: 3.5vw;
}
    .container{
        padding-left: 7vw;
        padding-right: 7vw;
    }
    .heroSection  .card-img-overlay h1{
        font-size: 4.6vw;
        width: 66%;
    }
}