@import url(navigation.css);
@import url(places.css);

.places-detail-section {
  background-color: var(--bg-light-white);
  overflow-y: auto;
  flex-grow: 1;
  align-self: stretch;
}

.carousel {
  width: 450px;
  height: 300px;
}

.carousel-item img {
  height: 300px;
  object-fit: cover;
}

.detail-content p {
  font-size: 14px;
  font-weight: 500;
}

.detail-content {
  font-size: 14px;
  font-weight: 500;
  position: relative;
}

.detail-content span {
  font-weight: 600;
}

.maps-section a {
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  position: absolute;
  right: 20px;
}
.maps-section i {
  font-size: 16px;
}

.maps iframe {
  width: 100%;
  height: 400px;
}

.modal-body {
  padding: 0px !important;
}

.modal-title {
  font-weight: 600;
}

.modal-footer .open-in-maps {
  background-color: var(--color-main2);
  color: white;
  border: 1px solid var(--color-main2);
  font-size: 14px;
  padding: 8px 10px;
}

.modal-footer .open-in-maps:hover {
  color: var(--color-main2);
  background-color: transparent;
  border: 1px solid var(--color-main2);
}

.footer ul {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  font-size: 14px;
}
.footer ul li a {
  /* color: inherit; */
}

/*-------------------- place detail container end-------------------- */

@media screen and (max-width: 768px) {
  .carousel {
    width: 100%;
    height: 350px;
  }

  .carousel-item img {
    height: 350px;
  }
}

/*-------------------- screen size below 768 end-------------------- */

@media screen and (max-width: 576px) {
  .carousel {
    width: 100%;
    height: 250px;
  }

  .carousel-item img {
    height: 250px;
  }

  .modal {
    transform: translateY(10%);
  }
}

/*-------------------- screen size below 576 end-------------------- */