.hero-section {
    background: linear-gradient(135deg, #090f1d 0%, #0d1b38 100%);
    color: #ffffff;
    padding: 60px 0 100px;
    position: relative;
    overflow: hidden;
}

.hero-tag {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #93c5fd;
    text-transform: uppercase;
}

.hero-title {
    font-size: 44px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 10px;
    color: #fff;
}

.hero-subtitle {
    color: #94a3b8;
    font-size: 16px;
    max-width: 480px;
    margin-top: 15px;
}

.hero-features {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 14px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 500;
}

.feature-icon {
    width: 28px;
    height: 28px;
    background: #40132e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hero-car-img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}
.filter-wrapper {
    margin-top: 50px;
    position: relative;
    z-index: 10;
    max-width:1200px !important;
}

.filter-box {
    background: #0b1329;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    color: #ffffff;
}

.filter-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-group i {
    color: #93c5fd;
    font-size: 16px;
}

.filter-group label {
    font-size: 16px;
    color: #94a3b8;
    display: block;
    margin: 0;
    font-weight: 600;
}

.filter-group select {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    width: 100%;
    outline: none;
    padding: 0;
    cursor: pointer;
    height:unset;
    padding-right:37px;
}

.filter-group select option {
    background: #0b1329;
    color: #ffffff;
}

.btn-reset {
    background: #fff;
    color: #000;
    border: none;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    transition: all 0.3s ease;
}


.section-header {
    text-align: center;
    margin: 50px 0 40px;
}

.section-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #40132e;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-title {
    font-size: 44px;
    font-weight: 600;
    color: #0f172a;
    margin-top: 5px;
}

.title-divider {
    width: 40px;
    height: 3px;
    background: #40132e;
    margin: 10px auto 0;
    border-radius: 2px;
}

.car-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin:10px;
}

.car-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

.badge-category {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Category Badge Colors */
.badge-economy { background-color: #10b981; }
.badge-sedan   { background-color: #0284c7; }
.badge-luxury  { background-color: #8b5cf6; }
.badge-suv     { background-color: #f97316; }

.car-img-wrapper {
    text-align: center;
    padding: 20px 0 10px;
    height: 200px;
    /* width: 200px; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-img-wrapper img {
    max-height: 100%;
width: 100%;
    object-fit: cover;
}

.car-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.car-type {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 12px;
}

.car-specs {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 25px;
    margin-top: 16px;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.spec-item i {
    color: #40132e;
}

.card-footer-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price-tag {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
}

.price-tag span {
    font-size: 16px;
    font-weight: 500;
    color: #64748b;
}

.btn-view-details {
    background-color: #40132e;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    cursor:pointer;
}

.value-banner {
    background: #0b1329;
    border-radius: 16px;
    padding: 30px;
    color: #ffffff;
    margin: 60px 0;
}

.value-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.value-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    font-size: 18px;
    flex-shrink: 0;
}

.value-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.value-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 0;
}
.footer {
    background: #0b1329;
    color: #ffffff;
    padding: 60px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-brand {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.footer-desc {
    font-size: 13px;
    color: #94a3b8;
    max-width: 300px;
}

.social-links a {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: #40132e;
}

.footer-heading {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #94a3b8;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.contact-info-list i {
    color: #40132e;
    margin-top: 3px;
}

.btn-footer-book {
    background-color: #40132e;
    color: #ffffff;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
#carGrid{
    display:grid;
    grid-template-columns: repeat(4,1fr);
}
@media(max-width:479.98px){
    #carGrid {
  display: grid;
  grid-template-columns: repeat(1,1fr);
}
}



.car-modal-overlay{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.75);
display:flex;
justify-content:center;
align-items:center;
padding:40px;
z-index:99999;

opacity:0;
visibility:hidden;

transition:.4s;

}

.car-modal-overlay.show{

opacity:1;
visibility:visible;

}

/*========================*/

.car-modal{

background:#fff;
width:100%;
max-width:1150px;

border-radius:24px;

overflow:hidden;

position:relative;

/* max-height:90vh; */

overflow-y:auto;

animation:modalUp .45s;

}

@keyframes modalUp{

from{

opacity:0;
transform:translateY(60px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/*========================*/

.close-modal{

position:absolute;

right:20px;

top:20px;

width:48px;

height:48px;

border:none;

border-radius:50%;

background:#40132e;

color:#fff;

cursor:pointer;

font-size:18px;

z-index:20;

transition:.3s;

}

.close-modal:hover{

transform:rotate(180deg);

background:#7d9deb;

}

/*========================*/

.car-modal-top{

display:grid;

grid-template-columns:55% 45%;

}

/*========================*/

.car-image-box{

background:#eef4ff;

padding:0px;

display:flex;

align-items:center;

justify-content:center;

}

.car-image-box img{

width:100%;
height:100%;
object-fit: cover;
aspect-ratio: 1/0.6;
border-radius:18px;

}

/*========================*/

.car-info-box{

padding:45px;

}

.car-badge{

display:inline-block;

background:#40132e;

color:#fff;

padding:8px 18px;

border-radius:50px;

font-size:13px;

font-weight:600;

margin-bottom:18px;

}

.car-info-box h2{

font-size:40px;

margin-bottom:18px;

font-weight:700;

}

.car-info-box p{

line-height:1.9;

color:#666;

margin-bottom:30px;

}

.price-box{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

}

.price-box h3{

font-size:42px;

color:#40132e;

}

.price-box span{
display: none;
font-size:18px;

color:#555;

}

.book-btn{

padding:15px 34px;

background:#40132e;

color:#fff;

text-decoration:none;

border-radius:60px;

font-weight:600;

transition:.3s;

}

.book-btn:hover{

background:#7a9fec;

color:#fff;

}

/*========================*/

.modal-section{

padding:45px;

border-top:1px solid #edf0f7;

}

.modal-section h4{

font-size:25px;

margin-bottom:25px;

}

/*========================*/

.spec-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:22px;

}

.spec-card{

background:#f8fbff;

border:1px solid #dbe7ff;

border-radius:18px;

padding:25px;

text-align:center;

transition:.35s;

}

.spec-card:hover{

background:#40132e;

transform:translateY(-6px);

color:#fff;

}

.spec-card i{

font-size:26px;

margin-bottom:15px;

color:#40132e;

}

.spec-card:hover i{

color:#fff;

}

.spec-card span{

display:block;

font-size:14px;

margin-bottom:10px;

opacity:.8;

}

.spec-card strong{

font-size:19px;

}

/*========================*/

.feature-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

}

.feature-item{

padding:18px;

border-radius:15px;

background:#f8fbff;

display:flex;

align-items:center;

gap:15px;

font-weight:500;

transition:.3s;

}

.feature-item:hover{

background:#40132e;

color:#fff;

transform:translateY(-4px);

}

.feature-item i{

width:42px;

height:42px;

border-radius:50%;

background:#40132e;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:15px;

}

.feature-item:hover i{

background:#fff;

color:#40132e;

}

/*========================*/

.included-box{

background:#eef4ff;

border-left:6px solid #40132e;

padding:30px;

border-radius:18px;

}

.included-box ul{

margin:20px 0 0;

padding-left:18px;

}

.included-box li{

margin-bottom:15px;

font-size:16px;

}
/* Container alignment */
.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
}

/* Custom Select Styling */
.filter-group select {
    width: 100%;
    /* 1. Hide default native arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* 2. Add custom SVG dropdown arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    /* Position the arrow 12px from the right, centered vertically */
    background-position: right 12px center; 
    background-size: 10px auto;

    /* 3. Ensure right padding so text doesn't overlap the arrow */
    padding: 8px 30px 8px 12px; 
    
    /* Box properties */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background-color: #111827; /* adjust to match your theme */
    color: #fff;
    outline: none;
}
.filter-group1{
    width:95%;
}
.btn-reset{
    width:75px;
    height:43px;
    font-size: 16px;
    margin-top:22px;
}
/*========================*/

@media(max-width:991px){

.car-modal-top{

grid-template-columns:1fr;

}

.spec-grid{

grid-template-columns:repeat(2,1fr);

}

.feature-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.car-modal-overlay{

padding:15px;

}

.car-info-box{

padding:25px;

}

.car-info-box h2{

font-size:30px;

}

.modal-section{

padding:25px;

}

.spec-grid{

grid-template-columns:1fr;

}

.feature-grid{

grid-template-columns:1fr;

}

.price-box{

flex-direction:column;
align-items:flex-start;

}

}


@media(max-width:479.98px){
    .filter-group{
        padding:10px 14px;
    }
    .filter-price, .btn-mob-reset{
        width:100%;
    }
    .btn-reset{
        margin:10px auto 0px;
    }
    .section-title{
        font-size: 38px;
    }
}