.location {
  font-size: 14px;
  color: #e0e0e0;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  background: #000;
}

.swiper {
  width: 100%;
  height: 100vh;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardSwiper {
  width: 320px;
  height: 600px;
}

.cardSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  padding: 20px;
  border-radius: 18px;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  text-align: center;
  overflow-y: auto;
  font-size: 22px;
  font-weight: bold;
}

.card img {
  max-height: 120px;
  object-fit: contain;
  margin-bottom: 10px;
  width: 100%;
  border-radius: 8px;
}
.swiper-cards{
    margin: 15px;
}
.mySwiper-vertical{
    background: linear-gradient(284deg, #4CAF50, #3F51B5);
    height: 100%;
}

/* Color variations based on card index */
.card:nth-child(1n) { background-color: rgb(0 0 0);  color: #fff; }
.card:nth-child(2n) { background-color: rgb(0, 140, 255); color: #fff; }
.card:nth-child(3n) { background-color: rgb(10, 184, 111); color: #fff; }
.card:nth-child(4n) { background-color: rgb(211, 122, 7); color: #fff; }
.card:nth-child(5n) { background-color: rgb(118, 163, 12); color: #fff; }
.card:nth-child(6n) { background-color: rgb(180, 10, 47); color: #fff; }
.card:nth-child(7n) { background-color: rgb(35, 99, 19); color: #fff; }
.card:nth-child(8n) { background-color: rgb(0, 68, 255); color: #fff; }
.card:nth-child(9n) { background-color: rgb(218, 12, 218); color: #fff; }
.card:nth-child(10n) { background-color: rgb(54, 94, 77); color: #fff; }


.profile-card {
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.profile-card-header {
  text-align: center;
}

.profile-card-header img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 8px;
}

.profile-card-body {
  flex-grow: 1;
  padding: 10px 0;
}

.profile-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
#map {
  height: 400px;
  width: 100%;
}