@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

* {
  margin: 0;
  padding: 0;
  user-select: none; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  outline: none; 
  -webkit-tap-highlight-color: transparent;  
}

#lowerBar{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 14px;
}
.lowerBarItem{
    font-family: "Cairo", sans-serif;
    text-decoration: none;
    white-space: nowrap;
    background-color: rgba(3, 3, 3, 0.949);
    color: rgb(255, 255, 255);
    cursor: pointer;
    border-radius: 20px;
    border: none ;
    padding-block: 12px;
    padding-inline: 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 15.6px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    text-transform: capitalize;
}
.lowerBarItem:hover{
  background-color: #ffffff;
  color: #000000;
}



.home-bar div{
  cursor: pointer;
}
.home-bar div:hover {
  background-color: #393939;
}

.icon-box{
  background-color: #fffffff2;
  padding: 8px;
}
.icon-box:hover{
  background-color: #fffffff2 !important;
}


.home-bar{
  border-radius: .25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 24px;
  bottom: 16px;
  z-index: 10;
  gap: 16px;
}

.planBox {
  transition: .5s;
  transform: translatey(200%);
}

.show {
  transform: translatey(0%) !important;
}
.hide {
  display: none !important;
}

#closeFloorPlan{
  width: 50px;
  height: 20px;
  position: absolute;
  transition: .4s;
  z-index: 20;
  right: 1.5%;
  bottom: 56%;
  background-color: #38383800;
  border: none;
  font-size: 15px;
  border-radius: 2px;
  padding-inline: 4px;
}

#closeFloorPlan img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#title-subtitle {

  font-family: "Cairo", sans-serif;
  position: absolute;
  bottom: 10px;
  left: 25px;
  z-index: 4;
}

#title-subtitle h3,h2 {
  color: white;
  margin: 0;
  padding: 0;
}

#title-subtitle h2{
  margin-bottom: -10px;
  font-size: 30px;
  font-weight: 600;
}
#title-subtitle h3{
  font-size: 26px;
  font-weight: 400;
  text-align: center;

}


/* floor div */

#floors {
  position: relative;
  transition: .4s !important;
  font-family: "Cairo", sans-serif;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 1%;
  background-color:  rgba(205, 205, 205, 0.8);
  border-radius: 6px;
  padding-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  flex-direction: column;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);

}
#floors p {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    top: 8px;
    user-select: none; 
    padding-bottom: 6px;
    background-color: transparent ;
    outline: none; 
    -webkit-tap-highlight-color: transparent; 
    color: #000;

}

#floors .floors-list ul {
  transition: .5s;
  padding-bottom: 9.7px;
  padding-inline: 10px;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#floors li {
  user-select: none;
  background-color: transparent ;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  margin-block: 4.3px;
  border-radius: 4px;
  background-color :rgba(62, 62, 62, 1);
  padding-inline: 13px;
  padding-block: 9.5px;
  font-family: Cairo;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
#floors li:hover {
  background-color :rgb(133, 127, 127) !important;
}

.activeFloor {
  background-color :rgb(133, 127, 127) !important;
}
@media (max-width: 1024px) {
  #lowerBar{
    margin-bottom: 54px;
    
  }
  .home-bar {
    right: 10px;
    margin-bottom: 54px;
  }
}
@media (max-width: 768px) {
  #lowerBar{
    margin-bottom: 80px;
  }
  .home-bar {
    right: 10px;
    margin-bottom: 84px;
  }
}
/* tablet */
@media only screen and (min-width: 900px) and (max-width: 1500px) {
  .home-bar{
    right: 10px;
  }
  .lowerBarItem {
    padding-inline: 10px !important;
    padding-block: 14px !important;
    font-size: 16px;
  }
  #title-subtitle {
    bottom: 65px;
  }

  #title-subtitle h2{
    font-size: 28px;
    margin-bottom: -10px;
  }
  #title-subtitle h3{
    font-size: 25px;
  }
  
  
}


/* موبايل بالعرض */
@media (max-height : 500px) {
  .lowerBarItem{
    border-radius: 6px !important;
    padding-inline: 10px !important;
    padding-block: 5px !important;
    font-size: 14px;
  }
  #title-subtitle {
    bottom: 10px !important;
  }
  #title-subtitle h2{
    font-size: 25px !important;
  }
  #title-subtitle h3{
    font-size: 20px !important;
  
  }
  #closeFloorPlan{
    bottom: 50% !important;
  }
}

@media only screen and (min-width: 751px) and (max-width: 900px) {

  #title-subtitle {
    bottom: 60px;
    left: 5px;
  }

  #title-subtitle h2{
    font-size: 30px;
  }
  #title-subtitle h3{
    font-size: 27px;
  
  }
}

@media only screen and (min-width: 640px) and (max-width: 751px) {
  .lowerBarItem {
    padding-inline: 10px !important;
    padding-block: 8px !important;
    font-size: 16px;
  }
  #title-subtitle {
    bottom: 65px;
    left: 5px;
  }

}

/* mobile */
@media (max-width: 640px) {
  
  .home-bar{
    bottom: 11px;
    right: unset;
    left: 10px;
    padding: 0px !important;
  }

  #lowerBar {
      position: fixed; 
      left: 80px; 
      right: 30px; 
      bottom: 18px; 
      transform: none; 
      overflow-x: auto !important; 
      white-space: nowrap; 
      scrollbar-width: none; 
  }
  
  .lowerBarItem {
      padding-inline: 15px !important;
      padding-block: 10px !important;
      font-size: 16px;
  }
  #lowerBar::-webkit-scrollbar {
      display: none; 
  }
  .show {
    transform: translatey(0%) !important;
  }

  #title-subtitle {
    bottom: 80px;
    left: 5px;
  }

  #title-subtitle h2{
    font-size: 24px;
  }
  #title-subtitle h3{
    font-size: 18px;
  }
    #floors{
      left: 4%;
    }
    #floors p {
      cursor: pointer;
    }
    .floors-list{
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease;
    } 
    .floors-list.expanded {
      max-height: 300px !important;
    }
  }

  @media (max-width: 899px) {
    #lowerBar {
      position: fixed;
      right: 30px;
      left: 62px;
      bottom: 18px;
      transform: none;
      overflow-x: auto !important;
      white-space: nowrap;
      scrollbar-width: none;
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
}
  
}