@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: 2;
}

body {
  max-width: 100vw;
  max-height: 100vh;
  font-family: 'poppins', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;
  overflow: hidden;
}

#sidebar {
  position: absolute;
  width: 400px;
  height: 100vh;
  background: #1d1e22;
  left: 0px;
  transition: 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 75%;
}

#sidebar.inactive {
  left: -400px;
}

.navElements {
  color: #f9f4ea;
  font-size: 20px;
  padding: 32px 24px;
}

.navElement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  cursor: pointer;
}

.navTitle {
  font-size: 16px;
  margin-bottom: 28px;
  opacity: 72%;
}

.toggleBtn {
  position: absolute;
  top: 28px;
  left: 416px;
  font-size: 32px;
  cursor: pointer;
}

.toggleBtnImvisible {
  display: none;
}

.subNav {
  position: absolute;
  width: 400px;
  height: 100%;
  background: #1d1e22;
  left: 0px;
  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  color: #f9f4ea;
  z-index: 10;
  overflow: auto;
}

.subNav::-webkit-scrollbar {
  width: 8px;
}
.subNav::-webkit-scrollbar-thumb {
  background: linear-gradient(transparent, #f9f4ea);
  border-radius: 6px;
}

.backBtn {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  font-size: 16px;
  background: #232529;
  cursor: pointer;
  padding: 12px 16px;
  z-index: 3;
}

.subNavTitle {
  padding: 12px 0 0 24px;
  font-size: 16px;
  opacity: 72%;
}

.navItems {
  color: #f9f4ea;
  font-size: 16px;
  padding: 32px 24px;
}

.navItem {
  margin-bottom: 8px;
}

.navItem .infos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.itemImageTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.infoIcon {
  cursor: pointer;
  font-size: 24px;
}

#demoSize,
#exterior,
#framework,
#outterCover,
#windows,
#doors,
#entrancePosition,
#anchoring,
#interior,
#interiorModules,
#interiorModule,
#interiorModuleColor,
#dAndFlooring,
#insulationLiner,
#vAndac,
#stove,
#curtains {
  left: -400px;
}

#demoSize.active,
#exterior.active,
#framework.active,
#outterCover.active,
#windows.active,
#doors.active,
#entrancePosition.active,
#anchoring.active,
#interior.active,
#interiorModules.active,
#interiorModule.active,
#interiorModuleColor.active,
#dAndFlooring.active,
#insulationLiner.active,
#vAndac.active,
#stove.active,
#curtains.active {
  left: 0;
}

#iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
}
#iframe iframe {
  min-width: 100%;
  width: 100;
  height: 100%;
}

#preloader-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 15px;
  z-index: 1000;
}

#preloader-logo {
  max-height: 400px;
  width: auto;
}

#color {
  width: 0%;
  height: 100%;
  background: #b16712;
  position: absolute;
  left: 0;
  z-index: -3;
}

.percentage-container {
  width: 20%;
  height: 10px;
  border-radius: 5px;
  background: #3bdf0056;
  overflow: hidden;
}

#percentage-bar {
  width: 0%;
  height: inherit;
  background: rgba(28, 56, 31, 0.656);
}

@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 575px) {
  #sidebar,
  .subNav {
    width: 300px;
  }
  #sidebar.inactive {
    left: -300px;
  }
  .toggleBtn {
    left: 316px;
  }

  #demoSize,
  #exterior,
  #framework,
  #outterCover,
  #windows,
  #doors,
  #entrancePosition,
  #anchoring,
  #interior,
  #interiorModules,
  #interiorModule,
  #interiorModuleColor,
  #dAndFlooring,
  #insulationLiner,
  #vAndac,
  #stove,
  #curtains {
    left: -300px;
    overflow-x: hidden;
  }
}