@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600;800&display=swap');

:root { 
    --gold: #c5a021; 
    --dark: #0a0a0a; 
    --gray: #1a1a1a;
    --light: #f9f9f9;
    --white: #ffffff; 
}

body { font-family: 'Assistant', sans-serif; margin: 0; dir: rtl; text-align: right; color: var(--dark); line-height: 1.6; }

/* Header & Nav */
header { 
    background: var(--dark); 
    padding: 15px 8%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: sticky; top: 0; z-index: 1000;
}
.logo { font-size: 1.8rem; font-weight: 800; color: var(--gold); text-decoration: none; }
nav ul { list-style: none; display: flex; margin: 0; padding: 0; }
nav ul li { margin-left: 25px; }
nav ul li a { color: var(--white); text-decoration: none; font-weight: 600; transition: 0.3s; }
nav ul li a:hover, nav ul li a.active { color: var(--gold); }

/* Hero Sections */
.hero-sub { 
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?q=80&w=2000');
    background-size: cover; background-position: center;
    padding: 100px 8%; text-align: center; color: var(--white);
}

/* Container */
.container { padding: 60px 8%; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

/* Cards */
.card { background: var(--light); padding: 30px; border-radius: 15px; border-bottom: 4px solid var(--gold); }
.car-card { border-radius: 15px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); background: white; }
.car-card img { width: 100%; height: 200px; object-fit: cover; }
.car-card-body { padding: 20px; }

/* Footer */
footer { background: var(--dark); color: #777; padding: 50px 8%; text-align: center; }

/* Floating WhatsApp */
.wa-float { position: fixed; bottom: 20px; left: 20px; background: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 30px; z-index: 2000; text-decoration: none; }

@media (max-width: 768px) {
    nav { display: none; }
    .hero-sub h1 { font-size: 2rem; }
}