/* General Styles */

.site.container.grid-container {
  max-width: 100%;
  padding: 0;
}

.site.grid-container > .site-content {
  padding: 0;
  justify-content: center;
}

.icon {
  line-height: 1;
}

.icon svg {
  height: 64px;
  max-width: 64px;
}

/* Card Styles */
.journey-card,
.sub-category-card {
  align-items: center;
  padding: 16px 8px;
}

.journey-card {
  box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.15);
}

.journey-card.selected {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}

.sub-category-card {
  max-height: 150px;
}

.sub-category-card .card-body {
  padding: 1rem 0;
}

.search-container .card {
  background-color: var(--bs-gray-100);
}

.search-form {
  background: rgba(10, 20, 10, 0.1);
}

/* Hover and Focus Styles */
.journey-card:hover,
.journey-card:focus,
.sub-category-card:hover,
.sub-category-card:focus {
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.9);
  cursor: pointer;
  transition: box-shadow 100ms ease-out;
}

/* List Transition Styles */
.list-enter-active {
  transition: opacity 100ms;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
}

/* Form Control Styles */
.form-control:focus {
  box-shadow: 0 0 1px 1px rgba(var(--bs-primary-rgb), 0.8);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .journey-card,
  .sub-category-card {
    flex-direction: row;
    padding: 16px 24px;
    text-align: left;
  }

  .site-content {
    padding: 0;
  }
}

.banner {
  background: radial-gradient(
    circle,
    rgba(233, 221, 255, 0.86) 0%,
    rgba(255, 255, 255, 1) 100%
  );

  padding-bottom: 8rem;
}

.banner-content .header {
  font-size: 4rem;
  font-weight: 700;
}

.banner-content {
  background: linear-gradient(
    90deg,
    rgba(233, 221, 255, 0.07) 0%,
    rgba(233, 221, 255, 0.86) 100%
  );
  border-radius: 1% 1% 30% 20% / 30% 20% 70% 10%;
}

section.dynamic-content {
  max-width: 900px;
  margin-top: -8rem;
}

.map-container > img {
  max-width: 200px;
}

@media (max-width: 575.98px) {
  .map-container > img {
    max-width: 150px;
  }

  .banner-content {
    border-radius: 5%;
  }
}

.map-container {
  position: relative;
  padding: 4rem;
}

.icon-container {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #f18978;
  border-radius: 50%;
  border-bottom-right-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.icon-container:hover {
  box-shadow: 0 0 10px #00000045;
  transition: 0.2s ease-in-out;
}

.top-left {
  top: 10px;
  left: 0;
  --translate: translate(25%, 25%);
  transform: var(--translate) rotate(354deg);
}

.top-left > i {
  transform: rotate(calc(360deg - 354deg));
}

.top-center {
  top: 0;
  left: 40%;
  --translate: translateY(-50%);
  transform: var(--translate) rotate(45deg);
}

.top-center > i {
  transform: rotate(calc(360deg - 45deg));
}

.top-right {
  top: 0;
  right: 20%;
  --translate: translate(80%, 20%);
  transform: var(--translate) rotate(80deg);
}

.top-right > i {
  transform: rotate(calc(360deg - 80deg));
}

.middle-left {
  top: 50%;
  left: -30px;
  --translate: translateY(-50%);
  transform: var(--translate) rotate(315deg);
}

.middle-left > i {
  transform: rotate(calc(360deg - 315deg));
}

.middle-right {
  top: 50%;
  right: -30px;
  --translate: translateY(-50%);
  transform: var(--translate) rotate(134deg);
}

.middle-right > i {
  transform: rotate(calc(360deg - 134deg));
}

.bottom-left {
  bottom: 71px;
  left: 40px;
  --translate: translate(-50%, 50%);
  transform: var(--translate) rotate(281deg);
}

.bottom-left > i {
  transform: rotate(calc(360deg - 281deg));
}

.bottom-center {
  bottom: 0;
  left: 40%;
  --translate: translateY(50%);
  transform: var(--translate) rotate(226deg);
}

.bottom-center > i {
  transform: rotate(calc(360deg - 226deg));
}

.bottom-right {
  bottom: 70px;
  right: 35px;
  --translate: translate(50%, 50%);
  transform: var(--translate) rotate(172deg);
}

.bottom-right > i {
  transform: rotate(calc(360deg - 172deg));
}