.card-swiper {
  background:transparent;
  margin: 0px;
  height: 100vh;

  display: grid;
  place-items: center;
}

.card-groups,
.card-group,
.card {
  aspect-ratio: 5/7;
  z-index: 2;
}

.card-groups,
.card-group,
.big-card {
  width: 30vmin;

}

.card-group {
  position: absolute;
  transition: transform 400ms ease;
}

.card-group[data-status="unknown"] {
  transform: scale(0);
  transition: none;
}

.card-group[data-status="active"] {
  transition-delay: 300ms;
}

.card-group[data-status="after"] {
  transform: translateX(50%) scale(0);
}

.card-group[data-status="before"] {
  transform: translateX(-50%) scale(0);
}

.card-group[data-status="becoming-active-from-after"] {
  transform: translateX(50%) scale(0);
  transition: none;
}

.card-group[data-status="becoming-active-from-before"] {
  transform: translateX(-50%) scale(0);
  transition: none;
}

.card {
  background-color: rgba(255, 255, 255, 0.05);
  position: absolute;
  transition: transform 800ms cubic-bezier(.05, .43, .25, .95);

  background-position: center;
  background-size: cover;
}

.big-card {
  border-radius: 1vmin;
}

.little-card {
  width: 12vmin;
  border-radius: 2vmin;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: -1vmin 1vmin 2vmin rgba(245, 4, 4, 0.25);
  pointer-events: none;
}

.big-card:nth-child(2) {
  background-image: url("./assets/3D_Animation_Style_Shopping_Tour_luxury_van_in_background_0.jpg");
  transform: translateX(-10%) rotate(-1deg);
}

.big-card:nth-child(4) {
  background-image: url("./assets/corporate_ride_sharing_luxury_transport_cha_0.jpg");
  transform: rotate(2deg);
}

.big-card:nth-child(6) {
  background-image: url("./assets/corporate_ride_sharing_luxury_transport_cha.jpg");
  transform: translateX(-6%) rotate(-3deg);
}

.big-card:nth-child(8) {
  background-image: url("./assets/airport_pickups.jpg");
  transform: translate(10%, 3%) rotate(5deg);
}

.card-group[data-index="1"]>.big-card:nth-child(6) {
  background-image: url("./assets/Dhow_Cruise_Dinner.jpg");
}

.card-group[data-index="1"]>.big-card:nth-child(8) {
  background-image: url("./assets/corporate_ride_sharing_luxury_transport_cha.jpg");
}

.card-group[data-index="2"]>.big-card:nth-child(4) {
  background-image: url("./assets/airport_pickups_luxury_van.jpg");
}

.card-group[data-index="2"]>.big-card:nth-child(8) {
  background-image: url("./assets/Hotel_Transfers.jpg");
}

.little-card:nth-child(1) {
  background-image: url("./assets/yatch_tours.jpg");
}

.little-card:nth-child(3) {
  background-image: url("./assets/Half_Full_Day_Vehicle_Rent_with_Driver.jpg");
}

.little-card:nth-child(5) {
  background-image: url("./assets/Shopping_Tour.jpg");
}

.little-card:nth-child(7) {
  background-image: url("./assets/Transfers_to_Dubai_Tourist_Attractions_anim_littlecard.jpg");
}

.card-group:hover>.card {
  box-shadow: -2vmin 2vmin 3vmin rgba(0, 0, 0, 0.4);
  scale: 1.3;

}

.card-group:hover>.big-card:nth-child(2) {
  transform: translate(-75%, 16%) rotate(-24deg);
}

.card-group:hover>.big-card:nth-child(4) {
  transform: translate(-25%, 8%) rotate(-8deg);

}

.card-group:hover>.big-card:nth-child(6) {
  transform: translate(25%, 8%) rotate(8deg);
}

.card-group:hover>.big-card:nth-child(8) {
  transform: translate(75%, 16%) rotate(24deg);

}

.card-group:hover>.little-card:nth-child(1) {
  transform: translate(200%, -160%) rotate(-15deg);

}

.card-group:hover>.little-card:nth-child(3) {
  transform: translate(160%, 170%) rotate(15deg);

}

.card-group:hover>.little-card:nth-child(5) {
  transform: translate(-200%, -170%) rotate(15deg);
  opacity: 80%;
}

.card-group:hover>.little-card:nth-child(7) {
  transform: translate(-280%, 140%) rotate(-15deg);

}

.card-swiper-buttons {
  margin-top: 8vmin;
  display: flex;
  justify-content: space-around;
  padding: 0vmin 4vmin;
}

.card-swiper-buttons>button {
  font-size: 2.5vmin;
  border: 0.4vmin solid rgb(200, 200, 200);
  border-radius: 100%;
  color: white;
  background-color: transparent;
  height: 7vmin;
  width: 7vmin;
  display: grid;
  place-items: center;
  cursor: pointer;
}

#right-button {
  background: linear-gradient(to left, #ff8c00 0%, #291d0144 100%);
  border-color: rgb(33, 150, 243);
}

#dubai_tour {
  color: rgb(35, 32, 25);
  width: 10px;
  height:2px;
  text-shadow: 2px 2px goldenrod;
  font-weight: 700;
  font-size: 100% ;
}

#dhow_cruise  {
  color: goldenrod;
  width: 10px;
  height:2px;
  text-shadow: 2px 2px #b90404;
  font-weight: 800;
  font-size: 100% ;

}

#yatch_tours, #shopping_transfers{
  color: #ff9100;
  text-shadow: 2px 2px #a00404;
}

#premium_corporate{
  color: cyan;
  text-shadow: 2px 2px rgb(5, 12, 200);
}

#airport_services{
  color: rgb(0, 255, 229);
  text-shadow: 2px 2px rgb(224, 16, 224);
}


#corporate_share {
  color: #ffffff;
  text-shadow: 2px 2px #ff0000;
  font-weight: 700;
  font-size: 1vw ;


}







.home {
  width: 100%;
}

.home:before {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: transparent;
}

.home h3 {
  position: absolute;
  font-size: 4vw;
  text-align: left;
  top: 7vw;
  color: #009393;
  margin-left: 15%;
  font-weight: 700;
}

.stage {
  width: auto;
  margin-top: 15px;
  height: 100px;
}

.cubespinner {
  -webkit-animation-name: spincube;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 3s;
  animation-name: spincube;

  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 40px 40px 0;
  -moz-transform-origin: 40px 40px 0;
  -ms-transform-origin: 40px 40px 0;
  transform-origin: 40px 40px 0;
}

.cubespinner div {
  position: absolute;

  width: 300px;
  height: 60px;
  text-align: left;
  color: #109393;
  font-family: 'Raleway', sans-serif;
  font-size: 4vw;
  font-weight: 700;
}

.cubespinner .face1 {
  color: #f1c40f;
  text-shadow: 2px 2px #ffffff;

  -webkit-transform: translateZ(40px);
  -moz-transform: translateZ(40px);
  -ms-transform: translateZ(40px);
  transform: translateZ(40px);
  -webkit-backface-visibility: hidden;

}

.cubespinner .face2 {
  color: #ffffff;
  text-shadow: 2px 2px #ff0000;
  -webkit-transform: rotateX(90deg) translateZ(40px);
  -moz-transform: rotateX(90deg) translateZ(40px);
  -ms-transform: rotateX(90deg) translateZ(40px);
  transform: rotateX(90deg) translateZ(40px);
  -webkit-backface-visibility: hidden;
}

.cubespinner .face3 {
  color: #f85555;
  text-shadow: 2px 2px #ffb700;

  -webkit-transform: rotateX(180deg) translateZ(40px);
  -moz-transform: rotateX(180deg) translateZ(40px);
  -ms-transform: rotateX(180deg) translateZ(40px);
  transform: rotateX(180deg) translateZ(40px);
  -webkit-backface-visibility: hidden;
}

.cubespinner .face4 {
  color: #fcad03;
  text-shadow: 2px 2px #7a0202b5;

  -webkit-transform: rotateX(270deg) translateZ(40px);
  -moz-transform: rotateX(270deg) translateZ(40px);
  -ms-transform: rotateX(270deg) translateZ(40px);
  transform: rotateX(270deg) translateZ(40px);
  -webkit-backface-visibility: hidden;
}


/*Cubical Flipping or rotation*/
@-webkit-keyframes spincube {

  from,
  to {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

  15% {
    -webkit-transform: rotateX(90deg);
  }

  25% {
    -webkit-transform: rotateX(90deg);
  }

  40% {
    -webkit-transform: rotateX(180deg);
  }

  50% {
    -webkit-transform: rotateX(180deg);
  }

  65% {
    -webkit-transform: rotateX(270deg);
  }

  75% {
    -webkit-transform: rotateX(270deg);
  }

  95% {
    -webkit-transform: rotateX(360deg);
  }

  100% {
    -webkit-transform: rotateX(360deg);
  }
}

@keyframes spincube {

  from,
  to {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }

  15% {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }

  25% {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }

  40% {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }

  50% {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }

  65% {
    -webkit-transform: rotateX(270deg);
    -moz-transform: rotateX(270deg);
    -ms-transform: rotateX(270deg);
    transform: rotateX(270deg);
  }

  75% {
    -webkit-transform: rotateX(270deg);
    -moz-transform: rotateX(270deg);
    -ms-transform: rotateX(270deg);
    transform: rotateX(270deg);
  }

  90% {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }

  100% {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }



}

/* Media query for smaller screens */
@media (max-width: 300px) {
  .home h3 {
    font-size: 6vw;
    margin-left: 2%;
  }

  .cubespinner, .card-swiper {
    width: 50vw;
    height: auto;
    margin: 2%;
  }

  .cubespinner div {
    font-size: 5vw;
  }
}