/* ///////////////////////////////////////////////////////////////////// */
/* Imports */

@import url(../../../src/utilities/colors.css);

/* ///////////////////////////////////////////////////////////////////// */
/* Background */

.services-background {
  position: relative;
  height: auto;
  width: 100%;
  overflow: hidden;
}

/* ///////////////////////////////////////////////////////////////////// */
/* Videos */

.services-desktop-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  height: 100%;
  width: auto;
  pointer-events: none;
  z-index: -1;
}

.services-mobile-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  height: 100%;
  width: auto;
  pointer-events: none;
  z-index: -1;
}

@media (min-aspect-ratio: 16/10) {
  .services-desktop-video {
    display: block;
  }

  .services-mobile-video {
    display: none;
  }
}

@media (min-aspect-ratio: 16/9) {
  .services-desktop-video {
    display: block;
  }

  .services-mobile-video {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .services-mobile-video {
    height: auto;
    width: 100%;
  }
}

@media (min-width: 1201px) and (max-height: 800px) {
  .services-desktop-video {
    display: block;
  }

  .services-mobile-video {
    display: none;
  }
}

@media (min-width: 1700px) {
  .services-desktop-video {
    display: block;
    height: auto;
    width: 100%;
  }

  .services-mobile-video {
    display: none;
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Images */

.services-image-desktop {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 10%);
  height: auto;
  width: 100%;
  pointer-events: none;
  z-index: 3;
}

.services-image-mobile {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: 28rem;
  width: auto;
  pointer-events: none;
  z-index: 3;
}

@media (min-aspect-ratio: 16/10) {
  .services-image-desktop {
    display: block;
    transform: translate(-50%, 0);
  }

  .services-image-mobile {
    display: none;
  }
}

@media (min-aspect-ratio: 16/9) {
  .services-image-desktop {
    display: block;
    transform: translate(-50%, 10%);
  }

  .services-image-mobile {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1399px) {
  .services-image-desktop {
    display: block;
    transform: translate(-50%, 0);
    height: 56rem;
    width: auto;
  }

  .services-image-mobile {
    display: none;
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Fade */

.services-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 18rem;
  width: 100%;
  background-image: linear-gradient(
    to bottom,
    var(--dark-blue-00),
    var(--dark-blue)
  );
  z-index: 4;
}

@media (min-aspect-ratio: 16/10) {
  .services-fade {
    height: 28rem;
  }
}

@media (min-aspect-ratio: 16/9) {
  .services-fade {
    height: 24rem;
  }
}

@media (min-aspect-ratio: 16/9) and (min-width: 1920px) {
  .services-fade {
    height: 28rem;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .services-fade {
    height: 24rem;
  }
}

@media (min-width: 1201px) and (max-height: 800px) {
  .services-fade {
    height: 26rem;
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Container */

.orbit-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 48rem;
  width: 100%;
  pointer-events: none;
  margin: auto;
}

@media (min-aspect-ratio: 16/10) {
}

@media (min-aspect-ratio: 16/9) {
}

@media (min-width: 768px) {
  .orbit-container {
    height: 68rem;
  }
}

@media (min-width: 1201px) and (max-height: 800px) {
}

/* ///////////////////////////////////////////////////////////////////// */
/* Orbit */

.orbit {
  position: relative;
  transform: rotate(0);
  height: 42rem;
  width: 42rem;
  border-radius: 100%;
  z-index: 2;
  animation: rotate 35s linear infinite;
}

@media (min-aspect-ratio: 16/10) {
}

@media (min-aspect-ratio: 16/9) {
}

@media (min-width: 768px) {
  .orbit {
    height: 56rem;
    width: 56rem;
  }
}

@media (min-width: 1201px) and (max-height: 800px) {
}

/* ///////////////////////////////////////////////////////////////////// */
/* Logo */

.orbit-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 21rem;
  width: 21rem;
  border-radius: 100%;
  background-image: linear-gradient(
    to right,
    var(--purple),
    var(--orange),
    var(--purple)
  );
  background-size: 300%;
  animation: counterRotate 35s linear infinite, flow 10s ease-in-out infinite;
}

@media (min-aspect-ratio: 16/10) {
}

@media (min-aspect-ratio: 16/9) {
}

@media (min-width: 768px) {
  .orbit-planet {
    height: 32rem;
    width: 32rem;
  }
}

@media (min-width: 1201px) and (max-height: 800px) {
}

/* ///////////////////////////////////////////////////////////////////// */
/* Buttons */

.service-button {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  height: auto;
  width: 4.8rem;
  text-decoration: none;
  text-align: center;
  pointer-events: all;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

#webDesignButton-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) translate(-21rem) rotate(-0deg);
  animation: counterRotateOne 35s linear infinite;
}

#webDevButton-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg) translate(-21rem)
    rotate(-60deg);
  animation: counterRotateTwo 35s linear infinite;
}

#graphicDesignButton-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(120deg) translate(-21rem)
    rotate(-120deg);
  animation: counterRotateThree 35s linear infinite;
}

#webDesignButton-2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg) translate(-21rem)
    rotate(-180deg);
  animation: counterRotateFour 35s linear infinite;
}

#webDevButton-2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-240deg) translate(-21rem)
    rotate(-240deg);
  animation: counterRotateFive 35s linear infinite;
}

#graphicDesignButton-2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(300deg) translate(-21rem)
    rotate(-300deg);
  animation: counterRotateSix 35s linear infinite;
}

@media (min-width: 768px) {
  #webDesignButton-1 {
    transform: translate(-50%, -50%) rotate(0deg) translate(-28rem)
      rotate(-0deg);
  }

  #webDevButton-1 {
    transform: translate(-50%, -50%) rotate(60deg) translate(-28rem)
      rotate(-60deg);
  }

  #graphicDesignButton-1 {
    transform: translate(-50%, -50%) rotate(120deg) translate(-28rem)
      rotate(-120deg);
  }

  #webDesignButton-2 {
    transform: translate(-50%, -50%) rotate(180deg) translate(-28rem)
      rotate(-180deg);
  }

  #webDevButton-2 {
    transform: translate(-50%, -50%) rotate(-240deg) translate(-28rem)
      rotate(-240deg);
  }

  #graphicDesignButton-2 {
    transform: translate(-50%, -50%) rotate(300deg) translate(-28rem)
      rotate(-300deg);
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Icon */

.service-icon {
  height: 2.4rem;
  width: 2.4rem;
  border-radius: 100%;
  color: var(--white);
  background-image: linear-gradient(
    to right,
    var(--purple),
    var(--purple),
    var(--purple),
    var(--orange)
  );
  background-size: 300%;
  padding: 1.2rem;
  transition: all 0.45s ease-in-out;
}

.service-button:hover .service-icon {
  background-position: 100%, 0;
}

/* ///////////////////////////////////////////////////////////////////// */
/* Title */

.service-title {
  font-family: bai jamjuree, sans-serif;
  text-transform: uppercase;
  color: var(--white);
}