/* ========================= */
/* 🎡 Rotating Circles Setup */
/* ========================= */

.container {
  position: relative;
}

/* Circles */
.outer-circle,
.inner-circle,
.center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.inner-circle {
  animation: rotate 12s linear infinite;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Boxes revolve like a merry-go-round */
.box {
  position: absolute;
  top: 50%;
  left: 35%;
  background: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Segoe UI", sans-serif;
  transform-origin: -12rem center;
  animation: revolve 12s linear infinite;
}

@keyframes revolve {
  from {
    transform: rotate(0deg) translateX(-12rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(-12rem) rotate(-360deg);
  }
}

.our-amenities-container {
  /* background-color: red; */
  /* height: 10rem; */
  /* width: ; */
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .our-amenities-container {
    display: none;
  }
}

#circleContainer {
  position: relative;
  left: 9.8rem;
}

.our-amenities-container {
}
.title-container {
  display: flex;
  flex-direction: column;
  padding: 0.3rem;
  background: linear-gradient(
    136.76deg,
    rgba(128, 42, 143, 0.3) -2.86%,
    rgba(199, 82, 127, 0.3) 28.79%,
    rgba(255, 255, 255, 0.3) 69.7%
  );
  margin: 1.1rem;
  padding: 0.9rem 0.727rem;
  border-radius: 0.4rem;
  margin-bottom: 2rem;
}

.title-container h1 {
  color: var(--brandClr);
}

.title-container p {
  font-size: var(--font-16);
  color: var(--brandClr);
  margin-top: .4rem;
}