body { font-family: Arial, sans-serif; background-color: #f7f7f7; }
#hero { background-size: cover; background-position: center; height: 100vh; display: flex; justify-content: center; align-items: center; color: #fff;}
.hero-content { text-align: center; }
#hero h1 { font-size: 48px; margin-bottom: 20px; }
#hero p { font-size: 24px; margin-bottom: 40px; }
#hero button { padding: 15px 30px; font-size: 18px; border-radius: 10px; }
#featured-cars { padding: 50px 0; }
.card { margin-bottom: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
.card img.car-thumb { height: 250px; object-fit: cover; border-radius: 10px 10px 0 0; }
.carousel-control-prev, .carousel-control-next {
    width: 10%;
    opacity: 1;
    transition: background 0.2s;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-size: 100% 100%;
    filter: drop-shadow(0 0 4px #000);
    animation: pulseArrow 1.2s infinite alternate;
}
@keyframes pulseArrow {
    0% { transform: scale(1);}
    60% { transform: scale(1.2);}
    100% { transform: scale(1);}
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg fill='limegreen' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 1 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg fill='limegreen' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 1 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.carousel-control-prev:hover, .carousel-control-next:hover {
    background: rgba(50,205,50,0.15);
    border-radius: 50%;
}
.carousel-indicators li {
    background-color: limegreen;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}
.carousel-indicators .active {
    background-color: #222;
}
.carousel-inner .carousel-item img {
    border-radius: 10px;
    box-shadow: 0 2px 18px rgba(0,0,0,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}
.carousel-inner .carousel-item img:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    cursor: zoom-in;
}
.carousel-inner .carousel-item {
    animation: fadeInImg 0.5s;
}
@keyframes fadeInImg {
    from { opacity: 0;}
    to { opacity: 1;}
}
@media (max-width: 768px) {
    #hero { height: 400px; }
    .card img.car-thumb { height: 180px; }
    .carousel-control-prev-icon, .carousel-control-next-icon { width: 2.2rem; height: 2.2rem;}
}
.carousel-caption.custom-caption {
    background: rgba(0,0,0,0.5);
    color: #fff;
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 1rem;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
/* Modal carousel images: responsive and minimum height */
.modal-car-list-item .carousel-inner img {
  width: 100%;
  max-width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  background: #f6f6f6;
}
@media (max-width: 768px) {
  .modal-car-list-item .carousel-inner img {
    height: 180px;
  }
}