/* contact-form.style.css */

section.content .contact-form h2 {
  margin-bottom: 0;
  text-align: left;
}

.contact-form h2 {
  grid-column: 1/6;
  grid-row: 1/2;
}

.contact-form .success {
  margin-bottom: 16px;
  color: rgba(116, 199, 103, 1);
}

.contact-form .error {
  margin-bottom: 16px;
  color: rgba(246, 81, 81, 1);
}

.contact-form .error a {
  color: rgba(246, 81, 81, 1);
}

.contact-form form {
  grid-column: 1/5;
  grid-row: 2/3;
  width: 100%;
}

.contact-form form.container {
  padding: 0;
}

.contact-form form .btn {
  grid-column: 1/10;
}

.contact-form .image {
  grid-column: 6/13;
  grid-row: 1/3;
  margin-left: auto;
  display: flex;
  align-items: center;
  position: relative;
}

.contact-form .image img:first-child {
  background:
    linear-gradient(0deg, rgba(27, 27, 27, 0.2), rgba(27, 27, 27, 0.2)),
    rgba(255, 255, 255, 0.01);
  box-shadow: inset 0px 2px 5px rgb(255 255 255 / 15%);
  backdrop-filter: blur(8px);
  border-radius: 33px;
}

.contact-form .image .planet {
  position: absolute;
  z-index: -1;
}

.contact-form .image .planet.blue {
  right: -133px;
}

.contact-form .image .planet.yellow {
  left: -124px;
  top: 150px;
}

@keyframes circularOrbitYellow {
  0% {
    left: -124px;
    top: 150px;
    z-index: -1;
    scale: 0.8;
  }
  50% {
    left: 400px;
    top: 80px;
    z-index: -1; /* Flips to front at peak right */
    scale: 1;
  }
  51% {
    left: 390px;
    top: 70px;
    z-index: 3; /* Flips to front at peak right */
  }
  80% {
    scale: 1.2;
  }
  90% {
    left: -200px;
    top: 100px;
    z-index: 3; /* Flips back behind at peak left */
    scale: 1;
  }
  91% {
    left: -190px;
    top: 101px;
    z-index: -1; /* Flips back behind at peak left */
    scale: 1;
  }
  100% {
    left: -124px;
    top: 150px;
    z-index: -1;
    scale: 0.8;
  }
}

.yellow.orbit-element {
  position: absolute;
  animation: circularOrbitYellow 8s linear infinite;
}
@keyframes circularOrbitBlue {
  0% {
    right: -133px;
    top: 150px;
    z-index: 3;
    scale: 1;
  }
  50% {
    right: 400px;
    top: 80px;
    z-index: 3; /* Flips to front at peak right */
    scale: 1.3;
  }
  51% {
    right: 390px;
    top: 70px;
    z-index: -1; /* Flips to front at peak right */
    scale: 1.3;
  }
  80% {
    scale: 1.2;
    top: 120px;
    scale: 1;
  }
  90% {
    right: -100px;
    top: 140px;
    z-index: -1; /* Flips back behind at peak left */
    scale: 0.9;
  }
  91% {
    right: -110px;
    top: 141px;
    z-index: 3; /* Flips back behind at peak left */
    scale: 0.9;
  }
  100% {
    right: -133px;
    top: 150px;
    z-index: 3;
    scale: 1;
  }
}
.blue {
  position: absolute;
  animation: circularOrbitBlue 8s linear infinite;
}

/* Tablet breakpoint */
@media (max-width: 1200px) {
  .contact-form form {
    padding-top: 20px;
  }

  .contact-form h2,
  .contact-form form {
    grid-column: 1/7;
  }

  .contact-form .image {
    grid-column: 8/13;
  }
}

/* Mobile breakpoint */
@media (max-width: 767px) {
  .contact-form h2,
  .contact-form .image,
  .contact-form form {
    grid-column: 1/7;
  }

  .contact-form h2,
  .contact-form .image,
  .contact-form form .btn {
    grid-column: 2/6;
  }

  .contact-form h2 {
    grid-row: 1/2;
    text-align: center !important;
  }

  .contact-form .image {
    grid-row: 2/3;
    width: 100%;
    margin-bottom: 16px;
    min-height: 300px;
  }

  .contact-form .image img {
    margin: 0 auto;
    height: auto;
  }

  .contact-form form {
    grid-row: 3/4;
  }
}