@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@100&family=Roboto+Condensed:wght@300&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
p {
  letter-spacing: 0.5px;
  font-family: system-ui;
  font-weight: 200;
}
ol li:before {
  box-sizing: border-box;
  text-align: center;
  margin: 0 10px;
  width: 35px;
  height: 35px;
  color: #4ea2e3;
  font: bold 20px / 30px "Roboto", sans-serif;
  border-radius: 50%;
  border: 2px solid #4ea2e3;
  opacity: 0.5;
}
.start-40 {
  left: 40%;
}
.start-80 {
  left: 80%;
}
.top-40 {
  margin-top: 20%;
}
body {
  background-image: -webkit-radial-gradient(#0c334f 20%, #110d0d);
  min-height: 100vh;
  width: 100%;
}
.anim-move-up {
  animation: i 0.8s 0.4s cubic-bezier(0.41, 0.01, 0.27, 1) both;
}
.home-index {
  height: 100vh;
}
.home {
  max-width: 100%;
  max-height: 90vh;
  cursor: grab;
}
.headline {
  margin-top: 6.6rem;
}
canvas {
  max-width: 100%;
  /* max-height: 47vh; */
}
.canvas-element {
  width: auto;
}
.canvas-element-fb {
  height: 88vh;
}

.treD {
  max-height: 80vh;
}
.waranty {
  width: 200px;
  float: right;
}
.tutup {
  top: 100vh;
  background: transparent;
  z-index: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.webgl {
  max-width: 100%;
  height: auto;
  cursor: grab;
}
.px3 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.z1 {
  z-index: 1;
}
.z2 {
  z-index: 2;
}
.z3 {
  z-index: 3;
}
.z4 {
  z-index: 4;
}
h1 {
  font-family: Lato, sans-serif;
  font-weight: 400;
}
.logo {
  width: 500px;
  height: auto;
  left: 65%;
}
.specs {
  letter-spacing: 0.3em;
  padding: 0;
}
.specs,
details,
.angka,
.sat {
  font-size: 2rem;
}
.details-divider {
  border-bottom: 1px dashed white;
}
.descr {
  margin-top: 150px;
}
.product-title {
  animation: i 0.8s 0.4s cubic-bezier(0.41, 0.01, 0.27, 1) both;
}
.satu {
  animation-delay: 0.175s;
}
.dua {
  z-index: 2 !important;
  animation-delay: 3s;
}
/* fitur */
.fitur {
  margin: 20px auto;
}
.fitur-box {
  width: 100%;
  margin: 0 0 20px;
  padding: 10px;
  background-color: white;
  overflow: hidden;
  position: relative;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
.fitur-box .imgBox {
  max-width: 100%;

  transition: 0.5s ease-in-out;

  /* border-radius: 20px; */
}
.judul {
  color: white;
  position: absolute;
  left: 15px;
  bottom: 17px;
  font-weight: 400;
  padding: 0.3rem;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid white;
}
.judul span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  top: 25%;
  margin-left: 10px;
  transform: rotate(405deg);
}

.fitur-content {
  visibility: hidden;
  position: absolute;
}
.fitur-box .imgBox img {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}

.bed-content {
  bottom: 20%;
}
.popup-content {
  top: 120px;
}
.desk-content {
  top: 40%;
}
.storage-content {
  top: 80px;
}

.fitur-box:hover .imgBox {
  transform: translateY(-50%);
  height: 450px;
}
.fitur-box:hover .imgBox .judul {
  visibility: hidden;
}
.fitur-box:hover .bed {
  transform: translateY(-60%);
  height: 350px;
}
.fitur-box:hover .popup {
  transform: translateY(-50%);
  height: 330px;
}
.fitur-box:hover .desk {
  transform: translateY(-90%);
  height: 500px;
}

.fitur-box:hover .fitur-content {
  visibility: visible;
  max-width: 100%;

  animation: i 0.4s 0.2s cubic-bezier(0.41, 0.01, 0.27, 1) both;
}
.cs-box {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  height: 100px;
  width: 100%;
  box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2), inset -5px -5px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
}
.gambar-cs {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2px solid #f8f6f6;
  overflow: hidden;
}
.gambar-cs img {
  width: 100%;
}
.contact {
  width: 50%;
  font-size: 2rem;
}
.contact a {
  transition: 0.3s ease-in-out;
}
.contact a:hover {
  transform: translateY(-30%);
}
.cs p {
  margin-top: -14px;
}
.price {
  margin: 3rem auto;
  border-left: 1px solid white;
}
.price p span {
  font-size: 1.5rem;
  line-height: 0.5;
}
.price .non-promo {
  font-size: 4rem !important;
  text-decoration: line-through;
  color: red;
}
.price .promo {
  font-size: 7rem !important;
}
.Alasan {
  margin-top: 6rem;
}
table {
  width: 100%;
}
/* fitur */
.vid {
  background-color: white;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.scroll {
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: inherit;
}
.scroll p {
  animation: e 8s calc(0.4s * 4) ease-in-out infinite both;
  will-change: transform;
}

.scroll:after {
  display: block;
  width: 0.065rem;
  height: 2.1874rem;
  background: currentColor;
  transform-origin: center top;
  animation: d 8s calc(0.4s * 4) ease-in-out infinite both;
  will-change: transform;
  content: "";
}
@keyframes d {
  0%,
  2% {
    transform-origin: center top;
    transform: scaleY(0) translate3d(0, -20px, 0);
  }
  2.5% {
    transform: scaleY(0.5) translateZ(0);
  }
  5% {
    transform-origin: center top;
    transform: scaleX(1);
  }
  5.1% {
    transform-origin: center bottom;
  }
  75% {
    transform: scaleX(1);
  }
  78%,
  80% {
    transform: scaleY(0);
  }
  99.9% {
    transform-origin: center bottom;
  }
  to {
    transform-origin: center top;
    transform: scaleY(0);
  }
}
@keyframes e {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  5% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  9%,
  78% {
    opacity: 1;
    transform: translateZ(0);
  }
  81%,
  to {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
}
@keyframes h {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
  }
  to {
    transform: none;
  }
}
@keyframes i {
  0% {
    opacity: 0;
    transform: translateY(3.125rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media screen and (max-width: 44.9375rem) {
  .waranty {
    margin-top: 30px;
    width: 150px;
    float: right;
  }
  .specs {
    letter-spacing: 0.1em;
    padding: 0;
    margin: 0;
  }
  .specs,
  details,
  .angka,
  .sat {
    font-size: 0.9rem !important;
  }
  .main-header {
    margin-top: 109px;
  }
  .product-title {
    margin-top: 4rem !important;
    opacity: 0;
  }
  .product-title h1,
  span {
    font-size: 6rem !important;
  }
  .webgl {
    top: 20%;
    max-width: 100%;
  }
  .home-content {
    margin-top: 32rem;
    display: block;
  }
  .home-index {
    height: 84vh;
  }
  .headline {
    display: block;
  }
  .logo {
    width: 250px;
    height: auto;
    left: 65%;
  }
  .home {
    max-height: 29vh;
    margin-top: -10%;
    cursor: grab;
  }
  .fitur {
    max-height: max-content;
  }
  .bed-content {
    top: 49%;
  }
  .popup-content {
    top: 39%;
  }
  .desk-content {
    top: 40%;
  }
  .storage-content {
    top: 31%;
  }
  .fitur-box:hover .imgBox {
    transform: translateY(-40%);
    height: 450px;
  }
  .fitur-box:hover .bed {
    transform: translateY(-20%);
    height: 400px;
  }
  .fitur-box:hover .popup {
    transform: translateY(-50%);
    height: 386px;
  }
  .desk img {
    height: 400px;
    object-fit: cover;
  }
  .fitur-box:hover .desk {
    transform: translateY(-60%);
    height: 450px;
  }
  .cs {
    margin-top: 0.8rem;
  }
  .cs-box {
    height: 75px;
  }
  .cs h3 {
    font-size: 1.1rem !important;
  }
  .cs p {
    margin-top: -9px;
    line-height: 1;
    font-size: 0.8rem !important;
  }

  .gambar-cs {
    width: 100px;
    height: auto;
  }
  .contact {
    font-size: 1.3rem;
  }

  .price p span {
    font-size: 1rem !important;
    line-height: 0.3;
  }
  .price .non-promo {
    font-size: 2rem !important;
    text-decoration: line-through;
  }
  .price .promo {
    font-size: 4rem !important;
  }
}

.treD {
  max-height: 75vh;
}
@media screen and (min-width: 45rem) and (max-width: 74.9375rem) {
  .product-title h1,
  span {
    font-size: 9rem;
    text-indent: 0.56rem;
  }
  .webgl {
    max-width: 100%;
    top: 13%;
  }

  .treD {
    max-height: 100vh;
  }
  .headline {
    position: relative;
  }
  .home-content {
    position: absolute;
    left: 28%;
  }
  .bed-content {
    bottom: 10%;
  }
  .popup-content {
    top: 22%;
  }
  .desk-content {
    top: 16%;
  }
  .storage-content {
    top: 53%;
  }
}
@media screen and (min-width: 77.5rem) {
  .product-title {
    letter-spacing: 0.26em;
    line-height: 1.5;
    margin-top: 0;
  }
  .product-title h1,
  span {
    font-size: 9rem;
    text-indent: 0.56rem;
  }
  .webgl {
    max-width: 100%;
    top: 12%;
  }
  .treD {
    max-height: 100vh;
  }
  .home-content {
    left: 30%;
  }
  .bed-content {
    bottom: 10%;
  }
  .popup-content {
    top: 120px;
  }
  .desk-content {
    top: 40%;
  }
  .storage-content {
    top: 80px;
  }
}