/* Services Section */
.services-section {
  position: relative;
  width: 100%;
  min-height: 90vh;
  background: #fff;
  overflow: hidden;
}

/* Moon rocks as image, sits at bottom, lower z-index */
.services-rocks {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* Rocket centered-ish but slightly right and lower */
.services-rocket {
  position: absolute;
  left: 52%;
  bottom: 70px; /* sits on rocks */
  transform: translateX(-50%);
  width: 25%;
  z-index: 3;
  pointer-events: none;
}

/* The hanging services tag */
.services-card-img {
  position: absolute;
  right: 16%;
  top: -10px;
  width: 18%;
  transform: rotate(18deg);
  z-index: 4;
  pointer-events: none;
}

@media (min-width: 901px) and (max-width: 1024px) and (orientation: portrait) {
    .services-card-img {
        width: 20%;
        right: 14%;
        top: -10px;
        transform: rotate(18deg);
    }
    .services-section {
        min-height: 80vh;
    }
    
  .services-rocket {
    width: 60%;
    bottom: 50px;
    left: 50%;
  }
  .services-rocks {
    height: auto;
    width: 220%;
  }
  .services-card-img {
    width: 30%;
    right: 6%;

    transform: rotate(15deg);
  }
}

@media (min-width: 901px) and (max-width: 1024px) and (orientation: landscape) {
   
  .services-rocket {
    width: 30%;
    bottom: 50px;
    left: 50%;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .services-section {
    min-height: 70vh;
  }

  .services-rocks {
    height: auto;
    width: 220%;
  }

  .services-rocket {
    width: 80%;
    bottom: 50px;
    left: 50%;
  }

  .services-card-img {
    width: 160px;
    right: 6%;

    transform: rotate(15deg);
  }
}