CSS

body {
  font-family: sans-serif;
}

/* Style the carousel container */
#app.carousel {
  max-width: 800px; /* Set the maximum width as per your design */
  margin: 0 auto; /* Center the carousel on the page */
}

/* Style the carousel indicators */
#app .carousel-indicators {
  margin-top: 10px; /* Add some spacing between indicators and slides */
}

/* Style the carousel controls (prev and next arrows) */
#app .carousel-control-prev,
#app .carousel-control-next {
  width: 40px; /* Adjust the width as needed */
}

/* Style the carousel slide content */
#app .carousel-item {
  text-align: center; /* Center align slide content */
  padding: 20px; /* Add spacing around slide content */
  background-color: #f8f8f8; /* Set a background color for the slides */
}

/* Style the slide headings */
#app h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

/* Style other property details */
#app p {
  font-size: 16px;
  margin: 5px 0;
}

/* Style active carousel indicators */
#app .carousel-indicators .active {
  background-color: #007bff; /* Change the active indicator color */
}

/* Style carousel control icons */
#app .carousel-control-prev-icon,
#app .carousel-control-next-icon {
  background-color: #007bff; /* Change the control icon color */
  color: #fff; /* Change the control icon text color */
  border-radius: 50%; /* Make the control icons circular */
}

/* Style carousel control hover state */
#app .carousel-control-prev:hover,
#app .carousel-control-next:hover {
  background-color: #0056b3; /* Change the hover color */
}