.heightlite {
                                        position: relative;
                                        width: 320px;
                                        /* margin: 100px auto 0 auto; */
                                        perspective: 1000px;
                                        }

                                        .carousel {
                                        position: absolute;
                                        width: 100%;
                                        height: 100%;
                                        transform-style: preserve-3d; 
                                        animation: rotate360 60s infinite forwards linear;
                                        }
                                        .carousel__face { 
                                        position: absolute;
                                        width: 300px;
                                        height: 187px;
                                        top: 20px;
                                        left: 10px;
                                        right: 10px;
                                        background-size: cover;
                                        box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5);
                                        display: flex;
                                        }

                                        .heightlite span {
                                        margin: auto;
                                        font-size: 20px;;
                                        }


                                        .carousel__face:nth-child(1) {
                                        background-image: url("../images/misc/h2.png");
                                        transform: rotateY(  0deg) translateZ(430px); }
                                        .carousel__face:nth-child(2) { 
                                        background-image: url("../images/misc/h3.png");
                                            transform: rotateY( 40deg) translateZ(430px); }
                                        .carousel__face:nth-child(3) {
                                        background-image: url("../images/misc/h6.png");
                                        transform: rotateY( 80deg) translateZ(430px); }
                                        .carousel__face:nth-child(4) {
                                        background-image: url("../images/misc/h1.png");
                                        transform: rotateY(120deg) translateZ(430px); }
                                        .carousel__face:nth-child(5) { 
                                        background-image: url("../images/misc/h5.png");
                                        transform: rotateY(160deg) translateZ(430px); }
                                        .carousel__face:nth-child(6) { 
                                        background-image: url("../images/misc/h7.png");
                                        transform: rotateY(200deg) translateZ(430px); }
                                        .carousel__face:nth-child(7) { 
                                        background-image: url("../images/misc/h9.png");
                                        transform: rotateY(240deg) translateZ(430px); }
                                        .carousel__face:nth-child(8) {
                                        background-image: url("../images/misc/h4.png");
                                        transform: rotateY(280deg) translateZ(430px); }
                                        .carousel__face:nth-child(9) {
                                        background-image: url("../images/misc/h8.png");
                                        transform: rotateY(320deg) translateZ(430px); }



                                        @keyframes rotate360 {
                                        from {
                                            transform: rotateY(0deg);
                                        }
                                        to {
                                            transform: rotateY(-360deg);
                                        }
                                        }
                                            /* features */
.features {
  color: white;
  position: relative;
  
}

.features::before,
.features::after {
  content: "";
  background-color: #fab5704c;
  position: absolute;
}

.features::before {
  border-radius: 50%;
  width: 6rem;
  height: 6rem;
  top: 30%;
  right: 7%;
}

.features::after {
  content: "";
  position: absolute;
  height: 2rem;
  top: 6%;
  right: 5%;
  border: 1px solid;
}

.features .box {
  width: 100%;
  height: 10.875em;
  padding: 10px;;
  background-color: rgba(255, 255, 255, 0.074);
  border: 1px solid rgba(255, 255, 255, 0.222);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 0.7rem;
  transition: all ease 0.3s;
  margin-top:10px;
}

.features .box {
  display: flex;
  flex-direction: column;
 
}

.features .box .title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.features .box div strong {
  display: block;
  margin-bottom: 0.5rem;
}

.features .box div p {
  margin: 0;
  font-size: 0.9em;
  font-weight: 300;
  letter-spacing: 0.1em;
}

.features .box div span {
  font-size: 0.7rem;
  font-weight: 300;
}

.features .box div span:nth-child(3) {
  font-weight: 500;
  margin-right: 0.2rem;
}

.features .box:hover {
  box-shadow: 0px 0px 20px 1px #ffbb763f;
  border: 1px solid rgba(255, 255, 255, 0.454);
}

/* Addon Facilities */

.cards {
 --background: linear-gradient(to left, #f3ba6b 0%, #ea5358 100%);
 width: 100%;
 height: 100px;
 padding: 5px;
 border-radius: 1rem;
 overflow: visible;
 background: #white;
 background: var(--background);
 position: relative;
 z-index: 1;
}

.cards::after {
 position: absolute;
 content: "";
 top: 30px;
 left: 0;
 right: 0;
 z-index: -1;
 height: 100%;
 width: 100%;
 transform: scale(0.8);
 filter: blur(25px);
 background: #f7ba2b;
 background: var(--background);
 transition: opacity .5s;
}

.card-info {

 background: var(--color);
 color: black;
 display: flex;
 background: white;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100%;
 overflow: visible;
 border-radius: .7rem;
}

.cards .title {
 font-weight: bold;
 letter-spacing: .1em;
}

/*Hover*/
.cards:hover::after {
 opacity: 0;
}

.cards:hover .card-info {
 color: #f7ba2b;
 transition: color 1s;
 background-color:black;
}
/* text effect */