/* Premium Responsive Car Rental Design */
:root {
    --primary-red: #d00000;
    --dark-red: #9d0208;
    --accent-red: #faa307;
    --bg-gray: #f8f9fa;
    --text-dark: #1f2937;
}

body {
    font-family: 'Prompt', sans-serif;
    color: var(--text-dark);
    padding-top: 60px;
}

/* Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}
.navbar-brand { font-size: 1.5rem; letter-spacing: -1px; }

/* Hero Swiper */
.hero-slide {
    height: 50vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: white;
}
.hero-text { text-shadow: 0 4px 10px rgba(0,0,0,0.5); }

/* About Section */
.about-img-box { position: relative; }
.experience-badge {
    position: absolute;
    bottom: -20px;
    right: 20px;
    background: var(--primary-red);
    color: white;
    padding: 15px 25px;
    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    box-shadow: 0 10px 20px rgba(208, 0, 0, 0.3);
}

/* Car Card */
.title-divider { height: 4px; width: 60px; background: var(--primary-red); margin-top: 10px; border-radius: 2px; }

.car-card-new {
    background: white;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    cursor: pointer;
    border: 1px solid #eee;
}
.car-card-new:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: var(--primary-red); }

.car-img-wrap { position: relative; height: 220px; background: #eee; overflow: hidden; }
.car-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.car-card-new:hover .car-img-wrap img { transform: scale(1.1); }

.price-tag {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: 600;
    backdrop-filter: blur(5px);
}
.car-info-wrap { padding: 20px; }

/* Sticky Summary */
.sticky-summary-bar {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: white;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 1000;
}

/* Detail Swiper */
.detail-swiper { height: 350px; background: #f0f0f0; }
.detail-swiper img { width: 100%; height: 100%; object-fit: contain; }

.btn-white { background: white; color: var(--primary-red); }

@media (max-width: 991px) {
    .detail-swiper { height: 250px; }
    .hero-slide { height: 40vh; }
}